1.首先要安裝node.js
安裝完成后，在cmd命令行里面鍵入node -v查看版本
C:\Users\lh188>node -v
v8.9.3
我們需要的npm功能已經在node中集成，輸入npm -v查看版本
C:\Users\lh188>node -v
v8.9.3
展示版本號，代表已經安裝成功。
2.由于npm的部分資源被強，我們需要安裝cnpm，相當于國內的鏡像地址。
在命令行里鍵入
npm install -g cnpm --registry=https://registry.npm.taobao.org
等待安裝完成后輸入cnpm -v查看版本
C:\Users\lh188>cnpm -v
cnpm@5.3.0 (D:\dev\nodejs\node_modules\cnpm\lib\parse_argv.js)
npm@6.1.0 (D:\dev\nodejs\node_modules\npm\lib\npm.js)
node@8.9.3 (D:\dev\nodejs\node.exe)
npminstall@3.7.0 (D:\dev\nodejs\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=D:\dev\nodejs
win32 x64 10.0.17134
registry=https://registry.npm.taobao.org
這個版本和npm是不一樣的。
使用方法就是需要用npm的地方用cnpm代替。
3.安裝vue
鍵入
cnpm install vue
4.安裝vue-cli
鍵入
cnpm install --global vue-cli
5.創建一個基于 webpack 模板的新項目
新建一個項目文件路徑，在命令行中進入要新建項目的文件路徑下鍵入
vue init webpack my-project
運行初始化命令的時候回讓用戶輸入幾個基本的選項，如項目名稱，描述，作者等信息，如果不想填直接回車默認就好。
需要注意的是項目的名稱不能大寫，不然會報錯。
Project name (my-project) # 項目名稱（我的項目）
Project description (A Vue.js project) # 項目描述一個Vue.js 項目
Author 作者（你的名字）
Install vue-router? (Y/n) # 是否安裝Vue路由，也就是以后是spa（但頁面應用需要的模塊）
Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代碼？ （Y [ yes ] / N [ no ]）
Pick an ESLint preset (Use arrow keys) # 選擇一個預置ESLint（使用箭頭鍵）
Setup unit tests with Karma + Mocha? (Y/n) # 設置單元測Karma + Mocha？ （Y/ N）
Setup e2e tests with Nightwatch? (Y/n) # 設置端到端測試，Nightwatch？ （Y/ N）
6.安裝完成后，運行項目
在命令行中進入項目文件目錄下鍵入
npm run dev
在瀏覽器輸入完成顯示的地址：http://localhost:8080
DONE Compiled successfully in 4254ms 10:51:13
I Your application is running here: http://localhost:8080
看到下圖說明項目構建成功
7，集成element-ui
在項目目錄的命令行輸入
npm i element-ui -S
安裝完成后在項目的main.js增加import
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' //單獨引入樣式文件
Vue.use(ElementUI)
至此，集成了Element-ui的vue-cli腳手架搭建完成
8.推薦使用ide
Visual Studio Code
