1## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
 2vue --version
 3
 4## 安装或者升级你的@vue/cli 
 5npm install -g @vue/cli
 6
 7## 执行创建命令
 8vue create vue_test
 9
10##  随后选择3.x
11##  Choose a version of Vue.js that you want to start the project with (Use arrow keys)
12##  > 3.x
13##    2.x
14
15## 启动
16cd vue_test
17npm run serve

 1## 1.创建命令
 2npm create vue@latest
 3
 4## 2.具体配置
 5## 配置项目名称
 6√ Project name: vue3_test
 7## 是否添加TypeScript支持
 8√ Add TypeScript?  Yes
 9## 是否添加JSX支持
10√ Add JSX Support?  No
11## 是否添加路由环境
12√ Add Vue Router for Single Page Application development?  No
13## 是否添加pinia环境
14√ Add Pinia for state management?  No
15## 是否添加单元测试
16√ Add Vitest for Unit Testing?  No
17## 是否添加端到端测试方案
18√ Add an End-to-End Testing Solution? » No
19## 是否添加ESLint语法检查
20√ Add ESLint for code quality?  Yes
21## 是否添加Prettiert代码格式化
22√ Add Prettier for code formatting?  No

 1<template>
 2  <div class="app">
 3    <h1>你好啊！</h1>
 4  </div>
 5</template>
 6
 7<script lang="ts">
 8  export default {
 9    name:'App' //组件名
10  }
11</script>
12
13<style>
14  .app {
15    background-color: #ddd;
16    box-shadow: 0 0 10px;
17    border-radius: 10px;
18    padding: 20px;
19  }
20</style>

 1<template>
 2  <div class="person">
 3    <h2>姓名：{{name}}</h2>
 4    <h2>年龄：{{age}}</h2>
 5    <button @click="changeName">修改名字</button>
 6    <button @click="changeAge">年龄+1</button>
 7    <button @click="showTel">点我查看联系方式</button>
 8  </div>
 9</template>
10
11<script lang="ts">
12  export default {
13    name:'App',
14    data() {
15      return {
16        name:'张三',
17        age:18,
18        tel:'13888888888'
19      }
20    },
21    methods:{
22      changeName(){
23        this.name = 'zhang-san'
24      },
25      changeAge(){
26        this.age += 1
27      },
28      showTel(){
29        alert(this.tel)
30      }
31    },
32  }
33</script>

 1<template>
 2  <div class="person">
 3    <h2>姓名：{{name}}</h2>
 4    <h2>年龄：{{age}}</h2>
 5    <button @click="changeName">修改名字</button>
 6    <button @click="changeAge">年龄+1</button>
 7    <button @click="showTel">点我查看联系方式</button>
 8  </div>
 9</template>
10
11<script lang="ts">
12  export default {
13    name:'Person',
14    setup(){
15      // 数据，原来写在data中（注意：此时的name、age、tel数据都不是响应式数据）
16        
17      let name = '张三'
18      let age = 18
19      let tel = '13888888888'
20
21      // 方法，原来写在methods中
22      function changeName(){
23        name = 'zhang-san' //注意：此时这么修改name页面是不变化的
24        console.log(name)
25      }
26      function changeAge(){
27        age += 1 //注意：此时这么修改age页面是不变化的
28        console.log(age)
29      }
30      function showTel(){
31        alert(tel)
32      }
33
34      // 返回一个对象，对象中的内容，模板中可以直接使用
35      return {name,age,tel,changeName,changeAge,showTel}
36    }
37  }
38</script>

1setup(){
2  return ()=> '你好啊！'
3}

 1<template>
 2  <div class="person">
 3    <h2>姓名：{{name}}</h2>
 4    <h2>年龄：{{age}}</h2>
 5    <button @click="changName">修改名字</button>
 6    <button @click="changAge">年龄+1</button>
 7    <button @click="showTel">点我查看联系方式</button>
 8  </div>
 9</template>
10
11<script lang="ts">
12  export default {
13    name:'Person',
14  }
15</script>
16
17<!-- 下面的写法是setup语法糖 -->
18<script setup lang="ts">
19  console.log(this) //undefined
20  //数据（注意：此时的name、age、tel都不是响应式数据）
21  let name = '张三'
22  let age = 18
23  let tel = '13888888888'
24
25  // 方法
26  function changName(){
27    name = '李四'//注意：此时这么修改name页面是不变化的
28  }
29  function changAge(){
30    console.log(age)
31    age += 1 //注意：此时这么修改age页面是不变化的
32  }
33  function showTel(){
34    alert(tel)
35  }
36</script>

1import { defineConfig } from 'vite'
2import VueSetupExtend from 'vite-plugin-vue-setup-extend'
3
4export default defineConfig({
5  plugins: [ VueSetupExtend() ]
6})

 1<template>
 2  <div class="person">
 3    <h2>姓名：{{name}}</h2>
 4    <h2>年龄：{{age}}</h2>
 5    <button @click="changeName">修改名字</button>
 6    <button @click="changeAge">年龄+1</button>
 7    <button @click="showTel">点我查看联系方式</button>
 8  </div>
 9</template>
10
11<script setup lang="ts" name="Person">
12  import {ref} from 'vue'
13  // name和age是一个RefImpl的实例对象，简称ref对象，它们的value属性是响应式的。
14  let name = ref('张三')
15  let age = ref(18)
16  // tel就是一个普通的字符串，不是响应式的
17  let tel = '13888888888'
18
19  function changeName(){
20    // JS中操作ref对象时候需要.value
21    name.value = '李四'
22    console.log(name.value)
23
24    // 注意：name不是响应式的，name.value是响应式的，所以如下代码并不会引起页面的更新。
25    // name = ref('zhang-san')
26  }
27  function changeAge(){
28    // JS中操作ref对象时候需要.value
29    age.value += 1 
30    console.log(age.value)
31  }
32  function showTel(){
33    alert(tel)
34  }
35</script>

 1<template>
 2  <div class="person">
 3    <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
 4    <h2>游戏列表：</h2>
 5    <ul>
 6      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
 7    </ul>
 8    <h2>测试：{{obj.a.b.c.d}}</h2>
 9    <button @click="changeCarPrice">修改汽车价格</button>
10    <button @click="changeFirstGame">修改第一游戏</button>
11    <button @click="test">测试</button>
12  </div>
13</template>
14
15<script lang="ts" setup name="Person">
16import { reactive } from 'vue'
17
18// 数据
19let car = reactive({ brand: '奔驰', price: 100 })
20let games = reactive([
21  { id: 'ahsgdyfa01', name: '英雄联盟' },
22  { id: 'ahsgdyfa02', name: '王者荣耀' },
23  { id: 'ahsgdyfa03', name: '原神' }
24])
25let obj = reactive({
26  a:{
27    b:{
28      c:{
29        d:666
30      }
31    }
32  }
33})
34
35function changeCarPrice() {
36  car.price += 10
37}
38function changeFirstGame() {
39  games[0].name = '流星蝴蝶剑'
40}
41function test(){
42  obj.a.b.c.d = 999
43}
44</script>

 1<template>
 2  <div class="person">
 3    <h2>汽车信息：一台{{ car.brand }}汽车，价值{{ car.price }}万</h2>
 4    <h2>游戏列表：</h2>
 5    <ul>
 6      <li v-for="g in games" :key="g.id">{{ g.name }}</li>
 7    </ul>
 8    <h2>测试：{{obj.a.b.c.d}}</h2>
 9    <button @click="changeCarPrice">修改汽车价格</button>
10    <button @click="changeFirstGame">修改第一游戏</button>
11    <button @click="test">测试</button>
12  </div>
13</template>
14
15<script lang="ts" setup name="Person">
16import { ref } from 'vue'
17
18// 数据
19let car = ref({ brand: '奔驰', price: 100 })
20let games = ref([
21  { id: 'ahsgdyfa01', name: '英雄联盟' },
22  { id: 'ahsgdyfa02', name: '王者荣耀' },
23  { id: 'ahsgdyfa03', name: '原神' }
24])
25let obj = ref({
26  a:{
27    b:{
28      c:{
29        d:666
30      }
31    }
32  }
33})
34
35console.log(car)
36
37function changeCarPrice() {
38  car.value.price += 10
39}
40function changeFirstGame() {
41  games.value[0].name = '流星蝴蝶剑'
42}
43function test(){
44  obj.value.a.b.c.d = 999
45}
46</script>

 1<template>
 2  <div class="person">
 3    <h2>姓名：{{person.name}}</h2>
 4    <h2>年龄：{{person.age}}</h2>
 5    <h2>性别：{{person.gender}}</h2>
 6    <button @click="changeName">修改名字</button>
 7    <button @click="changeAge">修改年龄</button>
 8    <button @click="changeGender">修改性别</button>
 9  </div>
10</template>
11
12<script lang="ts" setup name="Person">
13  import {ref,reactive,toRefs,toRef} from 'vue'
14
15  // 数据
16  let person = reactive({name:'张三', age:18, gender:'男'})
17	
18  // 通过toRefs将person对象中的n个属性批量取出，且依然保持响应式的能力
19  let {name,gender} =  toRefs(person)
20	
21  // 通过toRef将person对象中的gender属性取出，且依然保持响应式的能力
22  let age = toRef(person,'age')
23
24  // 方法
25  function changeName(){
26    name.value += '~'
27  }
28  function changeAge(){
29    age.value += 1
30  }
31  function changeGender(){
32    gender.value = '女'
33  }
34</script>

 1<template>
 2  <div class="person">
 3    姓：<input type="text" v-model="firstName"> <br>
 4    名：<input type="text" v-model="lastName"> <br>
 5    全名：<span>{{fullName}}</span> <br>
 6    <button @click="changeFullName">全名改为：li-si</button>
 7  </div>
 8</template>
 9
10<script setup lang="ts" name="App">
11  import {ref,computed} from 'vue'
12
13  let firstName = ref('zhang')
14  let lastName = ref('san')
15
16  // 计算属性——只读取，不修改
17  /* let fullName = computed(()=>{
18    return firstName.value + '-' + lastName.value
19  }) */
20
21
22  // 计算属性——既读取又修改
23  let fullName = computed({
24    // 读取
25    get(){
26      return firstName.value + '-' + lastName.value
27    },
28    // 修改
29    set(val){
30      console.log('有人修改了fullName',val)
31      firstName.value = val.split('-')[0]
32      lastName.value = val.split('-')[1]
33    }
34  })
35
36  function changeFullName(){
37    fullName.value = 'li-si'
38  } 
39</script>

 1<template>
 2  <div class="person">
 3    <h1>情况一：监视【ref】定义的【基本类型】数据</h1>
 4    <h2>当前求和为：{{sum}}</h2>
 5    <button @click="changeSum">点我sum+1</button>
 6  </div>
 7</template>
 8
 9<script lang="ts" setup name="Person">
10  import {ref,watch} from 'vue'
11  // 数据
12  let sum = ref(0)
13  // 方法
14  function changeSum(){
15    sum.value += 1
16  }
17  // 监视，情况一：监视【ref】定义的【基本类型】数据
18  const stopWatch = watch(sum,(newValue,oldValue)=>{
19    console.log('sum变化了',newValue,oldValue)
20    if(newValue >= 10){
21      stopWatch()
22    }
23  })
24</script>

 1<template>
 2  <div class="person">
 3    <h1>情况二：监视【ref】定义的【对象类型】数据</h1>
 4    <h2>姓名：{{ person.name }}</h2>
 5    <h2>年龄：{{ person.age }}</h2>
 6    <button @click="changeName">修改名字</button>
 7    <button @click="changeAge">修改年龄</button>
 8    <button @click="changePerson">修改整个人</button>
 9  </div>
10</template>
11
12<script lang="ts" setup name="Person">
13  import {ref,watch} from 'vue'
14  // 数据
15  let person = ref({
16    name:'张三',
17    age:18
18  })
19  // 方法
20  function changeName(){
21    person.value.name += '~'
22  }
23  function changeAge(){
24    person.value.age += 1
25  }
26  function changePerson(){
27    person.value = {name:'李四',age:90}
28  }
29  /* 
30    监视，情况一：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视
31    watch的第一个参数是：被监视的数据
32    watch的第二个参数是：监视的回调
33    watch的第三个参数是：配置对象（deep、immediate等等.....） 
34  */
35  watch(person,(newValue,oldValue)=>{
36    console.log('person变化了',newValue,oldValue)
37  },{deep:true})
38  
39</script>

 1<template>
 2  <div class="person">
 3    <h1>情况三：监视【reactive】定义的【对象类型】数据</h1>
 4    <h2>姓名：{{ person.name }}</h2>
 5    <h2>年龄：{{ person.age }}</h2>
 6    <button @click="changeName">修改名字</button>
 7    <button @click="changeAge">修改年龄</button>
 8    <button @click="changePerson">修改整个人</button>
 9    <hr>
10    <h2>测试：{{obj.a.b.c}}</h2>
11    <button @click="test">修改obj.a.b.c</button>
12  </div>
13</template>
14
15<script lang="ts" setup name="Person">
16  import {reactive,watch} from 'vue'
17  // 数据
18  let person = reactive({
19    name:'张三',
20    age:18
21  })
22  let obj = reactive({
23    a:{
24      b:{
25        c:666
26      }
27    }
28  })
29  // 方法
30  function changeName(){
31    person.name += '~'
32  }
33  function changeAge(){
34    person.age += 1
35  }
36  function changePerson(){
37    Object.assign(person,{name:'李四',age:80})
38  }
39  function test(){
40    obj.a.b.c = 888
41  }
42
43  // 监视，情况三：监视【reactive】定义的【对象类型】数据，且默认是开启深度监视的
44  watch(person,(newValue,oldValue)=>{
45    console.log('person变化了',newValue,oldValue)
46  })
47  watch(obj,(newValue,oldValue)=>{
48    console.log('Obj变化了',newValue,oldValue)
49  })
50</script>

 1<template>
 2  <div class="person">
 3    <h1>情况四：监视【ref】或【reactive】定义的【对象类型】数据中的某个属性</h1>
 4    <h2>姓名：{{ person.name }}</h2>
 5    <h2>年龄：{{ person.age }}</h2>
 6    <h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
 7    <button @click="changeName">修改名字</button>
 8    <button @click="changeAge">修改年龄</button>
 9    <button @click="changeC1">修改第一台车</button>
10    <button @click="changeC2">修改第二台车</button>
11    <button @click="changeCar">修改整个车</button>
12  </div>
13</template>
14
15<script lang="ts" setup name="Person">
16  import {reactive,watch} from 'vue'
17
18  // 数据
19  let person = reactive({
20    name:'张三',
21    age:18,
22    car:{
23      c1:'奔驰',
24      c2:'宝马'
25    }
26  })
27  // 方法
28  function changeName(){
29    person.name += '~'
30  }
31  function changeAge(){
32    person.age += 1
33  }
34  function changeC1(){
35    person.car.c1 = '奥迪'
36  }
37  function changeC2(){
38    person.car.c2 = '大众'
39  }
40  function changeCar(){
41    person.car = {c1:'雅迪',c2:'爱玛'}
42  }
43
44  // 监视，情况四：监视响应式对象中的某个属性，且该属性是基本类型的，要写成函数式
45  /* watch(()=> person.name,(newValue,oldValue)=>{
46    console.log('person.name变化了',newValue,oldValue)
47  }) */
48
49  // 监视，情况四：监视响应式对象中的某个属性，且该属性是对象类型的，可以直接写，也能写函数，更推荐写函数
50  watch(()=>person.car,(newValue,oldValue)=>{
51    console.log('person.car变化了',newValue,oldValue)
52  },{deep:true})
53</script>

 1<template>
 2  <div class="person">
 3    <h1>情况五：监视上述的多个数据</h1>
 4    <h2>姓名：{{ person.name }}</h2>
 5    <h2>年龄：{{ person.age }}</h2>
 6    <h2>汽车：{{ person.car.c1 }}、{{ person.car.c2 }}</h2>
 7    <button @click="changeName">修改名字</button>
 8    <button @click="changeAge">修改年龄</button>
 9    <button @click="changeC1">修改第一台车</button>
10    <button @click="changeC2">修改第二台车</button>
11    <button @click="changeCar">修改整个车</button>
12  </div>
13</template>
14
15<script lang="ts" setup name="Person">
16  import {reactive,watch} from 'vue'
17
18  // 数据
19  let person = reactive({
20    name:'张三',
21    age:18,
22    car:{
23      c1:'奔驰',
24      c2:'宝马'
25    }
26  })
27  // 方法
28  function changeName(){
29    person.name += '~'
30  }
31  function changeAge(){
32    person.age += 1
33  }
34  function changeC1(){
35    person.car.c1 = '奥迪'
36  }
37  function changeC2(){
38    person.car.c2 = '大众'
39  }
40  function changeCar(){
41    person.car = {c1:'雅迪',c2:'爱玛'}
42  }
43
44  // 监视，情况五：监视上述的多个数据
45  watch([()=>person.name,person.car],(newValue,oldValue)=>{
46    console.log('person.car变化了',newValue,oldValue)
47  },{deep:true})
48
49</script>

 1<template>
 2  <div class="person">
 3    <h1 ref="title1">尚硅谷</h1>
 4    <h2 ref="title2">前端</h2>
 5    <h3 ref="title3">Vue</h3>
 6    <input type="text" ref="inpt"> <br><br>
 7    <button @click="showLog">点我打印内容</button>
 8  </div>
 9</template>
10
11<script lang="ts" setup name="Person">
12  import {ref} from 'vue'
13	
14  let title1 = ref()
15  let title2 = ref()
16  let title3 = ref()
17
18  function showLog(){
19    // 通过id获取元素
20    const t1 = document.getElementById('title1')
21    // 打印内容
22    console.log((t1 as HTMLElement).innerText)
23    console.log((<HTMLElement>t1).innerText)
24    console.log(t1?.innerText)
25    
26		/************************************/
27		
28    // 通过ref获取元素
29    console.log(title1.value)
30    console.log(title2.value)
31    console.log(title3.value)
32  }
33</script>

 1<!-- 父组件App.vue -->
 2<template>
 3  <Person ref="ren"/>
 4  <button @click="test">测试</button>
 5</template>
 6
 7<script lang="ts" setup name="App">
 8  import Person from './components/Person.vue'
 9  import {ref} from 'vue'
10
11  let ren = ref()
12
13  function test(){
14    console.log(ren.value.name)
15    console.log(ren.value.age)
16  }
17</script>
18
19
20<!-- 子组件Person.vue中要使用defineExpose暴露内容 -->
21<script lang="ts" setup name="Person">
22  import {ref,defineExpose} from 'vue'
23	// 数据
24  let name = ref('张三')
25  let age = ref(18)
26  /****************************/
27  /****************************/
28  // 使用defineExpose将组件中的数据交给外部
29  defineExpose({name,age})
30</script>

1<!-- 第一种：to的字符串写法 -->
2<router-link active-class="active" to="/home">主页</router-link>
3
4<!-- 第二种：to的对象写法 -->
5<router-link active-class="active" :to="{path:'/home'}">Home</router-link>

 1routes:[
 2  {
 3    name:'zhuye',
 4    path:'/home',
 5    component:Home
 6  },
 7  {
 8    name:'xinwen',
 9    path:'/news',
10    component:News,
11  },
12  {
13    name:'guanyu',
14    path:'/about',
15    component:About
16  }
17]

1<!--简化前：需要写完整的路径（to的字符串写法） -->
2<router-link to="/news/detail">跳转</router-link>
3
4<!--简化后：直接通过名字跳转（to的对象写法配合name属性） -->
5<router-link :to="{name:'guanyu'}">跳转</router-link>