vue开发技术栈

首先，既然选择了vue，就不要想着兼容ie8及以下的ie版本。

1. node.js的安装配置，菜鸟教程里面已经写的贼清楚了。

              http://www.runoob.com/nodejs/nodejs-install-setup.html

2. 然后使用淘宝镜像cnpm 

        $ npm install -g cnpm --registry=https://registry.npm.taobao.org

3. vue-cli的安装以及初始化vue项目

               https://segmentfault.com/q/1010000005865508

# 安装vue-cli
npm install -g vue-cli

# 使用vue-cli初始化项目(webpack的方案)
vue init webpack my-project

# 进入到目录
cd my-project

# 安装依赖
npm install

# 开始运行
npm run dev

4.  ui框架用element-ui，如何安装配置，官网上都写的很清楚了。

               http://element.eleme.io/#/zh-CN/component/quickstart

     类似的vue2框架有，iview。

               https://www.iviewui.com/docs/guide/start

     element-ui开发下来，还是会碰到挺多坑的， 我在

表单验证（这块坑是真的多），

layout布局，

container布局容器（由于element-ui布局用的是flex，ie10以后，ie才开始兼容flex。 关于flex兼容性问题      

http://blog.youkuaiyun.com/u010130282/article/details/52627661 ），

时间选择器，

文件上传，

这几块都碰到过坑。

5. 路由当然用vue-router了，这里主要多主要route（路由），router（路由器），routes（路线）这些就行了。

               https://segmentfault.com/a/1190000007825106

    组件可以用component: resolve => require( [../page/a.vue] , resolve) 引入；

                https://segmentfault.com/a/1190000009002754

5. vue里面要实现data属性共享，当然要用 vuex了。

                http://blog.youkuaiyun.com/h5_queenstyle12/article/details/75386359

6. 有些浏览器不支持 es6， 比如说百度浏览器，ie8以下的ie浏览器，ie8支持部分es6功能。所以我们要下一个babel-polyfill这个东东，可以解决这个问题。

npm install --save-dev babel-polyfill

import "babel-polyfill";

                https://www.cnblogs.com/princesong/p/6728250.html

7. 与后台交互的时候，数据交互的格式用 querystring 来转换。

                https://www.cnblogs.com/whiteMu/p/5986297.html

 比如： a = { name: "xiaoming", age: "18"};

                 querystring.stringify(a)     ==>     name = "xiaoming"&age = "18"; 

8. 发送异步请求， 我用的 axios。   

                https://www.jianshu.com/p/df464b26ae58

（1）安装axios很方便：

            npm install axios --save

（2）配置axios：

新创建一个http.js文件

import axios from 'axios';

const Axios = axios.create({
    baseURL: "http://"+ window.location.hostname + ":" + window.location.port+"/gps", 
    timeout: 10000,
    responseType: "json",
    withCredentials: true, // 是否允许带cookie这些
    headers: {
      "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
    }
});

Axios.interceptors.request.use( 

// 在发送请求之前的拦截器

config => { return config; }, error => { return Promise.reject(error); } );

Axios.interceptors.response.use(

// 返回数据的拦截器
    res => {
      return res;
    },
    error => {
      return Promise.reject(error);
    }
  );

// 对axios的实例重新封装成一个plugin ,方便 Vue.use(xxxx)
export default {
  install: function(Vue, Option) {
    Object.defineProperty(Vue.prototype, "$http", { value: Axios });
  }
};

然后将以上http.js文件导入到main.js文件当中

import axiosPlugin from "./http";
Vue.use(axiosPlugin);

在.vue文件中使用

this.$http.post('/vehicle/list',data).then(function (res) {
  
})

9. 跨域请求使用vue-jsonp

                https://www.cnblogs.com/rapale/p/7839203.html

10. 细节补充

（1）对于表格显示数据时候的全局过滤器filter

在main.js

Vue.filter('okkkk',function (value) {
  if(value == '1'){
    return 'ok';
  }else if(value == '0'){
    return 'no';
  }else{
    return 'no';
  }
})

使用的话直接

<el-table-column  label="ok么" width="110" align="center">
    <template scope="scope">{{ scope.row.ok|okkkk}}</template>
</el-table-column>

（2）定义一些vue原型函数

  

Vue.prototype.ok =function() { //  全局获取token函数
  console.log("ok");
}

this.ok();

 (3)附上一张main.js的图片