乐趣区

关于javascript:第2讲-改造由vuecli-3x创建的模板项目

jiezi

这个简略的模板文件此时还不能满足理论的开发需要，接下来就是对其进行理论的革新以便于咱们开发 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'
  1. 在 src 里新增 config 文件夹，我的项目里的配置都能够写在这里

举个例子，比方我的项目里有很多中央，须要对电信，挪动，联通，这三个运营商进行色彩区别，那我就能够在 config 文件夹里新增 color.js 文件


// color.js

export default {

 '电信': 'red',

 '挪动': 'yellow',

 '联通': 'green'

}

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


import colorConfig from '@/config/color'
  1. 在 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，就能够看到新增的几个页面了

  1. 在 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}

})
  1. 在 src 下新增 mock，在咱们开发的时候能够用来模仿数据用，并新增 src/mock/index.js 文件，在外面增加两行代码：

import Mock from 'mockjs'

  
  

export default Mock

这里须要在我的项目里装置 mockjs 依赖，cmd 执行如下命令：


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

OK，实现上述步骤，一个真正满足开发需要的 vue 我的项目框架曾经搭建实现，接下里的文章，我都会在这个框架之上修修补补，来搭建起一个性能更加丰盛的我的项目

退出移动版