第2講改造由vue-cli 3.x創(chuàng)建的模板項目

這個簡單的模板文件此時還不能滿足實際的開發(fā)需求仿野，接下來就是對其進(jìn)行實際的改造以便于我們開發(fā)vue項目，首先說明卡啰，下文中所有的修改基本上是在src這個主文件夾里進(jìn)行

在src里新增api文件夾静稻，項目里ajax請求都寫在這里面，以便于管理
在src/assets文件夾匈辱，新增img文件夾振湾，新增font文件夾
在src里新增directive文件夾，用來放vue的自定義指令
在src里新增lib文件夾亡脸，并且新增src/lib/util.js（存放一些與業(yè)務(wù)結(jié)合的工具方法）押搪，新增src/lib/tool.js（存放一些與業(yè)務(wù)無關(guān)的工具方法）

舉個簡單的例子

// util.js

// tool.js
/*
 * 將空數(shù)據(jù)顯示為--
 * @params val {all} 需要處理的值
 * @params unit {String} 單位
 * @return {String} 處理后的值
 * @author 宗強(qiáng) 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
    }
}

在某一個頁面使用這個函數(shù)

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

在src里新增config文件夾佛南，項目里的配置都可以寫在這里

舉個例子，比如項目里有很多地方嵌言，需要對電信，移動及穗，聯(lián)通摧茴，這三個運營商進(jìn)行顏色區(qū)別，那我就可以在config文件夾里新增color.js文件

// color.js
export default {
    '電信': 'red',
    '移動': 'yellow',
    '聯(lián)通': 'green'
}

在某一個頁面使用這個配置埂陆，只需要引入即可

import colorConfig from '@/config/color'

在src里新增errorpage文件夾苛白，當(dāng)出現(xiàn)路由出錯，服務(wù)器出錯焚虱，瀏覽器兼容等問題的時候购裙，能夠跳轉(zhuǎn)到相應(yīng)的頁面提示用戶

具體實現(xiàn)方法如下：在src/errorpage文件夾下新增4個文件

1. browser_check.vue // 瀏覽器兼容
2. extra_401_option.vue // 未登錄或登錄超時
3. extra_404_option.vue // 訪問的頁面未找到
4. extra_500_option.vue // 訪問接口出錯

具體這幾個頁面里的內(nèi)容，代碼已上傳至git鹃栽，可以直接找到src/errorpage這個文件夾查看vue-base-frame

現(xiàn)在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: '服務(wù)器異常'},
        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文件夾下新增幾個文件（關(guān)于vue的狀態(tài)管理夯到，我會單獨寫一篇文章放在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: {
  }
})

如果你的項目比較負(fù)載有可能需要對state進(jìn)行模塊化管理饮亏，這個時候就需要在src/store下新增module文件

舉個例子

在src/store/module下新增user.js文件耍贾，內(nèi)容如下：

// 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，在我們開發(fā)的時候可以用來模擬數(shù)據(jù)用路幸，并新增src/mock/index.js文件荐开，在里面添加兩行代碼：

import Mock from 'mockjs'


export default Mock

這里需要在項目里安裝mockjs依賴，cmd執(zhí)行如下命令：

cnpm/npm install mockjs -D // 此依賴只作為開發(fā)環(huán)境使用劝赔，所以后綴不是--save 而是-D誓焦，而且打包的時候這個依賴不會打包進(jìn)去

OK，完成上述步驟着帽，一個真正滿足開發(fā)需求的vue項目框架已經(jīng)搭建完成杂伟，接下里的文章，我都會在這個框架之上修修補(bǔ)補(bǔ)仍翰，來搭建起一個功能更加豐富的項目

第2講 改造由vue-cli 3.x創(chuàng)建的模板項目

第2講改造由vue-cli 3.x創(chuàng)建的模板項目