vue开发技术栈

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_27709465/article/details/79523484

首先,既然选择了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.csdn.net/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.csdn.net/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的图片







                

    


展开阅读全文

没有更多推荐了,返回首页