前提：
之前都只是小打小闹的自己做做小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 开发的基本配置也就完了，后期也会写写在开发中遇到的一些困难跟技巧，也欢迎大家留言探讨~
网友评论