摘要：安裝完成之后，打開命令行工具，然后輸入，輸入和，如下圖，如果出現(xiàn)相應(yīng)的版本號(hào)，則說明安裝成功。

剛從坑里爬出來,來和大家分享一下,也許我寫的東西大部分文章都有,但是也有些新的東西,小白仔細(xì)看哦,大牛來了也請(qǐng)指點(diǎn)一二,也幫助我進(jìn)步!

1.node.js安裝
    安裝原因:Node.js 是一個(gè)服務(wù)器端 JavaScript 解釋器,既是開發(fā)平臺(tái), 也是運(yùn)行環(huán)境
    坑:node.js 8.1.0版本創(chuàng)建項(xiàng)目的時(shí)候不能輸入,注意繞過
    npm:是隨同NodeJS一起安裝的包管理工具,在官網(wǎng)下載安裝node.js后，就已經(jīng)自帶npm
    安裝:從node.js官網(wǎng)下載并安裝node，安裝過程很簡(jiǎn)單，一路“下一步”就可以了（傻瓜式安裝）。安裝完成之后，打開命令行工具(win+r，然后輸入cmd)，輸入 node -v和npm -v，如下圖，如果出現(xiàn)相應(yīng)的版本號(hào)，則說明安裝成功。
   

2. 淘寶鏡像安裝
    安裝原因:我們用的npm的服務(wù)器是外國，有的時(shí)候我們安裝“依賴”的時(shí)候很很慢很慢超級(jí)慢，所以就用這個(gè)cnpm來安裝我們說需要的“依賴”。
    安裝:打開命令行工具(cmd),輸入npm install -g cnpm --registry= https://registry.npm.taobao.org

   

安裝的時(shí)候指令輸入npm是從官方下載,速度可能慢一點(diǎn),但是比較全,cnpm是從國內(nèi)下載,可能不全.
最好使用npm

3.webpack安裝
    安裝原因:WebPack可以看做是模塊打包機(jī)：它做的事情是，分析你的項(xiàng)目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運(yùn)行的拓展語言（Scss，TypeScript等），并將其打包為合適的格式以供瀏覽器使用.
    安裝:打開命令行工具(cmd),輸入npm install webpack -g，安裝完成之后輸入 webpack -v，如下圖，如果出現(xiàn)相應(yīng)的版本號(hào)，則說明安裝成功。
    

4.安裝vue-cli腳手架構(gòu)建工具
    安裝原因:vue-cli是Vue框架的搭建工具,就像是蓋房子時(shí)房子的整體架構(gòu)圖,其作用是--構(gòu)建目錄結(jié)構(gòu)、本地調(diào)試、代碼部署、熱加載、單元測(cè)試
    安裝:打開命令行工具(cmd),輸入npm install vue-cli -g，安裝完成之后輸入 vue -V（注意這里是大寫的“V”），如下圖，如果出現(xiàn)相應(yīng)的版本號(hào)，則說明安裝成功。
    

不同的輸入和不同的結(jié)果,自己看

1.選擇安裝目錄

這是在桌面上創(chuàng)建(cd desktop)

這是返回上一級(jí)(cd..)

這是進(jìn)入D盤

2.安裝
打開命令行工具(cmd),進(jìn)入安裝目錄,例如在桌面 輸入vue init webpack new,(new是項(xiàng)目名字,隨便點(diǎn),但是不要寫漢字,有些也不支持字母大寫)

下圖有個(gè)錯(cuò)誤,說明一下:是ESLint代碼規(guī)范不是es6規(guī)范

創(chuàng)建好了,這樣

3.進(jìn)入創(chuàng)建好的項(xiàng)目目錄
    在原來的基礎(chǔ)上再輸入cd new,如下圖

4.安裝項(xiàng)目依賴
    打開命令行工具(cmd),輸入npm install,最好別用cnpm install,上面說過

安裝完了依賴這樣

5.安裝 路由模塊 vue-router 和網(wǎng)絡(luò)請(qǐng)求模塊 vue-resource/axios
    介紹:說白點(diǎn),路由是vue用來跳轉(zhuǎn)頁面的,網(wǎng)絡(luò)請(qǐng)求是vue的ajax
    安裝:npm install vue-router--save, vue-resource --save(npm install axios)
    特別:vue1.0用的是vue-resource,2.0之后用axios,因?yàn)閞esource的作者不更新了

說一下各個(gè)目錄是干嘛的

6.啟動(dòng)項(xiàng)目
    在項(xiàng)目目錄里輸入 npm run dev,默認(rèn)端口是8080

這就是創(chuàng)建好的項(xiàng)目

1.介紹:Element-ui是一套采用 Vue 2.0 作為基礎(chǔ)框架實(shí)現(xiàn)的組件庫,非常方便
2.安裝:在項(xiàng)目目錄里輸入npm i element-ui -S
3.然后在 main.js 引入并注冊(cè)
    import Element from "element-ui"
    import "element-ui/lib/theme-chalk/index.css"
    Vue.use(Element)

這時(shí)候可能會(huì)出錯(cuò),報(bào)錯(cuò)是由于我們引入了 index.css 這個(gè) CSS 文件，但是 webpack 打包的時(shí)候無法識(shí)別并轉(zhuǎn)換成 js，所以就需要配置才能讀取 css 和字體文件，運(yùn)行命令安裝下面三個(gè)東西(如果之前安裝過就不需要了)

npm install style-loader --save-D
npm install css-loader --save-D
npm install file-loader --save-D

坑:一定要用-D,否則容易報(bào)錯(cuò)

在 webpack.config.js 中的 module下的rules 數(shù)組加入以下配置

{
    test: /.css$/,
    loader: "style!css"
},
{
    test: /.(eot|woff|woff2|ttf)([?]?.*)$/,
    loader: "file"
}

坑:查看build/utils.js中的return里各種loader引入(如下圖),如果有相關(guān)的引入,webpack.config.js里就不用加了,也就是上面一步省略

1.介紹:Less 是一門 CSS 預(yù)處理語言，它擴(kuò)充了 CSS 語言，增加了諸如變量、混合（mixin）、函數(shù)等功能，讓 CSS 更易維護(hù)、方便制作主題、擴(kuò)充。
2.安裝:在項(xiàng)目目錄里npm install less less-loader --save(npm install -g less在全局中安裝)
    修改webpack.config.js文件，配置loader加載依賴，讓其支持外部的less,在原來的代碼上添加
    {
        test: /.less$/,
        loader: "style-loader!css-loader!less-loader",
    },
    同上,省略這一步,因?yàn)閎uild/utils.js中的return里的loader引入里有l(wèi)ess
3.使用:在組件里創(chuàng)建(style標(biāo)簽里加上 scoped 為只在此作用域 有效)
    這樣就可以在里邊寫less了,或者引入less文件    @import "./index.less"; //引入全局less文件

4.webstorm里自動(dòng)生成less文件:網(wǎng)上有很多,自己百度.

略...

1.全局安裝需要加 -g
2.main.js文件里面的樣式

這是main.js里文件的引入

這是main.js里的路由配置

3.Element引入可以是Element也可以是是ElementUI
4.組件的引入在main.js里,而less、js等文件的引入可以在main.js里,也可以在響應(yīng)的標(biāo)簽里
5.通過在項(xiàng)目里安裝的依賴都在這里(package.json),文件太多顯示不全,知道在哪,什么樣就可以了,想知道自己安裝的依賴有沒有,也可以看這里

package.json里的所有依賴

6.接著上面一點(diǎn)說一下,安裝的時(shí)候 
    npm install --save-dev 則添加到 package.json 文件 devDependencies 下(開發(fā)的時(shí)候用),
    npm install --save 會(huì)把依賴包名稱添加到 package.json 文件 dependencies 下(發(fā)布后還需要依賴的模塊，譬如像jQuery庫或者Angular框架類似的，我們?cè)陂_發(fā)完后后肯定還要依賴它們，否則就運(yùn)行不了).

希望本文可以給你提供一些幫助,這是我最高興的,覺得我有寫的不對(duì)或者有問題的地方也請(qǐng)幫我指正出來,大家互相幫助互相進(jìn)步,以后有新的的發(fā)現(xiàn)還會(huì)添加到里邊.

TypeScript暫時(shí)還沒有加進(jìn)去,目測(cè)vue里+ts挺麻煩的,后面研究差不多了再加進(jìn)來,有懂的大神可以留一下地址,3Q! 
差點(diǎn)忘了,對(duì)你有幫助或者覺得寫的還可以的話麻煩點(diǎn)個(gè)收藏和推薦,3Q!