用Element-UI做了兩個后臺，時間長了有點視覺勞累，挑來挑去，入選了某東的AT-UI，搭建了一個雛形的后臺骨架，下面記錄一下使用方法（此時應附地址：官網傳送門）。愛掏網 - it200.com

本人是在vue2.0的基礎上搭建，所以，謹記：先搭建好初步的項目文件，再來看下面的介紹。愛掏網 - it200.com

安裝

npm install at-ui

npm install at-ui-style

是的，它需要安裝兩個，而Element只需要安裝一個，AT-UI的css依賴文件也需要安裝，
然后在main.js中引入就可以了。愛掏網 - it200.com

import AtComponents from 'at-ui'
import 'at-ui-style' // 引入組件樣式
Vue.use(AtComponents)
Vue.config.productionTip = false

它封裝的組件，嵌套不是很多，有的也是直接在原dom元素上直接添加class的方式，所以從控制臺也不難找到其樣式的。愛掏網 - it200.com

由于AT-UI只是基本封裝，比如，日期選擇器datePicker、樹形組件tree等就沒有，所以有的控件就需要自行安裝，推薦一個vue組件網站：vueExamples。愛掏網 - it200.com搭建時所需插件及使用方法，會在后面寫到。愛掏網 - it200.com

搭建及插件引入

頁面文件建好，本人習慣如下圖：

• view目錄以文件夾分類
• svg目錄放入svg圖標，圖標去阿里矢量庫、fontawesome等網站找就好了。愛掏網 - it200.com
• 模擬數據的話，圖方便，沒有裝mock，在static目錄下新建一個data.js，把json數據扔進去就好，記得export出來哦。愛掏網 - it200.com
• 路由的話，如果涉及到菜單的權限，最好還是用動態路由比較好。愛掏網 - it200.com

svg

安裝

npm i vue-svg-icon -D

引入

在main.js中引入vue-svg-icon。愛掏網 - it200.com

import Icon from 'vue-svg-icon/Icon.vue';
Vue.component('icon', Icon);

不用管為什么有個Icon.vue路徑，插件封裝的時候，通過它導出的。愛掏網 - it200.com
然后就是目錄圖中的svg文件夾了，注意它的位置，和assets并列，新建一個search.svg，
放入找好的svg代碼:

然后在使用的地方直接用就好了。愛掏網 - it200.com

jquery

從理論上講，vue框架理應不需要jquery的，但是為了處理某些特殊的地方，還是引一下吧（除非確實不需要）。愛掏網 - it200.com

安裝

cnpm install jquery -S

引入

• 修改 main.js

import $ from 'jquery'

• 修改webpack.base.conf.js

var webpack = require('webpack') //最上面并列添加

module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'jquery':'jquery' //添加該項
    }
  },
  plugins:[ //添加一個plugin是webpack.ProvidePlugin，寫到resolve并列的位置
    new webpack.ProvidePlugin({ 
      $: 'jquery',
      jquery: 'jquery'
    })
  ],
}

重啟

重啟之后，使用方法和原jquery一樣。愛掏網 - it200.com

less

安裝

npm i less less-loader --save
npm i sass-resources-loader

修改文件

//build/utils.js

function lessResourceLoader() { // 增加全局使用less函數
    var loaders = [
        cssLoader,
        'less-loader',
        {
            loader: 'sass-resources-loader',
            options: {
                resources: [
                path.resolve(__dirname, '../src/assets/css/common.less'), //定義全局變量的文件路徑
                ]
            }
        }
    ];
    if (options.extract) {
        return ExtractTextPlugin.extract({
            use: loaders,
            fallback: 'vue-style-loader'
        })
    } else {
        return ['vue-style-loader'].concat(loaders)
    }
}

return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    // less: generateLoaders('less'),//原配置
    less: lessResourceLoader(), //更改后的配置
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }

注意：lessResourceLoader()要和generateLoaders()同級！

重啟項目

然后就可以在src/assets/css/common.less文件里寫全局less了。愛掏網 - it200.com

datepicker

安裝

npm install vue-datepicker-local

使用

具體使用查看詳細文檔：github傳送門

開始

路由初始化

先給一個默認的路由配置：

import Vue from 'vue'
import Router from 'vue-router'
import login from '@/view/login/login.vue';
import notFound from '@/view/404/404.vue';
import layout from '@/view/layout/layout.vue';
Vue.use(Router)

const router = new Router({
    routes: [{
        path: '/login',
        name: '登錄',
        component: login,
    },{
        path: '/',
        name: '',
        component: layout,
        children:[{
            path:'404',
            name:'404',
            component:notFound
        }]
    }, {
      path: '*', 
      redirect: '/404'
    }]
})
export default router;

由于是使用動態路由，所以就需要動態引入的寫法：

1. 一般來說，后臺管理系統都是左側菜單控制路由跳轉，所以，src/components/新建一個leftSlider.vue
2. 引入的路由格式應該和router.js保持一致，也是下面的格式：

{
    path: '/',
    name: '',
    component: layout,
    children:[{
        path:跳轉路徑,
        name:路由名稱,
        component:組件
    }]
}

所以，模擬一個json數據使用就好，后期換成接口讀取就行了。愛掏網 - it200.com

左側菜單封裝如下：

這邊不想用jquery的，但是AT-UI有一個坑，就是opened屬性不可以動態展開收起，沒辦法，想要這個效果，所以用了jquery控制它的類名模擬這個效果。愛掏網 - it200.com

注意一點，路由引入只是數據引入，然而組件是需要引入文件而不是單純的數據的，
所以：src/utils新建lazyload.js和leftSliderRoute.js。愛掏網 - it200.com

//lazyload.js
export default (folder,name) => () => import(`@/view/${folder}/${name}.vue`)

//leftSliderRoute.js
import lazyload from './lazyload.js';
export default (routes, data) => {
    generaMenu(routes, data)
}
function generaMenu(routers, data) {
    if (data) {
        data.forEach((item) => {
            let menu = Object.assign({}, item);
            let folder = componentFromFolder(menu.component);
            menu.component = lazyload(folder, menu.component)
            if (item.children) {
                menu.children = []
                generaMenu(menu.children, item.children)
            }
            routers.push(menu)
        })
    }
}
function componentFromFolder(val) {
    switch (val) {
        case 'agentList':
        case 'agency':
        case 'agency2':
        case 'agency3':
            return 'agencyManage';

        case 'agentApply':
        case 'customList':
            return 'customManage';

        case 'financeOverview':
        case 'withdrawApply':
        case 'withdrawCancel':
        case 'withdrawSuccess':
            return 'financeManage';
        case 'home':
            return 'home';
        case 'layout':
            return 'layout'

    }
}

通過文件匹配文件夾，然后import進來組件就好。愛掏網 - it200.com記得在登錄的時候調用一下：

import leftSliderRoute from "@/utils/leftSliderRoute.js";
    var rou = [];
    export default {
        data() {
            return {
                username: '',
                password: '',
            }
        },
        methods: {
            login() {
                if (!this.username) {
                    this.$Message.error("請輸入賬號");
                    return;
                }
                if (!this.password) {
                    this.$Message.error("請輸入密碼");
                    return;
                }
                window.sessionStorage.setItem('routeList', JSON.stringify(routes));
                this.$store.commit('addRouteList',routes);//寫到vuex里
                leftSliderRoute(rou,routes);
                this.$router.addRoutes(rou);
                this.$router.push('/home');
                this.$Message.success('登錄成功');
            }
        }
    }

然后需要注意一點，路由是在登錄之后從vuex里拿的，但是用戶刷新頁面，不可能再讀取接口然后再塞進vuex里，所以得存到緩存中，防止用戶刷新，改造main.js：

import store from './store';
import leftSliderRoute from './utils/leftSliderRoute.js';
let routeList = JSON.parse(window.sessionStorage.getItem('routeList'));
if (routeList) {
    //這里是防止用戶手動刷新頁面，整個app要重新加載,動態新增的路由，會消失，所以我們重新add一次
    let routes = [];
    leftSliderRoute(routes, routeList);
    router.addRoutes(routes);
    store.commit('addRouteList', routes);
} else {
    router.push('/login');
}

至此，動態引入路由就完成了。愛掏網 - it200.com

面包屑導航

其實這個東西還是依賴路由那個data，因為要讀取children，還是內部的，要么改造數據，要么就老老實實寫：

//main.js
router.beforeEach((to, from, next) => {
    //面包屑導航開始
    let arr = [{
        name: '首頁',
        path: '/home'
    }];
    to.matched.map(item => {
        item.path != '/home' && item.path && arr.push({
            name: item.name,
            path: item.path
        })
    })
    store.commit('setBread', arr) //寫進vuex
    next()
    //導航結束
})

然后使用就好了。愛掏網 - it200.com

覆蓋樣式
很多時候框架內部的樣式不符合使用，所以需要這樣：
.operate {
    min-width: 100px;
    display: flex;
    align-items: center;
    /deep/ input {
        font-size: 13px;
        border: none;
        border-bottom: 1px solid #d9d9d9;
        border-radius: 0;
        margin: 0 8px;
    }
}
使用/deep/可以修改組件自帶樣式，但是一定要上一層一定要有class。愛掏網 - it200.com

清空表單
在有table的組件里，查詢是必不可少的，經常會有清空查詢條件的操作，有兩個方法：

• 通過JSON.parse(JSON.stringify(data))的格式
• 通過Object.assign({},data)的格式

兩個都是通過深拷貝，在created的時候賦值一個默認數據，作為備用，在清空的時候賦值就好了。愛掏網 - it200.com

要注意：每次賦值都應該是深拷貝。愛掏網 - it200.com

table

放出來一個組件，應該沒什么問題了。愛掏網 - it200.com

附加

1. 還是layout組件吧：

2. 添加了全屏效果，借鑒網上的。愛掏網 - it200.com

function fullScreen() {
    console.log(123)
    var el = document.documentElement;
    var rfs = el.requestFullScreen || el.webkitRequestFullScreen ||
        el.mozRequestFullScreen || el.msRequestFullScreen;
    if (typeof rfs != "undefined" && rfs) {
        rfs.call(el);
    } else if (typeof window.ActiveXObject != "undefined") {
        //for IE，這里其實就是模擬了按下鍵盤的F11，使瀏覽器全屏
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
            wscript.SendKeys("{F11}");
        }
    }
}

function exitFullScreen() {
    console.log(456)
    var el = document;
    var cfs = el.cancelFullScreen || el.webkitCancelFullScreen ||
        el.mozCancelFullScreen || el.exitFullScreen;
    if (typeof cfs != "undefined" && cfs) {
        cfs.call(el);
    } else if (typeof window.ActiveXObject != "undefined") {
        //for IE，這里和fullScreen相同，模擬按下F11鍵退出全屏
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript != null) {
            wscript.SendKeys("{F11}");
        }
    }
}

3. 如果你報錯Failed to mount component: template or render function not defined.
   不妨可以看看報錯指南

額外使用

1.常用過濾，用來前端搜索

searchInputEvent() {
    let result = this.searchInput ?
        this.querySearchArr.filter(item => {
            return (item.name.toLowerCase().indexOf(this.searchInput.toLowerCase()) > -1)
        }) : this.searchData;
    this.searchData = result;
}

結尾

差不多一個后臺也就這么多東西了，其他的就是按業務需求來改。愛掏網 - it200.com17年出的框架，但是18年也就更新了一次……