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>

示例效果：