來源
分享：http://www.reibang.com/u/5bf340f084bd? 一岑不冉?
作者：一岑不冉
鏈接：http://www.reibang.com/p/c84eca5a2059
來源：簡書
著作權(quán)歸作者所有毕荐。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處喇闸。
前言
vue-cli作為一款mvvm框架語言(vue)的腳手架扣汪，集成了webpack環(huán)境及主要依賴杀迹，對于項(xiàng)目的搭建泼掠、打包、維護(hù)管理等都非常方便快捷衣厘。在開始項(xiàng)目之前如蚜，建議先熟悉vue.js基本語法。
安裝Node環(huán)境
1.安裝node.js
在node.js官網(wǎng)下載穩(wěn)定版本
下載node.js
下載完成后點(diǎn)擊安裝影暴，安裝過程很簡單错邦，一直next即可，安裝完成會自動添加node及npm環(huán)境變量型宙。
檢驗(yàn)是否安裝成功撬呢，在cmd輸入命令 node -v,回車 及 npm -v,回車，如出現(xiàn)下圖所示版本信息妆兑，表示安裝成功
2.安裝vue-cli
打開cmd命令行工具魂拦，輸入npm install -g vue-cli,回車 全局安裝vue-cli
(注：npm會有點(diǎn)慢，建議更改為國內(nèi)淘寶的鏡像搁嗓，只換源即可芯勘。在cmd輸入命令：npm config set registry https://registry.npm.taobao.org)
構(gòu)建vue-cli項(xiàng)目
1.創(chuàng)建項(xiàng)目
打開cmd，進(jìn)入想要創(chuàng)建項(xiàng)目的目錄下腺逛，輸入：vue init webpack projectname
webpack默認(rèn)是安裝2.0版本借尿，若要安裝1.0版本，需在webpack后面加上版本號信息屉来，
vue init webpack#1.0 project-name(安裝1.0版本)
projextname是自定義的項(xiàng)目名稱，例：我這里命名為vuedemo
創(chuàng)建vue-cli項(xiàng)目（1）
命令輸入完成后敲回車狈癞，此時會自動下載template模板茄靠，稍微等待一會，會讓你按提示完成項(xiàng)目的創(chuàng)建蝶桶，如下圖
創(chuàng)建vue-cli項(xiàng)目（2）
Project name:——項(xiàng)目名稱
Project description:——項(xiàng)目描述
Author:——作者
Vue build:——構(gòu)建模式慨绳，一般默認(rèn)選擇第一種
Install vue-router?:——是否安裝引入vue-router，這里選是，vue-router是路由組件,后面構(gòu)建項(xiàng)目會用到
Use ESLint to lint your code?:——這里強(qiáng)烈建議選no 否則你會非常痛苦脐雪，eslint的格式驗(yàn)證非常嚴(yán)格厌小，多一個空格少一個空格都會報錯，所以對于新手來說战秋，一般不建議開啟璧亚，會加大開發(fā)難度
Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch這兩個是測試，可以不用安裝
2.安裝依賴
項(xiàng)目創(chuàng)建完成脂信，打開文件夾可以看到目錄結(jié)構(gòu)如下
未安裝依賴時項(xiàng)目結(jié)構(gòu)
此時癣蟋，項(xiàng)目已經(jīng)初具雛形，但還未安裝依賴狰闪，需打開cmd疯搅，進(jìn)入項(xiàng)目所在根目錄下，輸入npm install,回車
依賴安裝中
依賴安裝結(jié)束
我們此時再打開項(xiàng)目文件夾埋泵，可以看到多了node_modules文件夾幔欧，里面是各種需要的依賴包
安裝依賴后項(xiàng)目結(jié)構(gòu)
3.運(yùn)行項(xiàng)目
打開cmd，進(jìn)入到項(xiàng)目所在目錄下丽声，輸入npm run dev,回車礁蔗，啟動項(xiàng)目
運(yùn)行項(xiàng)目（1）
完成后，瀏覽器會自動打開恒序，監(jiān)聽端口8080
運(yùn)行項(xiàng)目（2）
可以在瀏覽器看到如下畫面瘦麸，恭喜你，已成功構(gòu)建vue-cli項(xiàng)目歧胁，接下來就可以開始開發(fā)啦
擴(kuò)充：
從上創(chuàng)建項(xiàng)目到demo有詳細(xì)的講解滋饲，適合新手入門
1.如要引入外部css文件，首先需給項(xiàng)目安裝css-loader依賴包喊巍，打開cmd屠缭，進(jìn)入項(xiàng)目目錄，輸入npm install css-loader,回車崭参。安裝完成后呵曹，就可以在style標(biāo)簽下import所需的css文件，例如：
import './assets/css/public.css'
這樣何暮，我們就可以把style下的樣式封裝起來奄喂，寫到css文件夾，再引入到頁面使用海洼，整個vue頁面也看上去更簡潔跨新。
2.因?yàn)槲覀円玫浇涌谡埱螅缘谝徊较劝惭bvue-resource,打開cmd進(jìn)入文件所在目錄坏逢，輸入npm install vue-resource,安裝完成后在入口文件main.js中引入
import VueResource from 'vue-resource'
Vue.use(VueResource)
知識點(diǎn)：轉(zhuǎn)自： ?www.reibang.com/p/732b52f7e329??
1.router-link
標(biāo)簽主要實(shí)現(xiàn)跳轉(zhuǎn)鏈接功能域帐，屬性to='/'即是跳轉(zhuǎn)到path為'/'的路徑（我們等會得配置路徑為'/'和'/manage'的路由）
router-link除了可以跳轉(zhuǎn)鏈接之外赘被，還可以傳參，可以傳多個參數(shù)肖揣，一般格式為
(1):<router-link to="路由路徑">
2.this.$router.push
如果不想用標(biāo)簽民假，也可以給需要跳轉(zhuǎn)的地方添加一個點(diǎn)擊事件，在事件里寫this.$router.push方法
3.this.$route.params
this.$route指向vue實(shí)例的路由對象龙优，params是路由傳過來的參數(shù)集合
