前端系列-6 使用Vue3搭建前端工程与setup语法糖介绍

背景

本文介绍如何使用vue3脚手快速搭建一个前端项目，并对生成的项目结构进行简单介绍，然后介绍setup语法糖。前端入门的同学可基于本文内容快速搭建属于自己的项目。

vue官网资料显示, vue3开发的项目相对vue2, 具有打包后体积变小，极速启动服务、渲染速度快、内存减少、拥抱ts编程等优点。

1.项目搭建

vue3脚手架是基于vite构建工具, vite类似与webpack用于打包前端项目

1.1 项目初始化

初始化指令npm create vue@latest, 根据提示进行选择性按照，这里进行最简化安装(仅支持了ts)，如下所示:

powershell 复制代码

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文件:

javascript 复制代码

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

App.vue文件:

html 复制代码

<script setup lang="ts">
</script>

<template>
 <div>Hello World</div>
</template>

<style scoped>
</style>

整个项目的入口文件为index.html文件，在index.html中定义了一个id为"app"的div元素以及引入了src/main.ts文件:

html 复制代码

<!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指令运行前端项目，访问路径如下所示:

shell 复制代码

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定义组件的样式；

如下所示:

html 复制代码

<script setup lang="ts">
</script>

<template>
 <div>Hello World</div>
</template>

<style scoped>
</style>

其中，script setup lang="ts"表示支持typescript(可以写ts，也可以写js)，且使用setup语法糖。

在<script>中可以引入其他组件、ts脚本、样式，如下所示:

html 复制代码

<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中:

js 复制代码

export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

2.setup用法和setup语法糖

vue3中没有了this概念，变量和方法直接在setup中定义，用法如下所示:

html 复制代码

<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语法糖，可以简化为:

html 复制代码

<script setup lang="ts">
    // 数据
    let name ='ewen'

    //方法
    function changeName() {
        name = "ewens";
    }       
</script>

此时，可以直接在组件的template中直接使用name和changeName方法，如下所示:

html 复制代码

<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修改为响应式，从而点击修改名称时，页面显示变化:

html 复制代码

<script setup lang="ts">
import { ref } from 'vue';  
    // 数据
    let name =ref('ewen');

    //方法
    function changeName() {
      name.value = "ewens";        
    }
</script>