一、安装nodejs
安装LTS版本：node-v22.15.1-win-x64.zip
二、创建一个 Vue 应用
2.1、快速创建一个vue引用
1）在PC的E:\Wbstorm_Document\Vue3_Study路径下，执行命令：
npm create vue@latest
2）如果遇到镜像源报错，切换一下镜像源就可以解决了
npm config set registry https://registry.npmmirror.com
3）选择支持TS，输入回车即可
4）此时vue项目创建完毕，目录结构如下
2.2、vue脚手架目录结构介绍
env.d.ts：是一个 TypeScript 类型声明文件，专门为 Vite 构建工具和其相关特性提供类型定义。
index.html：项目的入口文件（一般会引入/src/main.ts）
/src/main.ts：注册App组件
tsconfig.app.json，tsconfig.json，tsconfig.node：TS的配置文件
vite.config.ts：整个项目的配置文件
vue3中是通过 createApp 函数创建一个应用实例。
2.3、最简单的Vue项目启动案例
1、main.ts文件
// 引入createApp用于创建应用
import {createApp} from 'vue'
// 引入App根组件
import App from './App.vue'
// 注册app
createApp(App).mount('#app')
2、App.vue文件
<template>
<div>
<h1>你好啊</h1>
</div>
</template>
<script lang='ts'>
export default {
name: 'App' // 组件名称
}
</script>
<style scoped>
</style>
3、通过执行npm run dev启动实例即可三、Setup（vue3的一个新的配置项，值是一个函数）
3.1、初步了解setup
<template>
<div>
<h1>{{name}}</h1>
<h1>{{age}}</h1>
<h1>{{tel}}</h1>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="showTel">查看电话</button>
</div>
</template>
<script lang='ts'>
export default {
name: 'Person',
// setup函数中的this是undefined（即：setup 拿不到vue2语法里面 data 的数据）
setup(){
// 定义变量-非响应式（数据，对应vue2的data）
let name = "zhangsan" // let定义的变量是非响应式的，变量值被修改后，页面不会自动刷新
let age = "18" // let定义的变量是非响应式的，变量值被修改后，页面不会自动刷新
let tel = "123456789" // let定义的变量是非响应式的，变量值被修改后，页面不会自动刷新
// 定义函数（方法，对应vue2的methods）
function changeName(){
name = "lisi"
}
function changeAge(){
age+=1
}
function showTel(){
alert(tel)
}
// 通过return 把【变量、方法】返回
return {
name,
age,
tel,
changeName,
changeAge,
showTel,
}
},
data(){ // vue2语法
// data 里面可以使用this获取到setup定义的变量
console.log(this.name)
},
methods:{ // vue2语法
}
}
</script>
<style scoped>
</style>3.2、setup语法糖，特点：无需return，用来实现各种组合式API，替代setup函数
3.2.1、这里会用到2个script标签，1个用来做【组件名称的配置】，1个用来【实现各种组合式API】，2个script标签缺一不可。
<template>
<div>
<h1>{{name}}</h1>
<h1>{{age}}</h1>
<h1>{{tel}}</h1>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="showTel">查看电话</button>
</div>
</template>
// 配置组件名称
<script lang='ts'>
export default {
name: 'Person',
}
</script>
// 使用setup语法糖（无需return，用来实现各种组合式API）替代setup函数
<script lang='ts' setup>
// 定义变量
let name = "zhangdan"
let age = "18"
let tel = "123456"
// 定义函数
function changeName(){
name = "lisi"
}
function changeAge(){
age+=1
}
function showTel(){
alert(tel)
}
</script>
<style scoped>
</style>3.2.2、如果嫌script标签麻烦，想使用1个script标签，方法如下
1、安装插件：npm i vite-plugin-vue-setup-extend -D
2、在 vite.config.ts 配置文件内，引入该插件
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueDevTools from 'vite-plugin-vue-devtools'
// 引用 vite-plugin-vue-setup-extend 插件，重命名为 VueSetupExtend
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
vueDevTools(),
// 使用 VueSetupExtend 插件
VueSetupExtend(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
})
3、在 script 标签中使用：name = "Person123" 即可重命名组件
<template>
<div>
<h1>{{name}}</h1>
<h1>{{age}}</h1>
<h1>{{tel}}</h1>
<button @click="changeName">修改名字</button>
<button @click="changeAge">修改年龄</button>
<button @click="showTel">查看电话</button>
</div>
</template>
// 使用setup语法糖（无需return，用来实现各种组合式API）替代setup函数
<script lang='ts' setup name = "Person123"> // 单独定义 name = "Person123" 就是组件名称
// 定义变量
let name = "zhangdan"
let age = "18"
let tel = "123456"
// 定义函数
function changeName(){
name = "lisi"
}
function changeAge(){
age+=1
}
function showTel(){
alert(tel)
}
</script>
<style scoped>
</style>