这个简单的模板文件此时不能满足实际的开发需求。下一步就是实际修改它，这样我们就可以开发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/**将空数据显示为--*@paramsval{all}待处理的值*@paramsunit{String}Unit*@return{String}处理后的值*@author宗强2020/09/09*/exportfunctionhandleEmpty(val,unit){if(val!==0){if(typeofval==='undefined'||val===null||val===''||val==='null'||val==='--'){return'--'}}if(unit){returnval+unit}else{returnval}}使用这个函数import{handleEmpty}from'@/lib/tool'在某个页面添加一个新的config文件夹在src中，项目中的配置可以写在这里。比如，项目中有很多地方需要区分电信、移动、联通的颜色，那么我可以在config文件夹下新建一个color.js文件//color.jsexportdefault{'电信':'red','移动':'yellow','联通':'green'}某个页面要使用这个配置，只需要导入即可。importcolorConfigfrom'@/config/color'在src文件夹中添加一个错误页面文件，当出现路由错误、服务器错误、浏览器兼容性等问题时。当出现问题时，可以跳转到相应的页面提示用户。具体实现方法如下：在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.jsexportdefault[{path:'/compatible',name:'compatible',meta:{title:'compatible'},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:'异常',meta:{title:'服务器异常'},component:resolve=>require(['@/errorpage/extra_500_option.vue'],resolve),},]modifyrouter/index.js文件//router/index.jsimportVuefrom'vue'importVueRouterfrom'vue-router'importHomefrom'../views/Home.vue'importerrorRoutesfrom'./error-router'Vue.use(VueRouter)constroutes=[{path:'/',name:'Home',component:Home},{path:'/about',name:'About',component:()=>import(/*webpackChunkName:“about”*/'../views/About.vue')},...errorRoutes]constrouter=newVueRouter({routes})constwhitelist=['login','error401','error500','notFound','compatible','notLogin','404','abnormal']letapp;router.beforeEach((to,from,next)=>{//constisLogin=!!sessionStorage.getItem('accessToken');constisLogin=trueif(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)})exportdefaultrouter然后npmrunserve启动项目，在浏览器中输入启动地址，例如：http://localhost:4000/#/abnormal，可以看到几个新的页面在src/store文件夹下添加几个文件（关于vue的状态管理，我会单独写一篇文章放在vue的理论里，搞清楚vuex的低价值是什么，怎么用it)state.jsmutations.jsactions.js然后在index.js中导入这些文件//index.jsimportVuefrom'vue'importVuexfrom'vuex'importstatefrom'./state'importmutationsfrom'./mutations'importactionsfrom'./actions'Vue.use(Vuex)exportdefaultnewVuex.Store({state,mutations,actions,modules:{}})如果你的项目比较负载，可能需要以模块化的方式管理状态，这个时候需要在src/store下添加一个新的模块文件。比如在src/store/module下添加一个user.js文件，内容如下：//user.jsconststate={}constmutations={}constactions={}exportdefault{state,mutations,actions}然后在index.js中导入此文件importVuefrom'vue'importVuexfrom'vuex'./module/user'Vue.use(Vuex)exportdefaultnewVuex.Store({state,mutations,actions,modules:{user}})在src下添加一个mock，可以用来模拟我们开发时的数据，并添加一个新的src/mock/index.js文件，在里面添加两行代码：importMockfrom'mockjs'exportdefaultMockneedsbe这里在项目中安装mockjs依赖，cmd执行如下命令：cnpm/npminstallmockjs-D//这个依赖只作为开发环境使用，所以后缀不是--save而是-D，而这个打包时不会打包依赖OK完成以上步骤后，一个真正满足开发需求的vue项目框架就搭建完成了。在下一篇文章中，我将修补这个框架来构建一个功能更强大的项目
