[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 ```