Vue-cli（脚手架）的使用

Vue 脚手架的基本用法

Vue 脚手架用于快速生成 Vue 项目基础架构，点击进入Vue脚手架官方文档。

安装或升级

安装 vue-cli

npm install -g @vue/cli

检查 vue-cli 版本

vue -V
# 或者
vue --version

升级 vue-cli

npm update -g @vue/cli

如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先通过 npm uninstall vue-cli -g 卸载它。

通过 vue-cli 脚手架创建 vue 项目

1. 在控制台输入 vue ui 开启 vue-cli 脚手架管理面板；

2. 在项目管理器中选择新项目要存放的路径后，点击“在此创建新项目”；

   
   
   Vue 项目管理器界面

3. 在详情界面，输入项目名（项目名必须是字母或数字，中文或特殊字符不行），包管理器一般选择默认，其余选项根据自己需求调整，完成配置且无误后点击“下一步”；

   
   
   创建新项目 — 详情界面

4. 在预设界面，我们可以选择默认或手动配置项目，选择之后点击“下一步”；

   
   
   创建新项目 — 预设界面

5. 在功能界面我们可以根据自身需求增减预安装的插件；
   如果是初学者，这里推荐打开【Choose Vue version、Babel、Router、Linter/Formatter、使用配置文件】，【Vuex（根据自己的需要选择）】；
   选择完成后点击“下一步”；

   
   
   创建新项目 — 功能界面

6. 进入最后的配置界面；
   Vue.js版本除非自身需求，否则一般选择2.x；
   是否使用历史模式路由 —— 关闭；
   选择 linter/formatter 配置文件，一般选择：ESLint + Standard config；
   Lint on save —— 开启；
   Lint and fix on commit —— 关闭；
   点击“创建项目”按钮，此时会询问是否保存这套配置，根据自己的需求选择。

   
   
   创建新项目 — 配置界面
7. 等待创建完成。

Vue 脚手架生成的项目结构分析

• node_modules —— 依赖包目录
• public —— 静态资源目录
• src —— 组件源码目录
  • assets —— 资源（如样式表、图片等）
  • components —— 组件
  • views —— 视图组件
  • App.js —— 根组件
  • main.js —— 打包入口文件
  • router.js —— 路由配置
• babel.config.js —— Babel配置文件
• package.json —— 包管理文件

Vue 脚手架自定义配置

1. 通过 package.json 配置项目

// 必须是符合规范的json语法
"vue": {
    "devServer": {
        // 端口
        "port": "8080",
        // 打包成功后自动打开浏览器
        "open": true
    }
}

2. 通过单独的配置文件配置项目（推荐）
   1. 在项目根目录创建文件 vue.config.js。
   2. 在该文件中进行相关配置，从而覆盖默认配置。

// vue.config.js
module.exports = {
    // 文件为相对路径
    publicPath: './',
    // 不生成 map 文件以减小打包后的体积
    productionSourceMap: false,
    devServer: {
        port: 8080,
        open: true
    }
}