[TOC] #### 前言 ---- 如果只是简单写几个 Vue 的 demo 程序, 那么不需要使用 Vue CLI 来写 但是如果你在开发大型项目, 那么必然需要使用 Vue CLI。使用 Vue 开发大型应用时，我们需要考虑代码的目录结构、项目结构和部署、热加载、代码单元测试等事情，如果每个项目都需要手动完成这些工作，那无疑效率比较低效，所以我们通常会使用一些脚手架工具来帮助完成这些事情 #### 1. Vue CLI 简介 ---- Vue CLI 官网: <https://cli.vuejs.org/zh> 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也自动给安装上了 ```bash node -v npm -v ```  **c. 配置npm国内镜像** npmmirror 镜像站: <https://npmmirror.com> 淘宝的镜像变更通知: <https://developer.aliyun.com/mirror/NPM?from=tnpm> ```bash npm config set registry https://registry.npmmirror.com ``` 查看镜像 ```bash npm get registry ```  #### 3. 安装 Vue CLI ---- **全局安装 ** (`install` 可以简写为 `i`) ``` npm install -g @vue/cli ``` ```bash npm list -g ``` **查看 Vue CLI 版本** ``` vue --version // 可以简写为 vue -V ```  #### 4. 创建项目 ---- hello-world 是创建项目后的目录名称，可自定义 ```bash vue create hello-world ``` 执行命令后会弹出以下交互提示（可执行选择创建 Vue2 或 Vue3 项目） ```bash Vue CLI v5.0.9 ? Please pick a preset: (Use arrow keys) ❯ Default ([Vue 3] babel, eslint) Default ([Vue 2] babel, eslint) Manually select features ``` 预设配置: 创建项目时会有交互式操作，在操作提示的最后可以保存为预设（preset） 预设保存在 `~/.vuerc` ，我们可以进行编辑或删除预设 #### 5. 运行项目 ---- 通过查看 `package.json` 文件中的脚本命令： ```json { "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" } } ``` 可得知： ```bash # 本地运行 npm run serve # 打包项目 npm run build ``` 运行项目使用的默认端口是 8080，如果已经被占用，会使用 8081，依次类推，直到有可以使用的端口 实际开发中，我们可能会同时启动多个项目，每一次启动先后顺序不一样，导致端口号会变，我们可以指定项目本地运行时使用的端口，使其每次启动项目都使用固定的端口 方案一：在 `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, } }) ``` #### 6. 拉取 2.x 模板 (旧版本) ---- 全局安装一个侨接工具 ``` npm install -g @vue/cli-init ``` 初始化 Vue CLI 2 项目 ``` vue init webpack my-project ```