1.安裝 Node.js & Vue CLI
@vue/cli3，是vue-進行搭建的腳手架項目，它本質上是一個全局安裝的 npm 包，通過安裝它，可以為終端提供 vue 命令，進行vue項目的創建及管理運行等。當然使用這一腳手架工具，以及進行vue相關開發之前，均需要安裝 Node.js 環境，它實際提供了javascript的服務端運行環境。
（1）安裝node.js和npm
打開 Node.js 官網(https://nodejs.org/en/download/)，選擇長期支持版下載，之后一路 Next 下去即可。目前的 Node.js 安裝包已經包含了 npm，即安裝node.js后，一般不用再單獨安裝npm了，npm跟.NET 平台的 Nuget一樣，但它主要用於js等客戶端軟件依賴包的安裝。安裝完成后在cmd命令行輸入node –v和npm –v如果都能正確顯示版本號，則表明安裝成功了。
環境配置：需要配置npm安裝的全局模塊所在路徑，以及緩存cache的路徑，之所以要自行配置，是因為以后在執行類似：npm install express -g （可選參數-g，代表global全局安裝的意思）的安裝語句時，會將安裝的模塊安裝到【C:\Users\用戶名\AppData\Roaming\npm】路徑中，占C盤空間。例如：希望將全局模塊所在路徑和緩存路徑放在node.js安裝的文件夾中，則在安裝的文件夾“D:\Develop\nodejs”（本文自選了一個D盤的安裝地址）下創建兩個文件夾node_global及node_cache如下圖：
創建完兩個空文件夾之后，打開cmd命令窗口，輸入類似命令：
npm config set prefix "D:\Develop\nodejs\node_global"
npm config set cache "D:\Develop\nodejs\node_cache"
接下來設置環境變量，關閉cmd窗口，我的電腦-右鍵-屬性-高級系統設置-高級-環境變量，進入環境變量對話框，在系統變量下新建NODE_PATH，輸入D:\Develop\nodejs\node_global\node_modules，將用戶變量下的Path修改為D:\Develop\nodejs\node_global。
最后測試：配置完后，安裝個module測試下，我們就安裝最常用的express模塊，打開cmd窗口，輸入如下命令進行模塊的全局安裝：
npm install express -g # -g是全局安裝的意思
補充：通過npm安裝模塊時都是去國外的鏡像下載的，有的時候由於網絡原因會導致安裝模塊失敗，好在阿里有團隊維護國內鏡像:http://npm.taobao.org/ 上面有使用說明。官網：可以使用定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認的 npm，cnpm支持 npm 除了 publish 之外的所有命令。
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
（2）安裝@vue/cli3
Node 環境安裝好之后，就可以安裝@vue/cli3腳手架工具了，如果之前已經全局安裝了舊版本的 vue-cli (1.x 或 2.x)，則需要先卸載舊版本的 vue cli。
npm uninstall vue-cli -g ## 卸載 vue-cli (1.x or 2.x)
npm install -g @vue/cli
安裝之后，就可以在命令行中使用 vue 命令。
vue ## 查看 vue 相關幫助信息
vue --version ## 查看安裝的 vue cli 版本信息
只要能查看到版本信息，則表明已經安裝好了。
（3）創建vue項目
利用@vue/cli3，不僅可以使用 vue create 命令來創建項目，而且可以使用圖形化的頁面創建應用。以下具體操作比較流程化，請自行百度。項目運行命令與之前vue-cli有所區別，@vue/cli3啟動項目使用npm run serve。
vue create project-name ## 使用命令行的形式創建
vue ui ## 使用圖形化的方式創建
2.@vue/cli3與vue-cli項目結構區別
（1）文件的精簡度
@vue/cli3的目錄結構圖
vue cli 2.x 的目錄結構
（2）配置區別
①vuex（狀態管理）：在vue-cli 2 中，vuex是項目搭建完成后，需要自行npm install的，vue-cli 2的vuex文件夾（store）包含了三個js文件：action（存放一些調用外部API接口異步執行的方法，然后commit mutations改變數據）、index（初始化mutations 數據，是store的出口）、mutations（處理數據邏輯的同步執行的方法的集合，Vuex中store數據改變的唯一方法commit mutations）。@vue/cli 3 中，vuex是包含在項目搭建過程供選擇的預設，只用一個store.js代替了原來的store文件夾中的三個js文件。
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: { // 初始化狀態
count: 0
},
mutations: { // 處理狀態
increment(state, payload) {
state.count += payload.step
}
},
actions: { // 提交改變后的狀態
increment (context) {
context.commit('increment')
}
}
})
②去掉 static文件夾、新增 public 文件夾，vue-cli 2中，static 是 webpack 默認存放靜態資源的文件夾，打包時會直接復制一份到dist文件夾（不會經過 webpack 編譯）。@vue/ cli 3，摒棄了static，新增了一個 public文件夾。@vue/ cli 3中“靜態資源”有兩種處理方式：一是經webpack 處理，在 JavaScript 被導入或在 template/CSS 中通過“相對路徑”被引用的資源會被編譯並壓縮；二是不經webpack 處理，放置在 public 目錄下或通過絕對路徑被引用的資源將會“直接被拷貝”一份，不做任何編譯壓縮處理。
③index.html ，@vue/ cli 3中，“public/index.html ”會被 html-webpack-plugin 處理的。
④src/views：@vue/ cli 3的 src目錄下，新增了 views文件夾，用來存放 “頁面”，與 components（組件）進行區分。
⑥去掉 build（根據config中的配置來定義規則）、config（配置不同環境的參數）文件夾：@vue/ cli 3中，這些配置你可以通過命令行參數、或vue.config.js（在根目錄下自行新建一個 vue.config.js 同名文件）里的devServer字段配置開發服務器。
⑥babel.config.js：配置Babel 。Balbel的作用是將 ECMAScript 2015 及該版本以后的 javascript 代碼轉為舊版本瀏覽器或者是環境中向后兼容版本的 javascript 代碼，簡而言之，就是把不兼容的 JavaScript 代碼轉為可兼容，可以執行的 JavaScript 代碼。vue cli使用了 Babel 7 中的新配置格式babel.config.js。和.babelrc或package.json中的babel字段不同，這個配置文件不會使用基於文件位置的方案，而是會一致地運用到項目根目錄以下的所有文件，包括node_modules內部的依賴。官方推薦在vue cli項目中始終使用babel.config.js取代其它方式。
⑦根目錄的一些其他文件的改變：之前所有的配置文件都在vue create 搭建時preset預設，或者后期通過命令參數、在vue.config.js 中配置（根據需要在根目錄下新建 vue.config.js自行配置 ：https://cli.vuejs.org/zh/config/）。在@vue/ cli 3，webpack的配置已經被腳手架默認了，並不會顯示。如果我們需要手動配置webpack的一些配置，可以在根目錄下，手動創建配置文件---vue.config.js。