当前位置：首页 > news >正文

Vue3（一）

news 来源：原创 2025/5/18 6:18:14

一、安装nodejs

安装LTS版本：node-v22.15.1-win-x64.zip

二、创建一个 Vue 应用

参考：快速上手 | Vue.js

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>