前言: 初學(xué)Vue是有一定的學(xué)習(xí)成本的谍失。比如我剛開始接觸Vue時赞辩，我還未接觸node.js，腳手架webpack岸夯。在安裝時就遇到了難題。vue-cli作為一款mvvm框架語言(vue)的腳手架们妥，集成了webpack環(huán)境及主要依賴猜扮，對于項目的搭建、打包监婶、維護管理等都非常方便快捷旅赢。
一、安裝Node環(huán)境
在node.js官網(wǎng)下載穩(wěn)定版本惑惶，我是在Windows下安裝的鲜漩。
下載完成后點擊安裝，安裝過程很簡單集惋，一直next即可孕似，安裝完成會自動添加node及npm環(huán)境變量。
檢驗是否安裝成功刮刑，在cmd輸入命令 node -v,回車 及 npm -v,回車喉祭，如出現(xiàn)下圖所示版本信息，表示安裝成功
二雷绢、安裝vue-cli
打開cmd命令行工具泛烙，輸入npm install -g vue-cli,回車 全局安裝vue-cli
(注：npm會有點慢，建議更改為國內(nèi)淘寶的鏡像翘紊，只換源即可蔽氨。在cmd輸入命令：npm config set registry https://registry.npm.taobao.org)
構(gòu)建vue-cli項目
1、創(chuàng)建項目
打開cmd帆疟，進入想要創(chuàng)建項目的目錄下鹉究，輸入：vue init webpack projectname
projextname是自定義的項目名稱，例：我這里命名為vuedemo
命令輸入完成后敲回車踪宠，此時會自動下載template模板自赔，稍微等待一會，會讓你按提示完成項目的創(chuàng)建柳琢，如下圖
Project name:——項目名稱
Project description:——項目描述
Author:——作者
Vue build:——構(gòu)建模式绍妨，一般默認(rèn)選擇第一種
Install vue-router?:——是否安裝引入vue-router，這里選是柬脸，vue-router是路由組件,后面構(gòu)建項目會用到
Use ESLint to lint your code?:——這里強烈建議選no 否則你會非常痛苦他去，eslint的格式驗證非常嚴(yán)格，多一個空格少一個空格都會報錯倒堕，所以對于新手來說灾测，一般不建議開啟，會加大開發(fā)難度
Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch這兩個是測試涩馆，可以不用安裝
2行施、安裝依賴
項目創(chuàng)建完成，打開文件夾可以看到目錄結(jié)構(gòu)如下
此時魂那，項目已經(jīng)初具雛形蛾号，但還未安裝依賴。安裝依賴庫就是node_modules目錄下一堆的庫涯雅。這里你先簡單理解為項目運行所需的東西就好鲜结。打開cmd，進入項目所在根目錄下活逆，輸入npm install精刷，回車，如果網(wǎng)絡(luò)不好蔗候，需要一段時間怒允。
我們此時再打開項目文件夾，可以看到多了node_modules文件夾锈遥，里面是各種需要的依賴包
3纫事、運行項目
打開cmd，進入到項目所在目錄下所灸，輸入npm run dev,回車丽惶，啟動項目
完成后，瀏覽器會自動打開爬立，監(jiān)聽端口8080
可以在瀏覽器看到如下畫面钾唬，恭喜你，已成功構(gòu)建vue-cli項目侠驯，接下來就可以開始開發(fā)啦
你也許初學(xué)抡秆，不懂webpack，node.js吟策，vue.cli琅轧，OK，沒關(guān)系踊挠，照著這篇文章一步步做下來乍桂，安裝webpack,npm,node,vue.cli，最終能運npm dev run運行項目即可效床。至少你現(xiàn)在能訪問vue項目的頁面了睹酌。
