9.Vue构建工具使用

墨颜丶2023-03-182024-11-12

构建工具Vue CLI

Vue CLI是一个帮助开发者快速创建和开发Vue项目的工具，其核心功能是提供可交互的项目脚手架和运行时的服务依赖，对于开发者来说，使用其开发和调试Vue应用都非常方便。

Vue CLI的安装

Vue CLI是一个需要全局安装的NPM包，安装Vue CLI的前提是设备已经安装了node.js环境

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

1 2	PS C:\Users\Jerry> node -v v18.14.2

使用npm安装Vue CLI工具，在终端输入如下命令并执行：

1
2
3

npm install -g @vue/cli
## 如果出现 Error permission denied 是因为系统登陆用户权限不足，开头+ sudo 提权即可
sudo npm install -g @vue/cli

用以下命令检查Vue CLI工具是否安装完成，输出了工具的版本号，则表明已经安装完成。

PS C:\Users\Jerry> vue --version
@vue/cli 5.0.8
### 如果官方Vue CLI工具有升级，在终端使用如下命令进行升级
npm update -g @vue/cli

快速创建项目

使用Vue CLI工具创建一个完整的Vue项目

### hello-word 是项目名字，就是文件夹名
PS H:\vue_test> vue create hello-word


Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 3] babel, eslint)


Vue CLI v5.0.8
✨  Creating project in H:\vue_test\hello-word.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


added 861 packages in 3m
🚀  Invoking generators...
📦  Installing additional dependencies...


added 101 packages in 3m
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project hello-word.
👉  Get started with the following commands:

 $ cd hello-word
 $ npm run serve

执行上面命令，会询问创建vue2还是vue3，选择vue3。之后终端还会询问一系列配置问题，都选择默认的即可。完成初始化配置工作后，用Vscode打开此项目目录，如图所示：

也可以通过终端输入vue ui 命令打开Vue工程管理页面，可以在页面中创建项目，导入项目或对已有的项目进行管理。

比如使用 vue ui管理页面创建一个项目

Vue CLI项目模板工程

在安装Vue CLI工具时，也同步安装了vue-cli-service工具，其提供了Vue项目的代码检查、编译、服务部署等功能。

模板工程的目录结构

Vue3 的目录结构通常是基于传统的前端项目开发约定而来。它具有以下常见的目录：

├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── assets/
│   ├── components/
│   ├── router/
│   ├── store/
│   ├── views/
│   ├── App.vue
│   └── main.js
├── tests/
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js

下面将对每个目录和文件进行详细说明。

public/
public 目录存放了与业务逻辑无关的静态资源，例如 index.html、favicon.ico 等。index.html 是应用程序的入口文件，它被打包后生成到生产环境中。您可以在其中引入外部脚本或样式表，例如 CDN 上的库文件。

src/
src 目录是您的主要工作目录，包含了整个应用程序的源代码。

assets/ 目录用于存放应用程序使用的静态资源文件，例如图片、样式表等。
components/ 目录用于存放应用程序的公共组件。一个组件通常由 .vue 文件组成，其中包含了模板、样式和逻辑等内容。
router/ 目录用于定义应用程序的路由配置。您可以使用 Vue Router 来实现客户端路由，这样用户在访问不同页面时可以切换视图，而无需重新加载整个页面。
store/ 目录用于管理应用程序的状态。Vue3 推荐使用 Vuex 作为应用程序的状态管理工具。通过 Vuex，您可以集中管理和共享数据，简化组件之间的通信。
views/ 目录用于存放应用程序的页面级组件。每个页面通常由一个 .vue 文件组成，并且通过路由进行导航。
App.vue 是应用程序的根组件，它包含了应用程序的整体布局和结构。您可以在此文件中定义全局样式和全局组件。
main.js 是入口文件，用于初始化 Vue3 应用程序和配置一些全局设置。

tests/
tests 目录用于存放测试文件。您可以使用单元测试、集成测试等方式对应用程序进行测试。测试是保证代码质量和可靠性的重要手段。

.gitignore
.gitignore 文件用于指定 Git 版本控制系统忽略的文件和目录。您可以在其中列出不需要被提交到代码仓库的文件和目录，例如依赖包、构建产物等。

babel.config.js
babel.config.js 文件用于配置 Babel，一个 JavaScript 编译工具。您可以在其中指定需要使用的 Babel 插件和预设，以及其他相关配置。代码转换后兼容JavaScript代码, 这个文件我们一般无需修改

package.json
package.json 是 Node.js 项目的配置文件，其中包含了项目的元数据和依赖信息。您可以在其中配置脚本、安装依赖、指定启动命令等。

README.md
README.md 是项目的说明文档，通常用于介绍项目的概况、安装步骤、使用方法以及其他相关信息。编写完善的 README 文档有助于其他开发人员理解和使用您的项目。

vue.config.js
vue.config.js 文件用于自定义 Vue CLI 的默认配置。您可以在其中修改输出目录、配置代理服务器、添加自定义插件等。

最佳实践和建议

在使用 Vue3 目录结构时，以下是一些最佳实践和建议：

合理组织代码：根据功能和模块划分，将相关的代码文件放在对应的目录中。这样做可以提高代码的可读性和可维护性。
使用单文件组件：Vue3 推崇使用单文件组件的方式编写代码。将 HTML、CSS 和 JavaScript 代码放在同一个文件中，可以更好地组织和复用代码。
合理使用公共组件：将通用的 UI 组件、布局组件等放在 components/ 目录中，并尽量通过组件化的方式进行开发，以提高代码的可复用性。
路由管理和状态管理：对于较复杂的应用程序，使用 Vue Router 进行路由管理，使用 Vuex 进行状态管理，可以帮助您更好地组织和管理代码。
编写测试代码：编写测试代码可以帮助您确保代码的正确性和可靠性。使用适合的测试工具和框架，编写单元测试、集成测试等，提高代码的质量。
配置版本控制和构建工具：使用 Git 进行版本控制，通过.gitignore文件忽略不需要提交的文件。配置适合的构建工具（如 webpack），优化项目的构建和打包过程。
编写完善的文档：编写清晰、详细的文档可以帮助其他开发人员了解和使用您的项目。包括 README.md 在内的文档应该包含项目的概述、安装步骤、使用方法等。

演示

main.js 是应用程序的入口文件,代码如下:

// 导入Vue框架中的createApp方法
import { createApp } from 'vue'
// 导入我们自定义的根组件
import App from './App.vue'
// 挂载组件
createApp(App).mount('#app')

main.js文件只有组件的创建和挂载的相关逻辑,没有对应的HTML代码; 在public文件夹下会包含一个名为index.html文件,他就是网页的入口文件

main.js中定义的根组件将被挂载到id为app的div标签上.

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

main.js文件,其中导入了一个名为App的组件作为根组件,可以看到项目中有一个App.vue的文件,这其实使用了Vue中单文件组件的定义方法,即将组件定义在单独的文件中,以便于开发和维护。

单文件组件通常定义3部分内容:template模板部分、script脚本部分、style样式代码

<template>
  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

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

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
##app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

运行Vue项目工程

要运行vue模板项目，终端输入以下代码

PS H:\vue_test> cd .\hello-word\
PS H:\vue_test\hello-word> npm run serve

> hello-word@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...
 
### 出现下述信息，即可通过下述任意网址通过浏览器访问
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.199.116:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

默认情况，vue运行在8080端口，也可以手动指定

1	PS H:\vue_test\hello-word> npm run serve -- --port 9000

在项目中使用依赖

在vue项目开发中，额外的插件使用必不可少。Vue CLI创建的工程使用的是基于插件的架构。可以通过查看package.json文件，可以看到默认安装了需要的工具依赖。

例如如需安装vue-axios依赖，可以在项目工程目录下执行如下命令

1	npm install --save axios vue-axios

安装完成后，可以看到package.json文件会自动进行更新，更新后的依赖信息如下：

"dependencies": {
  "axios": "^1.4.0",
  "core-js": "^3.8.3",
  "vue": "^3.2.13",
  "vue-axios": "^3.5.2"
},

不止package.json文件会更新，在node_modules文件夹下也会新增axios和vue-axios相关的模块文件。

也可以使用图形化工具进行依赖管理，也可以直接在其中进行插件的安装和卸载

工程构建

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

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

1	npm run build

构建过程需要一些时间，构建完成后，在工程的根目录下将会生成一个名为 dist 的文件夹，这个文件夹就是我们需要发布的软件包。

也可使用图形化工具来构建工程。如果不添加任何参数进行构建会按照一些默认的规则进行，默认构建的环境是生产环境（开发环境的依赖不会被添加）。

构建工具Vite

如果你追求极致的构建速度，Vite将是一种不错的选择

Vite 与 Vue CLI的比较

与 Vue CLI 相比，Vite 的构建性能更快，能够更快地启动，并更快地重建。Vite 支持更快的 HMR（热重载）重新加载，并且在 Vue CLI 中会更容易地处理。Vite 通过使用 ES modules，允许将代码在浏览器中进行快速编译和加载，这使得其在生产环境下表现优秀。

然而，Vue CLI 对于生产环境的优化比 Vite 做得更好。Vue CLI 使用 UglifyJS 进行代码压缩，使用 Tree-Shaking 进行非常高效的打包，并通过 CDN 或者 chunkSplit 进行静态资源的分片。这些性能处理策略可以在生产环境中大大提高您的应用程序的性能。

如果您需要的是更好的开发体验和更快的 HMR，那么 Vite 是你的最佳选择。它的优势体现在开发中，尤其在前期开发中。Vite 进行了充分的优化，以实现更快的重速度，启动速度和构建速度。如果您正在处理大型应用程序或需要处理更大体积的应用程序，则 Vite 可以帮助您获得更好的性能。

而如果您正在为生产环境构建现代 Web 应用程序，则 Vue CLI 能够给予您更好的帮助和更丰富的功能支持。Vue CLI 具有更强大的生产构建工具，包括 Tree-Shaking 和预取组件等功能，以更好地优化应用程序性能。

体验Vite构建工具

兼容性注意

Vite 需要 Node.js 版本 18+，20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

node -v

搭建第一个 Vite 项目

1	npm create vite@latest

然后按照提示操作即可！

你还可以通过附加的命令行选项直接指定项目名称和你想要使用的模板。例如，要构建一个 Vite + Vue 项目，运行:

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

# yarn
yarn create vite my-vue-app --template vue

# pnpm
pnpm create vite my-vue-app --template vue

# bun
bunx create-vite my-vue-app --template vue

之后一步步进行一些配置项，Vite不止支持构建Vue项目，也支持构建基于React等框架项目，这里选择Vue即可。

从目录结构上看，Vite与Vue CLI构建的工程十分类似，区别在package.json文件。

在工程项目目录执行 npm run dev (第一次执行前别忘记执行 npm install 安装依赖)即可开发服务器，执行npm run build即可进行打包操作。

Vue3新一代脚手架create-vue

Create-Vue是一个基于Vue.js的项目脚手架，专门为Vue 3开发。它的目标是简化Vue.js项目的创建过程，并提供一个预先配置好的开发环境，使开发者能够快速开始开发工作。

Create-Vue的主要特点包括：

快速创建Vue 3项目：通过简单的命令行操作，可以快速创建一个新的Vue.js项目。
选择性安装插件：在使用Create-Vue时，可以选择性地安装需要的插件，例如Vue Router、Vuex等，而无需全局安装。
使用Vite构建工具：Create-Vue使用Vite作为构建工具，提供快速的热模块替换（HMR）和代码分割功能。
统一的风格和生成demo：Create-Vue提供统一的代码风格和示例，帮助开发者快速上手。

确保你安装了最新版本的 Node.js，并且你的当前工作目录正是打算创建项目的目录。在命令行中运行以下命令：

1	npm create vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

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

正在构建项目 ./<your-project-name>...
Done.

如果不确定是否要开启某个功能，你可以直接按下回车键选择 No。在项目被创建后，通过以下步骤安装依赖并启动开发服务器：

1
2
3

cd <your-project-name>
npm install
npm run dev

你现在应该已经运行起来了你的第一个 Vue 项目！请注意，生成的项目中的示例组件使用的是组合式 API 和 <script setup>，而非选项式 API。下面是一些补充提示：

推荐的 IDE 配置是 Visual Studio Code + Volar 扩展。如果使用其他编辑器，参考 IDE 支持章节。
更多工具细节，包括与后端框架的整合，我们会在工具链指南进行讨论。
要了解构建工具 Vite 更多背后的细节，请查看 Vite 文档。
如果你选择使用 TypeScript，请阅读 TypeScript 使用指南。

当你准备将应用发布到生产环境时，请运行：

1	npm run build

此命令会在 ./dist 文件夹中为你的应用创建一个生产环境的构建版本。关于将应用上线生产环境的更多内容，请阅读生产环境部署指南。