Vue2.0 快速开发爬坑指南——项目配置

前提：

之前都只是小打小闹的自己做做小demo，真正做一个项目的时候还是遇到了很多问题，在本文中将会介绍到整个项目的配置及开发，旨在把项目做起来。

---

先从webpack的配置，vue-cli的一些改造或者说项目上需要的一些工具说起：

Axios:

一般脚手架下下来之后，基本就可以满足整个项目的开发了，但是像服务器请求，在升级到2.0后，官方已经取消对vue-resource的更新而是转推Axios；

npm install axios   //通过npm 下载axios

//在main.js 中引用
import axios from 'axios'    

// 将axios 绑定到vue原型上
import Vue from 'vue'
Vue.prototype.$ajax = axios;  //笔者习惯用ajax命名 这样大家应该都看得懂，blue:名字叫什么不重要

axios 是一个基于Promise 的网络请求插件，promise的好处是让异步看起来更像是同步，并且推荐使用箭头函数来写回调：

this.$ajax.post(url+"/login","action=login")  //这里用到了url会在后面全局参数和全局方法配置中讲解
.then((res)=>{
        this.msg = res.data.msg
})
.then(()=>{
        //do something  也是为了逻辑清楚，我们约定第一个then 只赋值数据，第二个then 做一些逻辑处理
})
//使用箭头函数的好处就是不需要在重定向this，代码能更简洁

路由配置：

团队合作时，都会遇到多人配置路由的情况，所以单一路由文件便变得不可取，这里推荐一个方案。也是借鉴一位好友的

src文件目录

在index.js 中配置基本路由信息

import Vue from 'vue'
import Router from 'vue-router'
import Router_Yb from './router-yb'
import Router_Yunfly from './router-qfy'
import Router_fy from './router-fy'
import Router_yjl from './router-yjl'

Vue.use(Router);

const router = [...Router_Yb,...Router_Yunfly,...Router_fy,...Router_yjl];

export default new Router({
  linkActiveClass:"is-active",
  base: __dirname,
  routes: router
})

项目中各自写各自的路由：

 export default [
  {
    // 个人中心
    path: '/personal',
    component:resolve =>{
      require(['../views/personal/personalcenter.vue'],resolve)
    }
  }]

然后在main.js中将路由配置注入即可：

import router from './router'

new Vue({
  el: '#app',
  router,
  store:stores,
  template: '<App/>',
  components: { App }
});

全局参数，方法的配置

通常会在src目录下新建一个config文件夹，在里面进行全局参数和方法的配置

全局方法的话一般会绑定在vue原型中 并在入口js文件中引入并use即可

exports.install = function (Vue, options) {
  //返回上一路由
  Vue.prototype.return_before = function () {
     window.history.go(-1);
  };
}

全局参数是通过webpack的global关键字来定义全局变量 在主入口引入即可：

global.apiURL = {
    baseurl: 'http://www.vue.com:8000/api',
};

题外话

很多人在使用npm的时候普遍都会出现下载慢和失败的情况，墙嘛，都懂得，一般情况下使用淘宝镜像是可以解决的（npm），但是笔者也遇到过npm下载的依赖不全的情况，这里也推荐大家使用个Shadowsocks,具体是啥自行百度吧

至此vue2.0+webpack 开发的基本配置也就完了，后期也会写写在开发中遇到的一些困难跟技巧，也欢迎大家留言探讨~