[TOC] #### 前言 ---- 如果只是簡單寫幾個(gè) Vue 的 demo 程序, 那么不需要使用 Vue CLI 來寫 但是如果你在開發(fā)大型項(xiàng)目, 那么必然需要使用 Vue CLI。使用 Vue 開發(fā)大型應(yīng)用時(shí)，我們需要考慮代碼的目錄結(jié)構(gòu)、項(xiàng)目結(jié)構(gòu)和部署、熱加載、代碼單元測試等事情，如果每個(gè)項(xiàng)目都需要手動(dòng)完成這些工作，那無疑效率比較低效，所以我們通常會(huì)使用一些腳手架工具來幫助完成這些事情 #### 1. Vue CLI 簡介 ---- Vue CLI 作用: 快速搭建 Vue 開發(fā)環(huán)境以及對(duì)應(yīng)的 webpack 配置 CLI: Command Line Interface，翻譯為: 命令行界面, 俗稱為: 腳手架 Vue CLI 是一個(gè)官方發(fā)布的 Vue.js 腳手架，致力于將 Vue 生態(tài)中的工具基礎(chǔ)標(biāo)準(zhǔn)化 Vue CLI 是一個(gè)基于 vue.js 進(jìn)行快速開發(fā)的完整系統(tǒng)，是一個(gè)全局安裝的 **npm包**，基于webpack構(gòu)建，豐富的官方插件集合，集成了前端生態(tài)中最好的工具，一套完全圖形化的創(chuàng)建和管理 Vue.js 項(xiàng)目的用戶界面 #### 2. 安裝 node ---- 因?yàn)?vue cli 是一個(gè)npm包，所以需要安裝 node，因?yàn)?npm 是用 node 寫的 npm（node package manager）node.js 包管理工具，用于插件管理、包管理、安裝卸載管理依賴 **a. 進(jìn)入 nodejs 中文網(wǎng)，下載最新的穩(wěn)定版** [http://nodejs.cn](http://nodejs.cn) **b. 查看 node、npm 版本** 安裝node時(shí)，npm也自動(dòng)給安裝上了 ``` node -v npm -v ```  **c. 配置npm國內(nèi)鏡像** 百度搜索 `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. 運(yùn)行 Vue CLI ---- 通過查看 `package.json` 文件中的腳本命令： ```json { "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" } } ``` 可得知： ```bash # 本地運(yùn)行 npm run serve # 打包項(xiàng)目 npm run build ``` 本地運(yùn)行使用的端口默認(rèn)是 80，如果已經(jīng)被占用會(huì)使用 81，依次類推，直到有可以使用的端口。如果同時(shí)啟動(dòng)多個(gè)項(xiàng)目時(shí)，可能每一次啟動(dòng)先后順序不一樣，導(dǎo)致端口號(hào)會(huì)變，那么我們可以想辦法固定本地運(yùn)行時(shí)使用的端口號(hào) 方案一：在 `package.json` 中的運(yùn)行命令后面添加 `--port` 參數(shù)指定端口號(hào) ```json { "scripts": { "serve": "vue-cli-service serve --port 8085" } } ``` 方案二：在目錄下的 `vue.config.js` 中指定端口號(hào) ```javascript const { defineConfig } = require("@vue/cli-service") module.exports = defineConfig({ devServer: { port: 8085, } }) ``` #### 5. 拉取 2.x 模板 (舊版本) ---- 全局安裝一個(gè)僑接工具 ``` npm install -g @vue/cli-init ``` 初始化 Vue CLI 2 項(xiàng)目 ``` vue init webpack my-project ``` 初始化 Vue CLI 3 項(xiàng)目 ``` vue create my-project ```