[TOC] #### 前言 ---- 如果只是简单写几个 Vue 的 demo 程序, 那么不需要使用 Vue CLI 来写 但是如果你在开发大型项目, 那么必然需要使用 Vue CLI。使用 Vue 开发大型应用时，我们需要考虑代码的目录结构、项目结构和部署、热加载、代码单元测试等事情，如果每个项目都需要手动完成这些工作，那无疑效率比较低效，所以我们通常会使用一些脚手架工具来帮助完成这些事情 #### 1. Vue CLI 简介 ---- Vue CLI 作用: 快速搭建 Vue 开发环境以及对应的 webpack 配置 CLI: Command Line Interface，翻译为: 命令行界面, 俗称为: 脚手架 Vue CLI 是一个官方发布的 Vue.js 脚手架，致力于将 Vue 生态中的工具基础标准化 Vue CLI 是一个基于 vue.js 进行快速开发的完整系统，是一个全局安装的 **npm包**，基于webpack构建，丰富的官方插件集合，集成了前端生态中最好的工具，一套完全图形化的创建和管理 Vue.js 项目的用户界面 #### 2. 安装 node ---- 因为 vue cli 是一个npm包，所以需要安装 node，因为 npm 是用 node 写的 npm（node package manager）node.js 包管理工具，用于插件管理、包管理、安装卸载管理依赖 **a. 进入 nodejs 中文网，下载最新的稳定版** [http://nodejs.cn](http://nodejs.cn) **b. 查看 node、npm 版本** 安装node时，npm也自动给安装上了 ``` node -v npm -v ```  **c. 配置npm国内镜像** 百度搜索 `cnpm` [https://developer.aliyun.com/mirror/NPM?from=tnpm](https://developer.aliyun.com/mirror/NPM?from=tnpm) ``` npm install -g cnpm --registry=https://registry.npm.taobao.org ``` **d. 查看镜像** ``` npm get registry ```  #### 3. 安装 Vue CLI ---- **全局安装 ** (`install` 可以简写为 `i`) ``` npm install -g @vue/cli ``` **查看 Vue CLI 版本** ``` vue --version // 可以简写为 vue -V ```  #### 4. 运行 Vue CLI ---- 通过查看 `package.json` 文件中的脚本命令： ```json { "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" } } ``` 可得知： ```bash # 本地运行 npm run serve # 打包项目 npm run build ``` 本地运行使用的端口默认是 80，如果已经被占用会使用 81，依次类推，直到有可以使用的端口。如果同时启动多个项目时，可能每一次启动先后顺序不一样，导致端口号会变，那么我们可以想办法固定本地运行时使用的端口号 方案一：在 `package.json` 中的运行命令后面添加 `--port` 参数指定端口号 ```json { "scripts": { "serve": "vue-cli-service serve --port 8085" } } ``` 方案二：在目录下的 `vue.config.js` 中指定端口号 ```javascript const { defineConfig } = require("@vue/cli-service") module.exports = defineConfig({ devServer: { port: 8085, } }) ``` #### 5. 拉取 2.x 模板 (旧版本) ---- 全局安装一个侨接工具 ``` npm install -g @vue/cli-init ``` 初始化 Vue CLI 2 项目 ``` vue init webpack my-project ``` 初始化 Vue CLI 3 项目 ``` vue create my-project ```