Vue+Vue-Router+ElementUI搭建前端脚手架

前言

在每次开发一个新项目的过程中我们都需要从零搭建一个前端脚手架，就这样周而复始，我们在每一次开发新项目时都会做重复工作。根据这种问题搭建了一个自己的前端脚手架，后续将会开发和整理出对应的TypeScript版本Vue+Vue-Router+ElementUI搭建前端脚手架

一、脚手架目录

二、路由配置

1、JSON路由树示例：

import BasicLayout from '@layout/BasicLayout.vue';

export const staticRouters = [
    {
        path: "/example",
        name: '使用案例',
        component: () => import('@pages/example/index.vue'),
    },
    {
        path: "hrm/UserManagement",
        name: '权限管理',
        component: () => import('@pages/hrm/UserManagement/index.vue'),
       
    },
    {
        path: "hrm/RoleManagement",
        name: '角色管理',
        component: () => import('@pages/hrm/RoleManagement/index.vue'),
    },
    {
        path: "hrm/RouterManagement",
        name: '路由配置',
        component: () => import('@pages/hrm/RouterManagement/index.vue'),
    },
    
    { path: '/', exact: true, redirect: '/template' },
    { path: '*', exact: true, redirect: '/exception' }
]
const getRouters =[
    {
        path: "/login",
        hidden: true,//导航菜单忽略选项
        component: () => import('@pages/login/index.vue'),
    },
    {
        path: '/exception',
        hidden: true,//导航菜单忽略选项
        component: () => import("@components/common-unit/comm_error/comm_error.vue"),
    },
    {
        path: '/',
        component: BasicLayout,
        children: [
            ...staticRouters
        ]
    },
]
export default getRouters;

2、根据JSON路由树无限极遍历左边菜单导航栏

//MenuItem.vue，复制如下代码
<template>
  <div>
    <template v-for="navMenu in navMenus">
      <!-- 最后一级菜单 -->
      <el-menu-item v-if="!navMenu.children && navMenu" :key="navMenu.path"  :route="{path:navMenu.path}" :index="navMenu.name" @click="goto(navMenu.path)">
        <i :class="navMenu.icon"></i>
        <span slot="title">{{ $t(navMenu.name) }}</span>
      </el-menu-item>
      <!-- 此菜单下还有子菜单 -->
      <el-submenu v-if="navMenu.children && navMenu" :key="navMenu.path"  :route="{path:navMenu.path}" :index="navMenu.name" @click="goto(navMenu.path)">
        <div slot="title">
          <i :class="navMenu.icon"></i>
          <span>{{ $t(navMenu.name) }}</span>
        </div>
        <!-- 递归 -->
        <NavMenu :navMenus="navMenu.children"></NavMenu>
      </el-submenu>
    </template>
  </div>
</template>

<script>
export default {
  name: 'NavMenu',
  props: ['navMenus'],
  data() {
    return {
      defIconCls: "fa-circle-o",
    }
  },
  methods: {
    goto(path){
      this.$router.push(path)
    },
	},
}
</script>

<style lang="less" scoped>

</style>

//comm_menu.vue引入并使用封装的MenuItem.vue
<template>
  <el-menu mode="vertical" unique-opened :default-active="$route.name">
    <menu-item :navMenus="routerLists"></menu-item>
  </el-menu>
</template>

<script>
import MenuItem from './MenuItem.vue'
import { staticRouters } from "@router/menu"
export default {
  props: {
    isCollapse: {
      default: true
    },
  },
  components: {
    MenuItem
  },
  data() {
    return {
      routerLists: [],
    }
  },
  mounted() {
    this.allRouters()
  },
  methods: {
    allRouters() {
      this.routerLists = staticRouters
    },
  },

}
</script>

三、多语配置

1、创建对应的多语文件，例如：en.json、zh-cn.json和zh-hk.json，并文件中编写对应的多语，具体如下所示：

2、将多语文件引入并配置多语：

import Vue from 'vue';
import VueI18n from 'vue-i18n';
// 引入各个语言配置文件
import translation_en from "@locales/language/en.json";
import translation_zh from "@locales/language/zh-cn.json";
import translation_hk from "@locales/language/zh-hk.json";
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang导入Element的语言包 英文
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang g导入Element的语言包 中文
import elementHkLocale from 'element-ui/lib/locale/lang/zh-TW'// element-ui lang g导入Element的语言包 中文

Vue.use(VueI18n);

const messages = {
  en: {
    ...translation_en,
    ...elementEnLocale
  },
  zh: {
    ...translation_zh,
    ...elementZhLocale,
  },
  hk: {
    ...translation_hk,
    ...elementHkLocale
  },

}

// 创建vue-i18n实例i18n
const i18n = new VueI18n({
  locale: localStorage.getItem('language') || 'zh', // 设置语种
  messages, // 设置全局当地语言包,
})
// 暴露i18n
export default i18n;

四、路由集成和多语组装

import Vue from 'vue'
import App from './App.vue'
import router from './router/index';
import  store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import dataV from '@jiaminghi/data-view'
import i18n from '@locales/index'
import './utils/pxrem'
import VueCookies from 'vue-cookies'
import { comm_websocket } from '@components/common-unit/common.js'

Vue.use(VueCookies)
Vue.use(dataV)
// 对服务端进行websocket连接
comm_websocket.getInstance().WS_Connect()
// 将SocketServicek类挂载到vue原型对象上，方便组件调用类中的函数
// 组件用this.$socket
Vue.prototype.$socket = comm_websocket.getInstance()
Vue.config.productionTip = false
Vue.use(ElementUI);

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

结尾

至此，整个搭建流程就此完毕，说的比较模糊，大家可以去看下源码，还有很多可以探讨的问题，欢迎大家留言。