前端学习笔记 3：Vue 工程

前端学习笔记 3：Vue 工程

上一篇文章介绍了如何在单一 Html 页面中使用 Vue，本文介绍如何从头开始用 Vue 构建一个前端工程项目。

1.环境准备

Vue 框架代码的创建依赖于 Node.js，因此需要先安装 Node.js。

2.创建和启动

2.1.创建

通过以下命令可以创建 Vue 的框架代码：

npm create vue@latest

• 该命令执行后会先检查是否安装 create-vue 工具，如果没有，就安装。然后再使用 create-vue 创建框架代码。
• npm（Node Package Manager）是 NodeJS 的包管理工具，类似于 Linux 的 RPM 或 YUM。

在执行过程中会询问是否启用一些功能模块：

Vue.js - The Progressive JavaScript Framework

√ 请输入项目名称： ... vue-project
√ 是否使用 TypeScript 语法？ ... 否 / 是
√ 是否启用 JSX 支持？ ... 否 / 是
√ 是否引入 Vue Router 进行单页面应用开发？ ... 否 / 是
√ 是否引入 Pinia 用于状态管理？ ... 否 / 是
√ 是否引入 Vitest 用于单元测试？ ... 否 / 是
√ 是否要引入一款端到端（End to End）测试工具？ » 不需要
√ 是否引入 ESLint 用于代码质量检测？ ... 否 / 是

默认是否。

安装好框架代码后，还需要进入工程目录安装相关依赖：

cd .\vue-project\
npm install

2.2.启动

执行npm run dev命令可以启动 Vue 项目：

VITE v5.0.10  ready in 2711 ms

➜  Local:   http://localhost:5173/
➜  Network: use --host to expose
➜  press h + enter to show help

就像控制台提示信息中显示的，运行 Vue 项目的 Nodejs 服务端地址默认是 http://localhost:5173/，前往该地址就能看到一个默认的欢迎页面。

除了命令行启动外，还可以用 VSCode 启动：

如果界面上没有 NPM 脚本 这一栏，可以通过这里开启：

3.快速开始

下面简单分析一下工程默认的欢迎页的显示逻辑。

实际上浏览器访问时加载的是index.html文件：

该文件通过<script type="module" src="/src/main.js"></script>这行代码以模块化的方式加载了 JS 文件/src/main.js：

在main.js中，通过import { createApp } from 'vue'导入了 Vue 的createApp函数，与之前不同的是，因为已经用 npm 工具安装了本地依赖（npm install），所以这里是通过本地导入，而非从在线的 JS 文件导入 Vue 函数。

npm 安装的本地依赖模块位于node_modules目录下。

这里最重要的是import App from './App.vue'，从App.vue文件导入了一个 App 对象，之后的代码createApp(App).mount('#app')使用该对象作为参数创建了 Vue 实例。

App.vue文件包含三部分：

事实上，在开发基于 Vue 的前端项目时，我们主要工作是创建和修改 Vue 文件。

作为示例，这里可以创建一个Hello.vue：

<template>
    <h1>Hello World!</h1>
</template>
<style>
h1 {
    color: aqua;
}
</style>

要在页面中显示，还需要在main.js中替换导入代码：

import App from './Hello.vue'

在 Vue 文件中同样可以像前文那样为 Vue 实例提供数据和方法：

<script>
export default {
    data() {
        return {
            msg: 'Hello World!'
        }
    }
}
</script>
<template>
    <h1>{
  { msg }}</h1>
</template>

这里通过export default {...}指定了Hello.vue文件默认导出的对象内容，该对象会在main.js中导入为App对象，也就是用于创建 Vue 实例的参数对象，因此我们可以在export default {...}定义的默认导出对象中定义data或methods等 Vue 需要的方法或属性。

除了上面的方式外，还可以借助ref函数定义数据或方法：

<script setup>
import {ref} from 'vue'
const msg = ref('Hello World!')
</script>

注意，这里的script有setup属性。

4.API 风格

Vue 的 API 有两种风格，这里分别用两种风格编写同样的功能页面进行说明。

4.1.选项式

定义一个 Count.vue 文件：

<script>
export default {
    data() { //定义响应式数据
        return {
            num: 0
        }
    },
    methods: { // 定义 Vue 方法
        count() {
            this.num++;
        }
    },
    mounted(){ // 定义钩子函数
        console.log("Vue 实例已加载...")
    }
}
</script>
<template>
    <button @click="count">count:{
  { num }}</button>
</template>

要让该文件生效，还要在Hello.vue中导入：

<script setup>
import {
     ref} from 'vue'
const msg = ref('Hello World!')
import Count from './Count.vue'
</script>
<template>
    <h1>{
  { msg }}</h1>
    <br/>
    <Count/>
</template>

注意 >Count/> 标签，该标签的位置代表 Count.vue 文件中的模版插入的位置。

选项式的优点在于结构简单，便于理解，缺点是代码结构过于死板，不够灵活。

4.2.组合式

<script setup>
import { ref, onMounted } from 'vue'
// 定义响应式数据
const num = ref(0)
// 定义 Vue 方法
function count() {
    num.value++;
}
// 定义钩子函数
onMounted(() => {
    console.log("Vue 实例已加载...")
})
</script>
<template>
    <button @click="count">count:{
  { num }}</button>
</template>

在组合式 API 中，需要用ref函数定义响应式数据，用特定的函数（比如 onMounted）定义 Vue 生命周期的钩子方法。特别需要注意的是，组合式 API 中，ref定义的响应式数据有一个value属性，表示响应式数据的值，因此这里在count函数中，自增使用的是num.value++而非num++。

5 常用函数

5.1.setup

在组合式 API 中，script标签上使用了一个setup属性，这个属性实际上是一个语法糖，如果不使用这种简便写法，代码可能需要写成下面的形式：

<script>
export default {
    setup() {
        const message = 'Hello World!'
        const logMessage = () => {
            console.log(message)
        }
        return { message, logMessage }
    }
}
</script>
<template>
    {
  { message }}
    <button @click="logMessage">log message</button>
</template>