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