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

/*******************文章宜短不宜长，这篇文章就到这儿********************/好了，至此环境就搭建成功了，下一篇文章介绍他俩组合的内容