摘要：安裝完成之后，打開命令行工具，然后輸入，輸入和，如下圖，如果出現相應的版本號，則說明安裝成功。

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

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

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

   

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

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

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

不同的輸入和不同的結果,自己看

1.選擇安裝目錄

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

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

這是進入D盤

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

下圖有個錯誤,說明一下:是ESLint代碼規范不是es6規范

創建好了,這樣

3.進入創建好的項目目錄
    在原來的基礎上再輸入cd new,如下圖

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

安裝完了依賴這樣

5.安裝 路由模塊 vue-router 和網絡請求模塊 vue-resource/axios
    介紹:說白點,路由是vue用來跳轉頁面的,網絡請求是vue的ajax
    安裝:npm install vue-router--save, vue-resource --save(npm install axios)
    特別:vue1.0用的是vue-resource,2.0之后用axios,因為resource的作者不更新了

說一下各個目錄是干嘛的

6.啟動項目
    在項目目錄里輸入 npm run dev,默認端口是8080

這就是創建好的項目

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

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

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

坑:一定要用-D,否則容易報錯

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

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

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

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

4.webstorm里自動生成less文件:網上有很多,自己百度.

略...

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

這是main.js里文件的引入

這是main.js里的路由配置

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

package.json里的所有依賴

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

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

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