前端系列-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) y
Vue.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-ewen
npm install
npm run dev
npm 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 notice
D:\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>
原文地址：https://blog.csdn.net/Sheng_Q/article/details/138543123
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！