Vue+antd前端篇——项目构建+路由守卫+请求拦截+VUEX

前言

前几天和大家说要分享下前后端开发的经验，今天他来了！因为最近工作比较忙，内容也比较多需要分开几篇来讲，分享的内容不会有太深的理论东西，都是比较实用且简单易懂。作为第一篇分享先以前端开始，从项目创建到搭建基础架构，这块内容会比较多，所以会分开两篇或三篇，希望想学的朋友多些耐心哈，因为我也是抽时间一点点写，所以更新不会特别快，大概一周更新一到两篇吧，希望各位同学多多担待！

CODING...

第一步，我们首先需要安装下环境，具体就不阐述了，这里需要注意一个点就是构建项目时有个区别需要讲一下，大牛请忽略！

vue init 和 vue create的区别：

vue create 是vue-cli3.x的初始化方式，目前模板是固定的，模板选项可自由配置，创建出来的是vue-cli3的项目，与cue-cli2项目结构不同，配置方法不同，具体配置方法参考官方文档。vue init 是vue-cli2.x的初始化方式，可以使用github上面的一些模板来初始化项目，webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下，老项目的src目录覆盖3.x的src目录(如果修改了配置，可以查看文档，用cli3的方法进行配置)

我这里是构建的是cli2.x版本，所以项目中很多配置都是cil2.x的配置方式，请大家注意下！

第二步，构建完成后我们启动下项目（有问题请自行百度，这个比较基础了），先把没有用的东西给干掉，然后引入ant-design-vue框架，npm install ant-design-vue --save，然后引入样式文件，这里有问题的同学可以参考antd官网

这里说一下，我是做的全局引入，没有做按需加载，我尝试了做按需加载有些问题，官网上找不到解决方案，需要自行百度，大概是JavaScriptEnabled的问题，如果做按需加载项目建议大家基于cli3.x进行搭建！

第三步，引入antd测试下没有问题的话我们开始配置路由守卫，我这里设置了一个丐版的，高配版大家根据自己需求调整就好

// 设置路由守卫，全局页面title修改
router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = `VueDemo网站-${to.meta