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详见大神博客：

https://segmentfault.com/a/1190000003810652

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

 

转载于:https://www.cnblogs.com/teersky/p/7772462.html