第2讲 改造由vue-cli 3.x创建的模板项目

这个简单的模板文件此时还不能满足实际的开发需求，接下来就是对其进行实际的改造以便于我们开发vue项目，首先说明，下文中所有的修改基本上是在src这个主文件夹里进行

1. 在src里新增api文件夹，项目里ajax请求都写在这里面，以便于管理
2. 在src/assets文件夹，新增img文件夹，新增font文件夹
3. 在src里新增directive文件夹，用来放vue的自定义指令
4. 在src里新增lib文件夹，并且新增src/lib/util.js（存放一些与业务结合的工具方法），新增src/lib/tool.js（存放一些与业务无关的工具方法）

举个简单的例子

// util.js

// tool.js
/*
 * 将空数据显示为--
 * @params val {all} 需要处理的值
 * @params unit {String} 单位
 * @return {String} 处理后的值
 * @author 宗强 2020/09/09
 */
export function handleEmpty (val, unit) {
    if (val !== 0) {
        if (typeof val === 'undefined' || val === null || val === '' || val === 'null' || val === '--') {
            return '--'
        }
    }
    if (unit) {
        return val + unit
    } else {
        return val
    }
}

在某一个页面使用这个函数

import { handleEmpty } from '@/lib/tool'

5. 在src里新增config文件夹，项目里的配置都可以写在这里

举个例子，比如项目里有很多地方，需要对电信，移动，联通，这三个运营商进行颜色区别，那我就可以在config文件夹里新增color.js文件

// color.js
export default {
    '电信': 'red',
    '移动': 'yellow',
    '联通': 'green'
}

在某一个页面使用这个配置，只需要引入即可

import colorConfig from '@/config/color'

6. 在src里新增errorpage文件夹，当出现路由出错，服务器出错，浏览器兼容等问题的时候，能够跳转到相应的页面提示用户

具体实现方法如下：在src/errorpage文件夹下新增4个文件

1. browser_check.vue // 浏览器兼容
2. extra_401_option.vue // 未登录或登录超时
3. extra_404_option.vue // 访问的页面未找到
4. extra_500_option.vue // 访问接口出错

具体这几个页面里的内容，代码已上传至git，可以直接找到src/errorpage这个文件夹查看vue-base-frame

现在4个页面有了，接下来就是配置这几个页面的路由了

找到项目里，src/router这个文件夹新增error-router.js文件，配置路由如下：

// router/error-router.js
export default [
    {
        path: '/compatible',
        name: 'compatible',
        meta: { title: '兼容'},
        component: resolve => require(['@/errorpage/browser_check.vue'], resolve),
    },
    {
        path: '/notLogin',
        name: 'notLogin',
        meta: { title: '未登录或超时'},
        component: resolve => require(['@/errorpage/extra_401_option.vue'], resolve),
    },
    {
        path: '/notFound',
        name: '404',
        meta: { title: '页面不存在'},
        component: resolve => require(['@/errorpage/extra_404_option.vue'], resolve),
    },
    {
        path: '/abnormal',
        name: 'abnormal',
        meta: { title: '服务器异常'},
        component: resolve => require(['@/errorpage/extra_500_option.vue'], resolve),
    },
]

修改router/index.js文件

// router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import errorRoutes from './error-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  ...errorRoutes
]

const router = new VueRouter({
  routes
})

const whitelist = ['login', 'error401', 'error500', 'notFound', 'compatible', 'notLogin', '404', 'abnormal']

let app;
router.beforeEach((to, from, next) => {
    // const isLogin = !!sessionStorage.getItem('accessToken');
    const isLogin = true

    if (isLogin) {
        if (to.name === 'login') {
            next({
                name: 'home'
            });
        } else {
            next()
        }
    } else {
        if (whitelist.indexOf(to.name) !== -1) {
            next()
        } else {
            next({
                name: 'login'
            })
        }
    }
});


router.afterEach((to, from, next) => {
    app = document.querySelector('.app-content-inner')
    app && app.scrollTo(0, 0)
})

export default router

然后npm run serve启动项目，浏览器输入启动地址，比如：http://localhost:4000/#/abnormal，就可以看到新增的几个页面了

7. 在src/store文件夹下新增几个文件（关于vue的状态管理，我会单独写一篇文章放在vue理论里面讲，搞清楚vuex到低是什么以及怎么用）

state.js
mutations.js
actions.js

然后在index.js里面引入这几个文件

// index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations,
  actions,
  modules: {
  }
})

如果你的项目比较负载有可能需要对state进行模块化管理，这个时候就需要在src/store下新增module文件

举个例子

在src/store/module下新增user.js文件，内容如下：

// user.js
const state = {}
const mutations = {}
const actions = {}

export default {
    state,
    mutations,
    actions
}

然后在index.js里面引入这个文件

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import user from './module/user'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations,
  actions,
  modules: {
    user
  }
})

8. 在src下新增mock，在我们开发的时候可以用来模拟数据用，并新增src/mock/index.js文件，在里面添加两行代码：

import Mock from 'mockjs'


export default Mock

这里需要在项目里安装mockjs依赖，cmd执行如下命令：

cnpm/npm install mockjs -D // 此依赖只作为开发环境使用，所以后缀不是--save 而是-D，而且打包的时候这个依赖不会打包进去

OK，完成上述步骤，一个真正满足开发需求的vue项目框架已经搭建完成，接下里的文章，我都会在这个框架之上修修补补，来搭建起一个功能更加丰富的项目