这个简略的模板文件此时还不能满足理论的开发需要，接下来就是对其进行理论的革新以便于咱们开发vue我的项目，首先阐明，下文中所有的批改基本上是在src这个主文件夹里进行
- 在src里新增api文件夹，我的项目里ajax申请都写在这外面，以便于管理
- 在src/assets文件夹，新增img文件夹，新增font文件夹
- 在src里新增directive文件夹，用来放vue的自定义指令
- 在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'- 在src里新增config文件夹，我的项目里的配置都能够写在这里
举个例子，比方我的项目里有很多中央，须要对电信，挪动，联通，这三个运营商进行色彩区别，那我就能够在config文件夹里新增color.js文件
// color.jsexport default { '电信': 'red', '挪动': 'yellow', '联通': 'green'}在某一个页面应用这个配置，只须要引入即可
import colorConfig from '@/config/color'- 在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.jsexport 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.jsimport 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，就能够看到新增的几个页面了
- 在src/store文件夹下新增几个文件（对于vue的状态治理，我会独自写一篇文章放在vue实践外面讲，搞清楚vuex到低是什么以及怎么用）
state.jsmutations.jsactions.js而后在index.js外面引入这几个文件
// index.jsimport 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.jsconst 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 }})- 在src下新增mock，在咱们开发的时候能够用来模仿数据用，并新增src/mock/index.js文件，在外面增加两行代码：
import Mock from 'mockjs' export default Mock这里须要在我的项目里装置mockjs依赖，cmd执行如下命令：
cnpm/npm install mockjs -D // 此依赖只作为开发环境应用，所以后缀不是--save 而是-D，而且打包的时候这个依赖不会打包进去OK，实现上述步骤，一个真正满足开发需要的vue我的项目框架曾经搭建实现，接下里的文章，我都会在这个框架之上修修补补，来搭建起一个性能更加丰盛的我的项目