前端系列-6 使用Vue3搭建前端工程与setup语法糖介绍
背景
本文介绍如何使用vue3脚手快速搭建一个前端项目，并对生成的项目结构进行简单介绍，然后介绍setup语法糖。前端入门的同学可基于本文内容快速搭建属于自己的项目。
vue官网资料显示, vue3开发的项目相对vue2, 具有打包后体积变小，极速启动服务、渲染速度快、内存减少、拥抱ts编程等优点。
1.项目搭建
vue3脚手架是基于vite构建工具, vite类似与webpack用于打包前端项目
1.1 项目初始化
初始化指令npm create vue@latest, 根据提示进行选择性按照，这里进行最简化安装(仅支持了ts)，如下所示:
D:\Data\Code\front>npm create vue@latest
Need to install the following packages:
create-vue@3.10.4
Ok to proceed? (y) yVue.js - The Progressive JavaScript Framework√ 请输入项目名称： ... vue3-demo-ewen
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是
√ 是否引入 Vue DevTools 7 扩展用于调试? (试验阶段) ... 否 / 是正在初始化项目 D:\Data\Code\front\vue3-demo-ewen...项目初始化完成，可执行以下命令：cd vue3-demo-ewennpm installnpm run devnpm notice
npm notice New minor version of npm available! 10.5.0 -> 10.8.1
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.8.1
npm notice Run npm install -g npm@10.8.1 to update!
npm noticeD:\Data\Code\front>
生成项目的目录如下所示:
项目包括以下几个部分:
[1] 配置文件
vite.config.ts是vite打包工具的配置文件；tsconfig.json、tsconfig.app.json、tsconfig.node.json是TypeScript配置文件；package.json是npm包管理工具配置文件。整个项目开发过程中，除了需要修改package.json外，其他配置文件几乎不需要关注。
[2] public资源
存放网页图标等资源文件。
[3] 项目代码
index.html和src文件夹。
[4] 其他
.gitignore git忽略文件，README.md 说明文档；
1.2 helloworld案例
删除src文件夹内所有文件，并在src路径下创建如下文件:
main.ts文件:
import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')
App.vue文件:
<script setup lang="ts">
</script><template><div>Hello World</div>
</template><style scoped>
</style>
整个项目的入口文件为index.html文件，在index.html中定义了一个id为"app"的div元素以及引入了src/main.ts文件:
<!DOCTYPE html>
<html lang="en"><!-- ... --><body><div id="app"></div><script type="module" src="/src/main.ts"></script></body>
</html>
在main.ts文件中，使用createApp函数创建一个Vue应用实例，并将App.vue作为根组件传递给这个实例。然后，通过调用mount方法将Vue应用挂载到app元素上。之后，Vue将接管这个元素，并将其内部的内容替换为App.vue组件的渲染结果。
说明：后续开发可在App.vue根组件的基础上进行。可以在根组件中开发页面，或者引入其他组件。
1.3 项目运行
运行npm install根据package.json文件下载项目所需要的依赖，在根目录新增node_modules，并放在该路径下。执行npm run dev指令运行前端项目，访问路径如下所示:
VITE v5.3.4 ready in 465 ms➜ Local: http://localhost:5173/➜ Network: use --host to expose➜ press h + enter to show help
2.vue组件
自定义的vue组件以.vue文件结尾，一般放在component文件夹下。
每个vue组件由3个部分组成: (1) template定义组件的结构，(2) script中定义前端逻辑，(3) style定义组件的样式；
如下所示:
<script setup lang="ts">
</script><template><div>Hello World</div>
</template><style scoped>
</style>
其中，script setup lang="ts"表示支持typescript(可以写ts，也可以写js)，且使用setup语法糖。
在<script>中可以引入其他组件、ts脚本、样式， 如下所示:
<script setup lang="ts">// 导入HelloWorld.vue文件import HelloWorld from './components/HelloWorld.vue'
</script><template>
<!-- 引入HelloWorld.vue后，这里可以直接使用HelloWorld标签 /> --> <HelloWorld msg="You did it!" />
</template><style scoped>
</style>
上述通过import HelloWorld from './components/HelloWorld.vue'引入HelloWorld.vue组件，也可用于引入css/scss或者js/ts等文件。
另外， ./components/HelloWorld.vue也可替换为 @/components/HelloWorld.vue. @是一个别名表示src目录，定义于vite.config.ts中:
export default defineConfig({plugins: [vue(),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}}
})
2.setup用法和setup语法糖
vue3中没有了this概念，变量和方法直接在setup中定义，用法如下所示:
<script lang="ts">
export default {name: 'Person',setup() {// 数据let name ='ewen'//方法function changName() {name = "ewens";} return {name, changeName}// 等价于 return {name:name, changeName:changeName}}
}
</script>
通过setup语法糖，可以简化为:
<script setup lang="ts">// 数据let name ='ewen'//方法function changeName() {name = "ewens";}
</script>
此时，可以直接在组件的template中直接使用name和changeName方法，如下所示:
<script setup lang="ts">// 数据let name ='ewen'//方法function changeName() {name = "ewens";console.log("name is "+name)}
</script><template><div >{{name}}</div><button @click="changeName">修改名称</button>
</template><style scoped>
</style>
点击修改名称按钮，浏览器的console显示"name is ewens"。
说明此时name数据已被修改，而页面仍显示ewen；原因是name不是响应式数据，这部分内容后续介绍。
可通过如下方式将name修改为响应式，从而点击修改名称时，页面显示变化:
<script setup lang="ts">
import { ref } from 'vue'; // 数据let name =ref('ewen');//方法function changeName() {name.value = "ewens"; }
</script>