这个简略的模板文件此时还不能满足理论的开发需要，接下来就是对其进行理论的革新以便于咱们开发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.js
export 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.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，就能够看到新增的几个页面了
- 在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
}
})
- 在src下新增mock，在咱们开发的时候能够用来模仿数据用，并新增src/mock/index.js文件，在外面增加两行代码：
import Mock from 'mockjs'
export default Mock
这里须要在我的项目里装置mockjs依赖，cmd执行如下命令：
cnpm/npm install mockjs -D // 此依赖只作为开发环境应用，所以后缀不是--save 而是-D，而且打包的时候这个依赖不会打包进去
OK，实现上述步骤，一个真正满足开发需要的vue我的项目框架曾经搭建实现，接下里的文章，我都会在这个框架之上修修补补，来搭建起一个性能更加丰盛的我的项目
发表回复