基于vue2.0的一个系统

前言

这是一个用vue做的单页面管理系统，这里只是介绍架子搭建思路

前端架构

沿用Vue全家桶系列开发，主要技术栈：vue2.x+vue-router+vuex+element-ui1.x+axios

工程目录

 

项目浅析

webpack打包配置

webpack的配置主要是vue-cli生成的，经过一些简化修改如下

webpack.config

const path = require('path');
const webpack = require('webpack');
const cssnext = require('postcss-cssnext');
const atImport = require('postcss-import');
const cssvariables = require('postcss-css-variables');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

const devSrc = 'http://localhost:8099/static/';
const devOutputPath = '../dist/static';
const prodSrc = './static/';
const prodOutputPath = '../dist/static';

const Util = require('./util')

const PATH_DIST = {
    font: 'font/',
    img: 'image/',
    css: 'css/',
    js: 'js/'
};
const isProduction = process.env.NODE_ENV === 'production';   //环境，dev、production
console.log('isProduction',isProduction)
const host = isProduction ? prodSrc : devSrc;
const outputPath = isProduction ? prodOutputPath : devOutputPath;
const extractElementUI = new ExtractTextPlugin(PATH_DIST.css + 'element.css' + (isProduction ? '?[contenthash:8]' : ''));
const extractCSS = new ExtractTextPlugin(PATH_DIST.css + 'app.css' + (isProduction ? '?[contenthash:8]' : ''));

module.exports = function (env) {
    let Config = {
        entry: {
            element: ['element-ui'],
            vue: ['vue', 'axios', 'vue-router', 'vuex'],
            app: './src/main.js'
        },
        output: {
            path: path.resolve(__dirname, outputPath),
            publicPath: host,
            filename: PATH_DIST.js + '[name].js' + (isProduction ? '?[chunkhash:8]' : '')
        },
        module: {
            rules: [
                {
                    test: /.vue$/,
                    loader: 'vue-loader',
                    options: {
                        loaders: {
                            scss:Util.generateSassResourceLoader(),
                            sass:Util.generateSassResourceLoader(),
                            css: extractCSS.extract({
                                use: 'css-loader!postcss-loader',
                                fallback: 'vue-style-loader'
                            })
                        }
                    }
                },
                {
                    test: function (path) {
                        if (/.css$/.test(path) && (/element-ui/).test(path)) {
                            return true;
                        } else {
                            return false;
                        }
                    },
                    loader: extractElementUI.extract({
                        use: 'css-loader!postcss-loader'
                    })
                },
                {
                    test: function (path) {
                        if (/.css$/.test(path) && !(/element-ui/).test(path)) {
                            return true;
                        } else {
                            return false;
                        }
                    },
                    loader: extractCSS.extract({
                        use: 'css-loader!postcss-loader'
                    })
                },
                {
                    test: /.js$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/
                },
                {
                    test: /.(woff|svg|eot|ttf)??.*$/,  //字体文件
                    loader: 'file-loader',
                    options: {
                        publicPath:'../font/',
                        outputPath:PATH_DIST.font,
                        name: '[name].[ext]'
                    }
                },
                {
                    test: /.(gif|jpg|png)??.*$/,  //图片
                    loader: 'file-loader',
                    options: {
                        name: PATH_DIST.img + '[name].[ext]'
                    }
                },
                {
                    test: /.scss$/,
                    use: Util.generateSassResourceLoader()
                },
                {
                    test: /.sass/,
                    use: Util.generateSassResourceLoader()
                },

            ]
        },
        plugins: [
            new webpack.optimize.CommonsChunkPlugin({
                name: ['element', 'vue']
            }),
            extractElementUI,
            extractCSS,
            new webpack.LoaderOptionsPlugin({
                options: {
                    postcss: function () {
                        return [atImport({
                            path: [path.resolve(__dirname, '../src')]
                        }), cssnext, cssvariables];
                    }
                },
                minimize: isProduction
            }),
            new HtmlWebpackPlugin({
                title: 'JD唯品会运营后台',
                template: 'index.html',
                filename: '../index.html',
                inject: false,
                chunks: ['element', 'vue', 'app']
            }),
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': isProduction ? '"production"' : '"development"'
            })
        ],
        performance: {
            hints: isProduction ? 'warning' : false
        },
        devtool: isProduction ? false : '#eval-source-map',
        resolve: {
            alias: {
                'src': path.resolve(__dirname, '../src'),
                'scss':path.resolve(__dirname,'../src/scss/'),
                'config':path.resolve(__dirname, '../src/config/'),
            }
        }
    };

    if (isProduction) {
        Config.plugins = Config.plugins.concat([
            new webpack.optimize.UglifyJsPlugin({
                sourceMap: true,
                compress: {
                    warnings: false
                }
            })
        ]);
    } else {
        Config.devServer = {
            historyApiFallback: true,
            publicPath: '/static/',
            disableHostCheck: true,
            noInfo: true,
            hot: true,
            host: 'localhost',
            port: 8099,
            watchOptions: {
                poll: false,
                ignored: ['node_modules/**', 'config/**', 'common/**', 'dist/**']
            },
            headers: {
                'Access-Control-Allow-Origin': '*'
            }
        };
    }
    return Config;
};

config用到的util

let path = require('path')
let ExtractTextPlugin = require('extract-text-webpack-plugin')
function resolveResouce(name) {
  let src  = path.resolve(__dirname, '../src/assets/' + name);
  return src;
}
let cssLoader = {
  loader: 'css-loader',
  options: {
    minimize: process.env.NODE_ENV === 'production',
    sourceMap: process.env.NODE_ENV !== 'production'
  }
}
exports.generateSassResourceLoader = function (options) {

  let loaders = [
    'css-loader',
    'postcss-loader',
    'sass-loader', {
      loader: 'sass-resources-loader',
      options: {
        // it need a absolute path
        resources: [resolveResouce('mixin.scss')]
      }
    }
  ];
  return ExtractTextPlugin.extract({
      use: loaders,
      fallback: 'vue-style-loader'
    })
}

 src文件夹下的confg放一些东西

ajax.js配置axios

import axios from 'axios'
import qs from 'qs'
import store from './../store'
import { Message } from 'element-ui'


function getCookie(name) {
    var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg)){
        return unescape(arr[2]);
    }
    else{
        return null;
    }
}

const X_CSRF_TOKEN = getCookie("pmsTp_token");

const service = axios.create({
  timeout: 30000,                  // 请求超时时间
})

service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded '; 

//请求拦截
service.interceptors.request.use((config) => {
  if (config.data&&config.data.noLoading) {
    delete config.data.noLoading;
  }else{    
    store.commit(STORE_TYPE.IS_LOADING,true);
  }
    //config.headers.X_CSRF_TOKEN  = X_CSRF_TOKEN
    //在发送请求之前做某件事
    if(config.method  === 'post'){
        config.data = qs.stringify(config.data);
    }
    return config;
},(error) =>{
     console.log("错误的传参", 'fail');
    return Promise.reject(error);
});
//返回拦截
service.interceptors.response.use((res) =>{
    store.commit(STORE_TYPE.IS_LOADING,false);
    if (res.data.code ==-300) {
      window.VM&&VM.$router.push({name:'redownload'});
      return Promise.reject(res);
    }
    //对响应数据做些事
    if(res.data.code<0){
      if (res.data&&res.data.msg) {
           Message({
            message: res.data.msg,
            type: 'error',
            showClose:true,
            duration: 5 * 1000
          })

        return Promise.reject(res);   
        }
    }
    return res;
}, (error) => {
    store.commit(STORE_TYPE.IS_LOADING,false);
    console.log("网络异常", 'fail');
    return Promise.reject(error);
});

export default service

directive.js 一些自定义指令（暂时只是权限控制）

let install = (Vue, options= {}) => {

    //权限指令
    Vue.directive("permission", {
        bind:  function(el, binding) {
            let permission = binding.value
            let btnCodeList = localStorage.getItem('btnCodeList') || [];  
            if (btnCodeList.indexOf(permission) < 0 ) {
                el.remove() 
            }
        } 
    });

}

export default {
    install
}

mixin.js 只是定义一些全局用的方法

let jqMixin = {
    methods: {
        goto(path) {
            if (path && typeof path === 'string') {
                if (/^//.test(path)) {
                    this.$router.push(path);
                } else {
                    this.$router.push([this.$route.fullPath, path].join('/'));
                }
            } else if (typeof path === 'number') {
                this.$router.go(path);
            }
        },
        logout(){
             window.location.href = window.location.protocol + '//' + window.location.host + '/' + "logout";
         },
        login(){
              window.location.reload();            
         },
        queryVauleByMap(map, value, returnKey = "name", key = "id") {
            for (var i = map.length - 1; i >= 0; i--) {
                if (map[i][key] == value) {
                    return map[i][returnKey]
                }
            }
        },
        formatDate(val, format) {
            if (!val) return '';
            let d;
            if (typeof val == 'number') {
                d = new Date(val);
            } else if (val instanceof Date) {
                d = val;
            }
            var o = {
                "m+": d.getMonth() + 1, //月份
                "d+": d.getDate(), //日
                "h+": d.getHours(), //小时
                "i+": d.getMinutes(), //分
                "s+": d.getSeconds(), //秒
                "q+": Math.floor((d.getMonth() + 3) / 3), //季度
                "S": d.getMilliseconds() //毫秒
            };
            if (/(y+)/.test(format))
                format = format.replace(RegExp.$1, (d.getFullYear() + "").substr(4 - RegExp.$1.length));
            for (var k in o)
                if (new RegExp("(" + k + ")").test(format))
                    format = format.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
            return format;
        },
        getStringfy(obj) {
            let str = '';
            for (let key in obj) {
                str += ('&' + key + '=' + obj[key]);
            }
            return str.substr(1);
        },
        copyObj(obj) {
            var o = {}
            for (var i in obj) {
                if (Object.prototype.toString.call(obj[i]) == '[object Object]' || Object.prototype.toString.call(obj[i]) == '[object Array]' ) {
                    o[i] = this.copyObj(obj[i]);
                }else{
                    o[i] = obj[i];
                }
            }
            return o;
        }, 
        handleSizeChange(val) {
            this.$store.commit(this.paramType,{
              pageIndex:1,
              pageSize:val,
            });
            this.$store.dispatch(this.queryType);
          },
        handleCurrentChange(val) {
              this.$store.commit(this.paramType,{
                pageIndex:val,
              });
              this.$store.dispatch(this.queryType);
          },
        clear() {
            for (let key in this.queryParam) {
                if (typeof this.queryParam[key] == "string") {
                    this.queryParam[key] = ""
                } else {
                    this.queryParam[key] = -1
                }
            }
        },
    },
}
let install = (Vue, options = {}) => {
    Vue.mixin(jqMixin);
};

export default {
    install
};

constant.js 一些定死的枚举值

const CONSTANT = {
    
}
export default CONSTANT

 src文件夹下的router放路由配置

structure.js 定义路由

const structure = [{
    path: '/index',
    name: 'index',
    // redirect: '/scheduleList', //默认重定向跳转配置，暂时不开启 
    title: '首页',
    icon: 'fa-home',
    component: require('./../page/index/index.vue'),
    children: []
},{
    path: '/redownload',
    name: 'redownload',
    // redirect: '/scheduleList', //默认重定向跳转配置，暂时不开启 
    title: '重新登录',
    icon: 'fa-home',
    component: require('./../page/redownload.vue'),
    children: []
}, {
    path: '',
    name: 'promotions',
    title: '促销活动',
    children: [{
        path: '/promotions/fullMinus',
        name: 'promotions/fullMinus',
        title: '满减促销活动',
        component: require('./../page/promotions/list.vue'),
        children: [{
            path: '/viewPromotions/fullMinus/:actId/:actNo',
            name: 'viewPromotions/fullMinus',
            title: '查看满减促销活动',
            component: require('./../page/promotions/view.vue')
        }]
    },{
        path: '/promotions/discount',
        name: 'promotions/discount',
        title: '折扣促销活动',
        component: require('./../page/promotions/list.vue'),
        children: [{
            path: '/viewPromotions/discount/:actId/:actNo',
            name: 'viewPromotions/discount',
            title: '查看折扣促销活动',
            component: require('./../page/promotions/view.vue')
        }]
    },{
        path: '/promotions/buyFree',
        name: 'promotions/buyFree',
        title: '买免促销活动',
        component: require('./../page/promotions/list.vue'),
        children: [{
            path: '/viewPromotions/buyFree/:actId/:actNo',
            name: 'viewPromotions/buyFree',
            title: '查看买免促销活动',
            component: require('./../page/promotions/view.vue')
        }]
    },{
        path: '/promotions/nOptional',
        name: 'promotions/nOptional',
        title: 'N元任选促销活动',
        component: require('./../page/promotions/list.vue'),
        children: [{
            path: '/viewPromotions/nOptional/:actId/:actNo',
            name: 'viewPromotions/nOptional',
            title: '查看N元任选促销活动',
            component: require('./../page/promotions/view.vue')
        }]
    },{
        path: '/promotions/syncAct',
        name: 'promotions/syncAct',
        title: '同步结果页',
        component: require('./../page/promotions/syncAct.vue'),
        children: []
    },{
        path: '/promotions/innerpro',
        name: 'promotions/innerpro',
        title: '内部工具页面',
        component: require('./../page/promotions/innerpro.vue'),
        children: []
    }]
}];
export default {
    structure: structure
};

受之前angular的配置影响，这里配置的children属性是基于业务逻辑下的子页面，并不是vue-router的children含义，因此需要遍历structure对象将路由配置全部提取出来

因此有个index.js

 index.js生成配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import structure from './structure.js';
import store from './../store';

Vue.use(VueRouter)
let getRoutes = ((items = [], fbreadcrumbs = []) => {
    let routes = [];
    let structureRoutes = [];
    items.forEach(item => {
        let route = {}
        let breadcrumbs = item.title ? fbreadcrumbs.concat({
            title: item.title,
            path: item.path,
        }) : fbreadcrumbs;
        if (item.path || item.path === '') {
            route.path = item.path;
            route.name = item.name;
            route.title = item.title;
            route.meta = {
                breadcrumbs: breadcrumbs,
            };
            if (item.component) {
                route.component = item.component;
            }
            if (item.redirect) {
                route.redirect = item.redirect;
            }
            if (item.children && item.children.length) {
                routes = routes.concat(getRoutes(item.children, breadcrumbs));
            }
            routes.push(route);
        } else {
            if (item.children && item.children.length) {
                routes = routes.concat(getRoutes(item.children, breadcrumbs));
            }
        }

    });
    return routes;
})

const router = new VueRouter()
router.afterEach(route => {
    store.commit(STORE_TYPE.COMMON_BREADCRUMBS_UPDATE, route.meta.breadcrumbs);
});
let routerData = getRoutes(structure.structure);
router.addRoutes(routerData)
export default {
    router: router
}

 src文件夹下的store放公共或者自己喜欢放的数据

type.js 一些行为的事件名字（很鸡肋）

let STORE_TYPE = {
    IS_LOADING: 'IS_LOADING',
    COMMON_PERMISSION: 'COMMON_PERMISSION',
    COMMON_BREADCRUMBS_UPDATE: 'COMMON_BREADCRUMBS_UPDATE',
    DEPT_LIST: 'DEPT_LIST',
    USER_INFO: 'USER_INFO',
    USER_CSRF_TOKEN: 'USER_CSRF_TOKEN',
    USER_PERMISSION: 'USER_PERMISSION',
    /*
        promotions
    */
    PROMOTIONS_DATA_INIT: 'PROMOTIONS_DATA_INIT',
    PROMOTIONS_PARAM: 'PROMOTIONS_PARAM',
    PROMOTIONS_PARAM_START: 'PROMOTIONS_PARAM_START',
    PROMOTIONS_CACHEPARAM: 'PROMOTIONS_CACHEPARAM',
    PROMOTIONS_LISTDATA: 'PROMOTIONS_LISTDATA',
    PROMOTIONS_REMOVE: 'PROMOTIONS_REMOVE',
    PROMOTIONS_ACTIVITYINFO: 'PROMOTIONS_ACTIVITYINFO',
    PROMOTIONS_GOODSINFO: 'PROMOTIONS_GOODSINFO',
    PROMOTIONS_GOODSPARAM: 'PROMOTIONS_GOODSPARAM',
    PROMOTIONS_SYNCSTATUS: 'PROMOTIONS_SYNCSTATUS',
    PROMOTIONS_SYNC: 'PROMOTIONS_SYNC',
    PROMOTIONS_BATCHSYNC: 'PROMOTIONS_BATCHSYNC',
    PROMOTIONS_SYNCACT: 'PROMOTIONS_SYNCACT',


};
if (window && !window.STORE_TYPE) {
    window.STORE_TYPE = STORE_TYPE;
}
export default {
    STORE_TYPE
};

index.js 暴露给外部的vuex对象

import Vue from 'vue'
import Vuex from 'vuex'
import './types'
import common from './modules/common'
import user from './modules/user'
import promotions from './modules/promotions'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    common,
    user,
    promotions,
  }
})

modules 放置各个vuex对象定义的文件夹

这儿只帖个common.js的定义吧

import axios from 'config/ajax.js'

const state = {
    isLoading: false,
    permission: {},
    dept_list:[],
    breadcrumbs: [],
}

const getters = {
}

const mutations = {
    [STORE_TYPE.COMMON_PERMISSION](state, data) {
        if (JSON.stringify(state.permission) == '{}') {
            state.permission = data;
        }
    },
    [STORE_TYPE.IS_LOADING](state, data) {
        state.isLoading = data;
    },
    [STORE_TYPE.DEPT_LIST](state, data) {
        state.dept_list = data;
    },
    [STORE_TYPE.COMMON_BREADCRUMBS_UPDATE](state, breadcrumbs) {
        state.breadcrumbs = breadcrumbs;
    },
}

const actions = {  
    [STORE_TYPE.COMMON_PERMISSION]({
        commit
    }) {
        return axios.get("/common/getUserPermissions").then(res => {
            if (res.data.data) {
                commit(STORE_TYPE.COMMON_PERMISSION, res.data.data);
                return res.data.data;
            }
        });
    },
  
    [STORE_TYPE.DEPT_LIST]({
        commit
    }) {
        return axios.get("/common/getDepartment").then(res => {
            if (res.data.data) {
                commit(STORE_TYPE.DEPT_LIST, res.data.data.children);
                return res.data.data.children;
            }
        });
    },
  
}

export default {
    state,
    getters,
    mutations,
    actions
}

全局vue对象模板 app.vue

<template>
  <div id="app">
      <div id="loading" v-show="isLoading">
          <i class="loading-icon fa fa-spinner fa-spin"></i>
      </div>
      <bread></bread>
      <router-view class="mainInfor__inner"></router-view>  
    </div>
</template>

<script>
import bread from './common/bread.vue'
export default {
  name: 'app',
  data() {
    return {
      
    }
  },
  computed: {
    isLoading() {
      return this.$store.state.common.isLoading
    }
  },
  mounted() {
    window.store = this.$store;
  },
  components:{
    bread
  }

}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
#loading{ 
  position: fixed;
   100%;
  height: 100%;
  z-index: 10000;
  top: 0;
  left: 0;
  .loading-icon{
    height: 100px;
     100px; 
    display: block;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    font-size: 80px;
    color: #0072c5;
    position: fixed;
  }
}
</style>

废话了这么多，下面就来生成vue对象吧

main.js如下

import Vue from 'vue'
import App from './App.vue'
import store from './store/index.js'
import router from './router/index.js'
import ElementUI from 'element-ui'


import jqMixin from './config/mixin.js'
import jqDirective from './config/directive.js'
import LazyRender from 'vue-lazy-render'
import './config/constant.js'
import './config/ajax.js'

import '../element-ui/index.css' //element-ui默认主题UI 
import '../font-awesome/css/font-awesome.min.css' //font-awesome字体插件： http://fontawesome.io/icons/
import './assets/ui.scss'
Vue.config.devtools = true;
Vue.config.productionTip = false;


Vue.use(ElementUI)
Vue.use(jqMixin)
Vue.use(jqDirective)
Vue.use(LazyRender)
localStorage.removeItem('newRoutePath');
localStorage.removeItem('oldRoutePath');
store.dispatch(STORE_TYPE.COMMON_PERMISSION).then((user) => {
    localStorage.setItem('btnCodeList', user.btnCodeList);
    window.VM = new Vue({
        el: '#app',
        store: store,
        router: router.router,
        render: h => h(App),
        watch:{
            $route:function (newVal,val) {
                localStorage.setItem('newRoutePath',newVal.path);
                localStorage.setItem('oldRoutePath',val.path);
            }
        }
    })
},(data)=>{
    window.VM = new Vue({
        el: '#app',
        store: store,
        router: router.router,
        render: h => h(App),
    })
    // VM.$router.push({name:'redownload'})

}).catch(e=>{
    console.log(e);
})

剩下的就是page文件夹放置各个页面的业务代码了，这儿就贴了

源码都在这https://github.com/houpeace/vueProject 喜欢就去看看吧，记得加星哟~