Vue-cil結合Element-ui開發（一）

前幾天用了一下Vue.js結合Element-ui,踩了不少坑，如今總結一下以備之後複習
---------------------------------------------------------------
首先安裝Vue官方腳手架vue-cil，我習慣使用npm安裝，上命令：

npm install vue-cil -g //npm install --global vue-cil

注意最好關了ESLint，這個小東西是用來檢查代碼的格式的，格式錯誤項目就徹底炸了，因此能夠關了以提升效率
查看一下Vue的版本，使用命令：
vue -V （注意是-V的V是大寫）
打開項目，找到並打開其中的package.json,在「devDependencies」中添加element-ui，若是須要用到jquery也順便添加了，

"element-ui": "^1.3.4",
"jquery": "^2.2.3"

注意嚴格按照package.json的格式，我在項目中安裝的是Element 1.3.4和JQuery 2.2.3版本，（此處安裝這兩個框架的方式和官網提供的略有區別，爲啥？由於我用官方提供的命令安裝各類報錯）
此時就能夠安裝依賴了，在新建的項目路徑下輸入命令，命令以下

npm install

此時官方提示國內用戶能夠用淘寶鏡像安裝依賴，不過最好仍是使用npm install來安裝依賴，雖然慢可是包齊全，使用cnpm會致使不少包缺失，很麻煩
此時就能夠先讓項目跑起來爽一下了，（固然最好改了端口，vue-cil項目默認8080端口，而這個端口被佔用的可能性很大，佔用了會怎樣？固然是報錯了，在哪兒改呢？config文件下的index.js文件中的 dev=>port "||"後面的就是端口號，改爲不經常使用的就好，好比8090）
如今就該引入element-ui了，打開src文件，這個文件就是咱們乘放代碼的地方，在App.vue文件的script中引入element，代碼以下

import Element from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

Vue.use(Element)

而後你就能夠在整個項目中引用Element了，固然JQuery的引入有一點點不一樣，打開build下的webpack.base.conf.js,

再文檔最上面添加

var webpack = require("webpack")

而後在mouule.exports的最後添加

plugins: [
    new webpack.optimize.CommonsChunkPlugin('common.js'),
    new webpack.ProvidePlugin({
      jQuery: "jquery",
      $: "jquery"
    })
  ]

這樣JQuery就安裝好了，此時你就能夠開心的使用JQuery了，固然我感受在Vue.js框架中JQuery並無多少用武之地，多是我還沒會用，在Vue-cil中
獲取數據能夠用JQuery分裝的ajax，用法沒有其區別，固然vue-cil框架有個很誘人的好處就是在裏面可使用ES6的語法標準，好比ES6就提供了一種全新的
數據獲取方式，名叫fetch，看下main的內容：

fetch("http://wthrcdn.etouch.cn/weather_mini?city=蘭州").then(function(response) {
    return response.json();
}).then(function(data) {
     console.log(data);
}).catch(function(e) {
    console.log("Oops, error");
});

這就是經過fetch獲取數據的案例，固然咱們們可使用箭頭函數使代碼更加簡潔

fetch("http://wthrcdn.etouch.cn/weather_mini?city=蘭州",{method: "get"})
.then(res=>{return res.json()})
.then(data =>{console.log(data)}).catch(e=>{console.log("Error")});

關於catch詳見大神博客：

http://www.javashuo.com/article/p-cqggfgkp-ec.html

/*******************文章宜短不宜長，這篇文章就到這兒********************/好了，至此環境就搭建成功了，下一篇文章介紹他倆組合的內容