vue.js下载安装方法（图文教程）

Vue是一套用于构建用户界面的渐进式框架。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合

vue3安装

进入vue.js中文官网 https://cn.vuejs.org/ 下载最新版

第一种安装方法：通过 CDN 使用 Vue3
你可以借助 script 标签直接通过 CDN 来使用 Vue3： Vue3案例预览>>


<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue
  
  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

第二种安装方法：通过 nodejs 使用 Vue3
1、打开目录 >> cmd >> npm create vite@latest my-vue-app --template vue
my-vue-app 为指定目录可改，--template vue为指定模板也可改为 --template vue-ts用typescript语言

cd my-vue-app
npm install
npm install element-plus
npm run dev
打开生成的网址：http://127.0.0.1:5173/

Vue3目录结构

node_modules --- Vue项目的运行依赖文件夹
public --- 资源文件夹
src --- 源码文件夹
index.html --- 首页html文件
package.json --- 信息描述文件
vite.config.js --- Vue配置文件

Vue3案例

使用setup组合式API来写

属性绑定

在 Vue 中，可以通过 v-bind 指令来实现对属性的绑定。绑定的属性可以是 HTML 元素的标准属性，也可以是自定义属性。
v-bind 指令可以简写为冒号“:”。

HelloWorld.vue 代码

<template>
  <div v-bind:id="appid" :class="msg" v-bind:title="title">测试</div>
  <button :disabled="isButtonDisabled">Button</button>
  <div v-bind="myobject">测试2</div>
</template>

<script>
export default{
  data(){
    return{
      msg:"active",
      appid:"thisip",
      title:null,
      isButtonDisabled:false,
      myobject:{
        id:"divid",
        style:"color:blue"
      }
    }
  }
}
</script>
<style>
.active{color: red;}
</style>

App.vue 代码

<script setup>
import HelloWorld from './components/HelloWorld.vue' 
</script>

<template>
  <HelloWorld/>
</template>

条件渲染

在 Vue 3 中，可以通过 v-if 和 v-show 指令来实现条件渲染。这两种指令都可以根据给定的值（可以是一个 data 属性或计算属性）来显示或隐藏组件或 DOM 元素。

ifDemo.vue 代码

<template>
    <h3>条件渲染</h3>
    <div v-if="flag">你能看见我吗</div>
    <div v-else>那你还是看看我吧</div>
    <div v-if="type==='A'">A</div>
    <div v-else-if="type==='B'">B</div>
    <div v-else-if="type==='C'">B</div>
    <div v-else>not A/B/C</div>
    <div v-show="flag">你能看见我吗</div>
</template>
<script>
export default{
    data(){
        return {
            flag:true,
            type:"D"
        }
    }
}

</script>

App.vue 代码

<script setup>
import HelloWorld from './components/HelloWorld.vue' 
import ifDemo from './components/ifDemo.vue'
</script>

<template>
  <HelloWorld/>
  <ifDemo/>
</template>

列表渲染

在 Vue 中，我们可以使用 v-for 指令来进行列表渲染。v-for 指令需要接收一个列表数据作为参数，然后将这个列表渲染成多个组件/元素。

listDemo.vue 代码

<template>
    <h3>列表渲染</h3>
    <p v-for="item in names">{{ item }}</p>
</template>

<script>
export default{
    data(){
        return{
            names:["xiyueta.com","爱学习","是一件好事"]
        }
    }
}
</script>

App.vue 代码

<script setup>
import HelloWorld from './components/HelloWorld.vue' 
import ifDemo from './components/ifDemo.vue'
import listDemo from './components/listDemo.vue'
</script>

<template>
  <HelloWorld/>
  <ifDemo/>
  <listDemo/>
</template>

Devtools工具

开发工具（DevTools）是一组内置于浏览器中的工具，用于帮助开发人员调试、分析和优化其应用程序。

gitbhu介绍网址：https://github.com/vuejs/devtools
不同浏览器安装下载网址：https://devtools.vuejs.org/guide/installation.html

vue2通过CDN使用

vue2通过CDN使用，一个详细案例1
尝试一下>>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <!-- 1.2插值表达式 -->
    <p>{{ title }}</p>
    <p>{{ content }}</p>
    <p>{{ 1+2+3 }}</p>
    <p>{{ 1 > 2 ? '对' : '错' }}</p>
    <p>{{ output() }}</p>
    <p>{{ output() }}</p>
    <p>{{ output() }}</p>

    <p>{{ outputComtent }}</p>
    <p>{{ outputComtent }}</p>
    <p>{{ outputComtent }}</p>
    <!-- 4. 指令 -->
    <!-- 内容指定 -->
    <p v-text="htmlContent">123</p>
    <p v-html="htmlContent">123</p>

    <!-- 渲染指定 -->
    <p v-for="item in 5">这是内容</p>
    <p v-for="item in arr">这是内容：{{ item }}  </p>
    <p v-for="(item,key,index) in obj">这是内容：{{ item }} {{key}} {{index}}</p>
    <p v-if="false">标签内容</p>
    <p v-show="false">标签内容</p>
    <p v-show="boll">标签内容</p>

    <!-- 属性指令 -->
    <p v:bind:title="title">这是内容</p>
    <p :title="title">这是内容</p>

    <!-- 事件指令 -->
    <button v-on:click="output">按钮</button>
    <button @click="output">按钮</button>

    <!-- 表单指令：v-model可以实现双向数据绑定 -->
    <input type="text" v-model="inputValue">
    <p v-text="inputValue"></p>

    <!-- 5. 修饰符 -->
    <input type="text" v-model.trim="inputValue">
  </div>
  <!-- <script src="vue.min.js"></script> -->
  <script type="text/javascript" src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>

  <script>
    const value='这是内容'
    // document.getElementById('app').textContent=value
    // 1.响应式数据与插值表达式
    const vm=new Vue({
      el:'#app',
      data(){
        return {
          title:'这是标题文本',
          content:'这是内容文本',
          htmlContent:'这是一个<b>标签</b>',
          arr:['a','b','c','d'],
          obj:{a:10,b:20,c:30},
          boll:true,
          inputValue:'默认内容'
        }
      },
      // 1.3 methods 属性
      methods:{
        output(){
          console.log('methods执行了')
          return '标题为' + this.title + '，内容为' + this.content
          
        }
      },
      // 2. 计算属性：具有缓存性
      computed:{
        outputComtent(){
          console.log('computed执行了')
          return '标题为' + this.title + '，内容为' + this.content
        }
      },
      // 3. 侦听器
      watch:{
        title(newValue,oldValue){
          console.log(newValue,oldValue)
        }
      }
    })
  </script>
  
</body>
</html>

一个简单的vue2案例2

尝试一下>>

<script type="text/javascript" src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
<style>
  .class1{
      background: #444;
      color: #eee;
    }
    </style>
<div id="app">
  <p>{{site}}</p>
  <p v-text="url"></p>
  <p v-html="author"></p>
  <p>{{ details() }}</p>
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
  <p v-if="seen">现在你看到我了</p>
  <template v-if="ok">
    <h1>xiyueta.com</h1>
  </template>
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
  <p> {{ message.split('').reverse().join('') }}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
  el: '#app',
  data: {
    site: "xiyuetaJS库",
    url: "www.xiyueta.com",
    author: "<font color=red>xiao yun</font>",
    use: false,
    seen: true,
    ok: true,
    sites: [
      { name: 'Xiyueta' },
      { name: 'Google' },
      { name: 'Taobao' }
    ],
    message: "xiyueta.com"

  },
  methods: {
    details: function() {
      return this.site + " - 学的不仅是技术，更是梦想！";
    }
  }
})
console.log(vm.author)

</script>

vue2 脚手架与组件开发

Vue2脚手架：Vue CLI是Vue官方提供的脚手架工具，用于创建和管理Vue项目。可以使用Vue CLI 2或Vue CLI 3来创建Vue2项目。
官网地址：https://v2.cn.vuejs.org/v2/guide/class-and-style.html

npm install -g @vue/cli 命令用于全局安装Vue CLI，它是Vue官方提供的脚手架工具，用于创建和管理Vue项目。

vue create my-vue-project 命令用于创建一个新的Vue项目

或 vue ui 命令用于启动Vue项目的可视化界面管理工具。通过Vue UI，你可以使用图形化界面来管理和配置Vue项目，而不需要手动编辑配置文件。

npm i serve -g 全局安装"serve"模块
cd my-vue-project 使用"cd"命令切换到"my-vue-project"目录
npm run serve 命令将启动Vue项目的开发服务器

npm run build 命令将构建您的 Vue 项目并生成用于生产环境的优化版本（打包） serve dist 启动一个静态文件服务器并提供 dist 目录中的文件

注意：Visual Studio Code终端命令里，提示没有权限时，运行下面命令
打开一个管理员权限的 PowerShell 窗口。

Set-ExecutionPolicy -ExecutionPolicy Unrestricted -Scope CurrentUser
在 PowerShell 窗口中运行以下命令，以确认执行策略已更改为 “Unrestricted”：

Get-ExecutionPolicy -List

案例：src/App.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <h1>父组件中接收到的数据：{{ childData }}</h1>
    <HelloWorld 
      msg="Welcome to Your Vue.js App"
      :count="parentCount"
      @child-count-change="handler"
    >
    这是默认内容1
    <template v-slot:footer="dataObj">第一个footerr{{ dataObj.childCount }}</template> 
    <template #footer2>第一个footer2</template> 
      </HelloWorld>
      <HelloWorld>这是默认内容2</HelloWorld>
      <HelloWorld>这是默认内容3</HelloWorld>
      <HelloWorld></HelloWorld>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  data(){
    return{
      parentCount:300,
      childData:0
    }
  },
  methods:{
    handler(childCount){
      this.childData=childCount
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

案例：src/components/HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <slot>基础的默认内容</slot>
    <p>props中的count值{{ count }}</p>
    <button @click="handler">按钮</button>
    <slot name="footer" :childCount="childCount">第一个footer的默认内容</slot>
    <slot name="footer2"></slot>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  // 组件通信
  // 1.父传子：通过 props 进行处理
  // 2.子传父：通过自定义事件处理
  props: {
    msg: String,
    count:{
      type:[String, Number],
      default:100
    }
  },
  data(){
    return {
      childCount:0
    }
  },
  methods: {

    handler(){
        this.childCount++
        this.$emit('child-count-change',this.childCount)

      }
  
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
  background-color: blue;
}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

vite安装使用

cmd >> npm init vite@latest vite安装
cmd >> npm i vue-router 安装路由
cmd >> npm i pinia 状态管理
cmd >> npm i axios 发送请求
cmd >> npm i element-plus element库
cmd >> npm i sass sass-loader -D CSS预处理器
cmd >> npm i md5js 加密md5
cmd >> npm i nprogress --save 加载进度条插件

cmd >> npm init vite@latest >> 回车 >> 输入项目名 >> 选择vue >> 选择typescript
cd testvite >> npm install >> npm run dev
npm run build 打包