Vue 2.0 項目建立+Element-ui+Less+typescript[巨詳細+巨簡單+踩過的一些小坑]

先說點什麼

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

進入正題

Vue 2.0 項目的基本建立

一.Vue 2.0 的環境搭建

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」），以下圖，若是出現相應的版本號，則說明安裝成功。

不一樣的輸入和不一樣的結果,本身看

二. Vue 2.0 項目建立開始

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

這就是建立好的項目

Vue添加其餘插件

一. Element-ui

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裏就不用加了,也就是上面一步省略

二. Less

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 lang=」less」></style>(style標籤里加上 scoped 爲只在此做用域 有效)
    這樣就能夠在裏邊寫less了,或者引入less文件    @import './index.less'; //引入全局less文件

4.webstorm裏自動生成less文件:網上有不少,本身百度.

三.TypeScript

略...

本文總結

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!