Vue3——脚手架Vite

脚手架Vite

脚手架这一概念最初源自建筑领域，它指的是为了确保施工过程的顺利进行而搭建的工作平台。在编程领域，项目开发同样需要依赖软件开发平台的支持，因此出现了一些脚手架工具以供开发者使用。

Vue是一个渐进式前端Web开发框架，它提供了灵活性，允许开发者仅在项目中的特定页面或仅采用部分功能进行开发。但是，如果我们的目标是构建一个风格统一、具有高度可扩展性的现代化Web单页应用，那么充分利用Vue提供的全套功能进行开发将是非常合适的选择。结合Vue的工具链，我们可以构建一个集开发、编译、调试和发布于一体的集成开发流程。

1、Vite工具入门

Vite是一款可以助力开发者轻松创建和开发Vue项目的工具，其核心功能包括提供完整的Vue项目脚手架和运行时服务依赖，让开发者在开发和调试Vue应用时更加便捷。

1.1、使用Vite工具

理论上，我们可以直接引入Vue的核心代码库来使用Vue，无须任何额外的开发脚手架工具。然而，使用脚手架工具可以大幅简化复杂项目的配置和编译处理流程。Vue官网推荐的脚手架工具有Vite和Vue CLI两种。VueCLI曾是构建大型Vue项目不可或缺的工具，具备热重载模块的开发服务器、插件管理系统以及用户管理界面等众多高级功能。相比之下，Vite作为一款更新、更轻量的Vue脚手架工具，其设计理念与Vue框架本身更为契合。Vite旨在成为一款轻量级、极快的构建工具，其作者也是Vue框架的作者。

Vite是运行在Node.js平台上的软件包，因此我们首先需要安装Node.js环境。

访问Node.js官网：https://nodejs.org，网页打开后，在页面中间可以看到一个Node.js软件下载入口，如图所示。

Node.js官网会自动根据当前设备的系统类型推荐需要下载的软件，选择当前最新的稳定版本进行下载即可。下载完成后，按照安装普通软件的方式来对其进行安装即可。

配置好了Node.js环境后，就可以在终端使用npm相关指令来安装软件包了。在终端输入如下指令可以检查Node.js环境是否正确安装完成：

shell 复制代码

node -V

执行上述命令后，只要终端输出了版本号信息，就表明Node.js已经安装成功。

有时不同的项目所要求的Node.js的版本并不相同，能够方便地对当前所使用的Node.js环境的版本进行切换是十分必要的。nvm是一款Node.js版本管理工具，支持进行Node.js版本的下载、查看、切换等常用操作。如果有兴趣，你可以尝试使用nvm工具来安装Node.js。

创建Vite工程非常简单，直接使用npm工具即可。安装完成Node.js后，npm也会自动安装。npm是Node.js平台上的包管理工具，在终端执行如下指令：

shell 复制代码

npm create vite@latest

之后需要一步一步渐进式地选择一些配置项。首先输入工程名和包名，例如我们可以取名为1_HelloWorld，之后需要选择要使用的框架，Vite不止支持构建Vue项目，也支持构建基于React等框架的项目，这里我们选择Vue即可，所要使用的语言选择JavaScript编程语言。

项目创建完成后，可以看到生成的工程目录结构如图所示。

至此，我们已经创建了一个基于Vue框架的Vite项目。

1.2、Vite工程结构解析

前面我们使用Vite工具创建了一个Vue项目，默认的工程模板中包含很多文件，我们先来关注一下package.json文件。此文件是Node.js项目的核心文件，其中会定义当前项目的名称、版本号、外部依赖以及一些脚本命令。此文件的默认内容如下：

json 复制代码

{
  "name": "vite-app",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.32"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^6.0.6",
    "vite": "^8.0.10"
  }
}

其中，name选项用于指定项目名，version选项用于指定项目版本。除这类基础信息的配置外，scripts选项配置了Vite工程开发、编译和预览所使用的指令。dependencies中配置了项目生产环境所依赖的库，devDependencies配置了项目开发环境所依赖的库。可以看到，当前项目依赖的Vue版本为3.5.32，Vite工具的版本为8.0.10。

通过观察Vite创建出的工程目录，可以发现其中主要包含3个文件夹和5个独立文件。我们先来看这5个独立文件：

复制代码

.gitignore文件
index.html文件
package.json文件
README.md文件
vite.config.js文件

其中，以"."开头的文件是隐藏文件。下面我们对这些文件的功能进行简单介绍。

.gitignore文件用于配置Git版本管理工具需要忽略的文件或文件夹。使用Vite创建的项目默认采用Git作为版本控制系统。在项目创建过程中，Vite会自动配置.gitignore文件，以忽略一些如依赖、编译产物、日志等文件，通常我们无须对此进行修改。
index.html是整个项目的入口文件，它定义了承载Vue应用的HTML元素。
package.json文件非常重要，它存储了一个JSON对象，包含项目的名称、版本号、脚本命令以及依赖模块等配置信息。此文件还用于设置依赖库版本的匹配规则。当我们向项目添加新的依赖时，这些信息将被记录在package.json中。
README.md文件采用Markdown格式，记录了项目的编译和调试方法。此外，我们还可以在这个文件中编写项目的介绍。
vite.config.js文件是使用Vite创建项目时自动生成的，用于项目的配置，包括部署设置等。在项目的初期阶段，我们通常不需要修改它。

除这些独立的文件外，项目工程中还包含3个文件夹：

复制代码

     .vscode
     public
     src

.vscode文件夹与Vite本身无直接关联，它是VSCode编辑器生成的（如果你使用VS Code作为开发环境）。通常情况下，无须对此文件夹进行操作。
public文件夹用于存放公共资源，如项目所需的静态图片、数据文件等。这些资源在项目构建时会被打包为静态资源。
src文件夹是我们开发过程中最常接触的目录，它用于存放源代码文件。所有项目源码都应放置在这个目录下。

在运行项目之前，需要在项目根目录下执行以下命令来安装依赖：

shell 复制代码

npm install

此命令会根据package.json文件中的定义，安装当前项目所需的依赖模块。执行成功后，你将发现项目目录中新增了一个node_modules文件夹，该文件夹用于存放项目的所有依赖模块。

2、运行Vite项目

2.1、模板工程的结构

src文件夹是工程中最为关键的目录，我们所有的核心功能代码文件都存放在这个目录下。在默认的模板工程中，src文件夹下还包含两个子文件夹：assets和components。顾名思义，assets用于存放资源文件，而components用于存放组件文件。

main.js`文件是应用程序的入口文件

以下是该文件中的示例代码：

js 复制代码

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

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

这里的功能是将Vue应用实例挂载到页面上id为"app"的HTML元素上。你可能注意到，main.js文件中只包含应用的创建和挂载逻辑，并没有对应的HTML代码。那么，组件是挂载到哪里的呢？

这就需要回顾前面提到的index.html文件了，它是网页的入口文件。

以下是index.html文件中的相关代码：

html 复制代码

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>vite-app</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

main.js中定义的根组件将被挂载到id为"app"的
标签上。index.html文件中定义了基本的HTML结构。

再次回到main.js文件，其中导入了一个名为App的组件作为根组件。App是一个单文件组件，使用import语法可以将此组件导入，在当前JavaScript文件中便可以直接使用它了。

对应地，在src文件夹下有一个名为App.vue的文件。以.vue为后缀的文件便是单文件组件。在编写时，我们可以遵循单文件组件的语法结构来编写代码。打包时，Vue会对这类文件进行编译，将组件定义在单独的文件中，这有利于开发和维护。

App.vue文件中的内容如下：

html 复制代码

<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <HelloWorld />
</template>

每个单文件组件通常由三部分组成：<script>脚本代码部分、<template>模板部分和<style>样式代码部分。如以上代码所示，在JavaScript中引入了另一个名为HelloWorld的Vue组件，一旦引入，就可以直接在模板部分中使用它。在<template>模板中，布局了两个链接和一个自定义的HelloWorld组件。在<style>部分中，定义了所使用的CSS样式。

需要注意的是，上述代码中的<script>标签使用了setup标记，这是Vue 3提供的一种语法糖，其本质与我们之前学习的setup函数是类似的。使用这种语法糖可以使代码看起来更加清晰和简洁。<style>标签的scoped属性用来将这部分CSS样式限定为局部样式，即仅对当前组件生效，这样可以避免CSS样式在全局作用域内产生冲突。

接下来，让我们关注HelloWorld.vue文件的内容，代码如下：

html 复制代码

<script setup>
import { ref } from 'vue'
import viteLogo from '../assets/vite.svg'
import heroImg from '../assets/hero.png'
import vueLogo from '../assets/vue.svg'

const count = ref(0)
</script>

<template>
  <section id="center">
    <div class="hero">
      <img :src="heroImg" class="base" width="170" height="179" alt="" />
      <img :src="vueLogo" class="framework" alt="Vue logo" />
      <img :src="viteLogo" class="vite" alt="Vite logo" />
    </div>
    <div>
      <h1>Get started</h1>
      <p>Edit <code>src/App.vue</code> and save to test <code>HMR</code></p>
    </div>
    <button type="button" class="counter" @click="count++">
      Count is {{ count }}
    </button>
  </section>

  <div class="ticks"></div>

  <section id="next-steps">
    <div id="docs">
      <svg class="icon" role="presentation" aria-hidden="true">
        <use href="/icons.svg#documentation-icon"></use>
      </svg>
      <h2>Documentation</h2>
      <p>Your questions, answered</p>
      <ul>
        <li>
          <a href="https://vite.dev/" target="_blank">
            <img class="logo" :src="viteLogo" alt="" />
            Explore Vite
          </a>
        </li>
        <li>
          <a href="https://vuejs.org/" target="_blank">
            <img class="button-icon" :src="vueLogo" alt="" />
            Learn more
          </a>
        </li>
      </ul>
    </div>
    <div id="social">
      <svg class="icon" role="presentation" aria-hidden="true">
        <use href="/icons.svg#social-icon"></use>
      </svg>
      <h2>Connect with us</h2>
      <p>Join the Vite community</p>
      <ul>
        <li>
          <a href="https://github.com/vitejs/vite" target="_blank">
            <svg class="button-icon" role="presentation" aria-hidden="true">
              <use href="/icons.svg#github-icon"></use>
            </svg>
            GitHub
          </a>
        </li>
        <li>
          <a href="https://chat.vite.dev/" target="_blank">
            <svg class="button-icon" role="presentation" aria-hidden="true">
              <use href="/icons.svg#discord-icon"></use>
            </svg>
            Discord
          </a>
        </li>
        <li>
          <a href="https://x.com/vite_js" target="_blank">
            <svg class="button-icon" role="presentation" aria-hidden="true">
              <use href="/icons.svg#x-icon"></use>
            </svg>
            X.com
          </a>
        </li>
        <li>
          <a href="https://bsky.app/profile/vite.dev" target="_blank">
            <svg class="button-icon" role="presentation" aria-hidden="true">
              <use href="/icons.svg#bluesky-icon"></use>
            </svg>
            Bluesky
          </a>
        </li>
      </ul>
    </div>
  </section>

  <div class="ticks"></div>
  <section id="spacer"></section>
</template>

HelloWorld.vue文件中的代码量可能较多，但目前我们无须深入关注其具体内容。总体而言，它主要定义了一些文本段落和链接，并没有包含过于复杂的逻辑。有一处细节需要注意：在使用setup语法糖的<script setup>标签中，定义外部属性需要通过defineProps函数来进行，而且所定义的属性和方法无须显式导出，它们可以直接在模板或其他组合式API中使用。

2.2、运行Vite项目工程

运行Vite模板项目非常简单。首先，打开终端，进入当前Vue项目工程的目录中，然后执行以下命令：

shell 复制代码

npm run dev

在运行此命令之前，要确保所有依赖项都已成功安装。npm run是一个通用的指令格式，后面跟随的是要执行的具体脚本命令。在本例中，dev命令在package.json文件中有所定义，其本质上是执行了Vite的相关命令。

执行命令后，Vite将编译项目工程，并在本机上启动一个开发服务器。当终端输出显示项目已经成功运行的信息时，表明项目已经运行完成。具体的输出信息可能如下：

之后，在浏览器中输入如下地址，便会打开当前的Vue项目页面，如图所示。

shell 复制代码

http://localhost:5173/

默认情况下，启动的项目要运行在5173端口上，我们也可以手动指定端口，命令如下：

shell 复制代码

npm run dev -- --port 9000

运行上面的指令后，项目的开发服务器将会运行在9000端口上。

当我们启动开发服务器后，它默认配备了热重载功能。这意味着，在我们修改代码并保存后，网页将自动更新以反映这些更改。你可以尝试修改App.vue文件中HelloWorld组件的msg属性，然后保存文件。保存后，你将观察到浏览器页面中的标题也会自动更新。

3、使用依赖与工程构建

通过查看package.json文件，我们可以发现在开发环境下默认已经安装了Vite工具，它用于代码的编译和开发服务器的运行。安装依赖包的方法有两种：

一种是将所需的插件直接添加到package.json文件的dependencies部分，然后重新执行npm install命令进行安装；
另一种是直接在npm install命令中加入要安装的插件参数，这样就无须手动修改package.json文件，具体的命令格式如下：

shell 复制代码

npm install --save axios vue-axios

需要注意，如果安装过程中出现权限问题，需要在命令前添加sudo再执行。sudo表示使用root用户进行安装。安装完成后，可以看到package.json文件会自动进行更新，更新后的依赖信息如下：

json 复制代码

  "dependencies": {
    "axios": "^1.15.2",
    "vue": "^3.5.32",
    "vue-axios": "^3.5.2"
  }

其实，不止package.json文件会更新，在node_modules文件夹下也会新增Axios和vue-axios相关的模块文件。Axios是一个基于JavaScript的网络请求框架，vue-axios是在Axios的基础上针对Vue框架进行了封装，方便在Vue中用于网络请求。

开发完成了一个Vue项目后，我们需要将其构建成可发布的代码产品。Vite提供了对应的工具链来实现这些功能。

在工程目录下执行如下命令，可以直接将项目代码编译构建成生产包：

shell 复制代码

npm run build

构建过程可能会需要一段时间。以测试工程为例，构建完成后，终端输出的信息如下：

如果构建成功，在工程的根目录下会新生成一个名为dist的文件夹，这个文件夹就是我们要发布的软件包。可以看到。这个文件夹下包含一个名为index.html的文件，它是项目的入口文件，除此之外，还包含一些静态资源，如CSS，JavaScript等相关文件，这些文件中的代码都是被混淆和压缩完成后的。