Vue CLI

安装 Vue CLI

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，可以自动生成 Vue.js+Webpack 的项目模板，其提供了强大的功能，用于定制新项目、配置原型、添加插件和检查 webpack 配置。

Vue CLI 文档：https://cli.vuejs.org/

使用 Vue CLI，需要全局安装 @vue/cli。

示例：全局安装 @vue/cli

终端执行：

# 安装vue-cli npm install @vue/cli -g # 查看vue-cli 版本信息 vue -V

示例效果：

使用命令行创建项目

@vue/cli 安装完成后，可以使用命令行创建一个 Vue 脚手架项目。

示例：使用命令行创建项目

终端执行：

# 创建项目 vue create 项目名

选择 Vue 脚手架项目的预设配置：

示例效果：

终端执行：

# 切换项目目录 cd hello-vue # 运行项目 npm run serve

示例效果：

使用 GUI 创建项目

Vue CLI 引入了图形用户界面（GUI）来创建和管理项目。

示例：使用 GUI 创建项目

终端执行：

# 运行GUI vue ui

示例效果：

在浏览器中打开 GUI：

在 GUI 中创建项目，手动配置项目，注意选择插件和 Vue.js 版本：

项目创建完成后，可以在 GUI 中对项目和插件进行管理：

使用 IDEA 打开创建好的 Vue 脚手架项目：

Vue CLI 项目结构

使用 Vue CLI 创建的项目：

使用 Vue CLI 创建的项目的文件/文件夹结构：

*.vue 文件：Vue 单文件组件。每一个 Vue 组件都包含 script、template、style。

<script> // export default对外抛出组件，方便其他位置调用 export default { // 组件配置 } </script> <template> <!-- 组件模板，有且只能有一个根标签 --> </template> <style scoped> <!-- 组件的CSS样式 scoped：样式只针对当前组件有效 --> </style>

src/router/index.js：Vue-Router 路由插件的配置文件。

// 导入Vue、Vue-Router import Vue from 'vue' import VueRouter from 'vue-router' // 导入了HomeView组件 import HomeView from '../views/HomeView.vue' // 对于脚手架项目，需要手动调用Vue.use安装路由插件 Vue.use(VueRouter) // 配置一组路由 const routes = [ { path: '/', name: 'home', component: HomeView }, { path: '/about', name: 'about', // 使用函数式写法，实现路由懒加载 // 当路由被触发时，该组件才会被异步加载 component: () => import('../views/AboutView.vue') } ] // 实例化路由管理者 const router = new VueRouter({ routes }) // 对外抛出路由管理者 export default router

src/main.js：项目的入口 JavaScript 文件。

// 导入相关内容 import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' Vue.config.productionTip = false // 实例化Vue实例 // 渲染APP实例，并挂载到index.html的#app上 new Vue({ router, store, render: h => h(App) }).$mount('#app')

package.json：npm 配置文件。

{ "name": "hello-vue", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" }, "dependencies": { "core-js": "^3.8.3", "vue": "^2.6.14", "vue-router": "^3.5.1", "vuex": "^3.6.2" }, "devDependencies": { "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-router": "~5.0.0", "@vue/cli-plugin-vuex": "~5.0.0", "@vue/cli-service": "~5.0.0", "vue-template-compiler": "^2.6.14" }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] }

安装插件

在 Vue CLI 中，可以使用三种方式安装插件。

• 使用 vue add 命令安装 Vue CLI 官方提供的插件。
• 使用 npm install 命令安装第三方提供的插件。
• 使用 GUI 安装插件。

CLI 服务和配置文件

CLI 服务

在 Vue 项目中需要使用 npm run serve 指令来启动项目，其中 serve 的内容就是指 vue-cli-service 的 CLI 命令。

启动项目的指令，可以在 npm 配置文件（package.json）中找到。

"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" },

vue-cli-service 的基本命令：

配置文件

vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。

vue.config.js 的基本配置：

const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, publicPath: '/', // 项目根目录 outputDir: 'dist', // 构建输出目录 devServer: { // 配置开发环境 port: 8080, // 端口号 } })

配置多页应用

使用 Vue CLI 创建的 Vue 项目一般都是 SPA 单页面应用（只有一个 index.html）。

在一些特殊常见下，如一套系统的管理端和客户端分为不同的页面应用，就需要构建多页面应用。

单页面应用（SPA）和多页面应用（MPA）的区别：

Vue CLI 支持使用 vue.config.js 中的 pages 选项构建一个多页面应用。

示例：配置多页应用

在 src 文件夹下创建 user、admin 文件夹代表两个不同的模块，并将相关文件和文件夹复制到这个两个模块中，注意修改相关引用的路径：

在 public 文件夹下创建 user.html、admin.html：

Vue 项目配置文件（vue.config.js）：

const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, pages: { user: { entry: 'src/user/main.js', // 入口的js文件 template: 'public/user.html' // 页面模板文件 }, admin: { entry: 'src/admin/main.js', // 入口的js文件 template: 'public/admin.html' // 页面模板文件 } } })

示例效果：

环境变量和模式

环境变量

在一个项目的开发过程中，一般都会经历本地开发、代码测试、开发自测、环境测试、预上线环境，最后才能发布线上正式版本。在这个过程中，每个环境可能都会有所差异。

为了方便管理，在 Vue CLI 中可以为不同的环境配置不同的环境变量。

在项目根目录中，可以放置以下文件来指定环境变量：

• .env：在所有的环境中被载入。
• .env.local：在所有的环境中被载入，但会被 git 忽略。
• .env.[mode]：只在指定的模式中被载入。
• .env.[mode].local：只在指定的模式中被载入，但会被 git 忽略。

环境文件加载的优先级：

• 为一个特定模式准备的环境文件（如 .env.production）将会比一般的环境文件（如 .env）拥有更高的优先级。
• Vue CLI 启动时已经存在的环境变量拥有最高优先级，并不会被 .env 文件覆写。

环境变量的使用：

• 在配置文件中使用，可以直接通过 process.env.XX 来使用环境变量。
• 在 src 目录的代码中使用环境变量时，要求环境变量以 VUE_APP_X 开头。

示例：环境变量

开发环境配置文件（.env.development）：

PORT=8099 VUE_APP_NAME=duozai

项目入口配置文件（src/main.js）：

new Vue({ router, store, render: h => h(App), created() { console.log(process.env.VUE_APP_NAME) } }).$mount('#app')

Vue 项目配置文件（vue.config.js）：

devServer: { port: process.env.PORT, }

示例效果：

模式

默认情况下，一个 Vue CLI 项目有三个模式：

• development 模式：即开发模式，用于 vue-cli-service serve。
• test 模式：即测试模式，用于 vue-cli-service test:unit。
• production 模式：即生产模式，用于 vue-cli-service build 和 vue-cli-service test:e2e。

在执行 vue-cli-service 命令时，可以通过传递 --mode 选项参数为命令行覆写默认的模式。

示例：模式

终端执行：

vue-cli-service serve --mode stage

静态资源管理

路径引用规则

• 如果 URL 是一个绝对路径（如 /images/foo.png），它将会被保留不变，可以引用 public 文件夹下的资源。
• 如果 URL 以 . 开头，它会被认为是相对模块请求，根据文档目录结构进行解析。
• 如果 URL 以 ~ 开头，其后的任何内容都会认为是模块请求，可以引用 node_modules 文件夹下的资源。
• 如果 URL 以 @ 开头，它也会作为一个模块请求被解析，Vue CLI 默认别名 @ 表示 src 文件夹。

处理静态资源

• 放置在 src/assets 文件夹下的静态资源通过相对路径被引用，这类引用会被 webpack 处理。
• 放置在 public 文件夹下通过绝对路径被引用，这类资源将会直接被拷贝，而不会经过 webpack 的处理。

示例：加载图片

根组件（App.vue）：

<template> <div> <!-- 引用public文件夹下的avatar.png --> <img src="/avatar.png" style="width: 100px"> <!-- 引用src/assets文件夹下的logo.png --> <img src="@/assets/logo.png" style="width: 100px"> </div> </template>

示例效果：