vue-element-template 框架嵌入 vue2.x 项目中

需求

在某个已开发的 vue2.x 项目中嵌入轻量级的后台管理框架

下载

注意 官网 提供了多个方案模板，我使用的是 基础模板 vue-admin-template

嵌入

下载 vue-admin-template 工程，注意我当时下载的是 v4.4.0。代码结构如下

步骤一：

1. 直接将红框文件拷贝到你的项目中；

2. 将 getters.js 文件中的信息拷贝到你的项目中；

步骤二

安装插件

npm i js-cookie

npm i normalize.css

npm i path-to-regexp@2.4.0

// 注意要指定版本号，版本太高会报错
npm i sass sass-loader@8.0.2 -D
  
npm i svg-sprite-loader@6.0.11 -D
  
npm i svgo@1.2.2 -D

步骤三

main.js 文件引入插件

import 'normalize.css/normalize.css' // A modern alternative to CSS resets
import '@/styles/index.scss' // global css
import '@/icons' // icon

步骤四

配置 vue.config.js 文件

chainWebpack: config => {
    // set svg-sprite-loader
    config.module
        .rule('svg')
        .exclude.add(resolve('src/icons'))
        .end()
    config.module
        .rule('icons')
        .test(/\.svg$/)
        .include.add(resolve('src/icons'))
        .end()
        .use('svg-sprite-loader')
        .loader('svg-sprite-loader')
        .options({
            symbolId: 'icon-[name]'
        })
        .end()
} 

 步骤五

路由配置，我在src/views 添加了如下几个页 

router/index.js 路由配置如下

注意要 ：

• import Layout from '@/layout'
• export 方法 resetRouter

属性 adminRoutes 里还有很多门门道道，需再详细研究~

import Vue from 'vue'
import VueRouter from 'vue-router'
import index from '../views/index.vue'
import Layout from '@/layout'
 
Vue.use(VueRouter)
 
const routes = [
{
path: '/',
name: 'index',
component: index
}
]
 
const adminRoutes = [
{
path: '/first',
component: Layout,
children: [{
path: '/first',
name: 'first',
component: () => import('@/views/admin/first/index'),
meta: { title: '首页', icon: 'dashboard' }
}]
},
{
path: '/example',
component: Layout,
redirect: '/table',
name: 'Example',
meta: { title: '示例', icon: 'el-icon-s-help' },
children: [
{
path: '/table',
name: 'Table',
component: () => import('@/views/admin/example/table/index'),
meta: { title: '表格', icon: 'table' }
},
{
path: '/tree',
name: 'Tree',
component: () => import('@/views/admin/example/tree/index'),
meta: { title: '目录树', icon: 'tree' }
}
]
},
{
path: '/',
component: Layout,
children: [
{
path: '/form',
name: 'Form',
component: () => import('@/views/admin/form/index'),
meta: { title: '表单', icon: 'form' }
}
]
}
]
 
 
const createRouter = () => new VueRouter({
scrollBehavior: () => ({ y: 0 }),
routes:[...routes,...adminRoutes]
})
 
const router = createRouter()
 
export function resetRouter() {
const newRouter = createRouter()
router.matcher = newRouter.matcher // reset router
}
 
export default router

此时页面效果如下

步骤六

上图一级面包屑改造，打开文件 src\components\Breadcrumb\index.vue，屏蔽方法中的3行，即可自动获取配置文字；

getBreadcrumb() {
  // only show routes with meta.title
  let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
  const first = matched[0]
 
  // if (!this.isDashboard(first)) {
  //   matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
  // }
 
  this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
},

步骤七

改造右上角返回列表，改造前

改造后

 打开文件 src\layout\components\Navbar.vue，做如下修改。屏蔽整个<el-dropdown/>，新增 <router-link/>

<template>
  <div class="navbar">
    <hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />

    <breadcrumb class="breadcrumb-container" />

    <div class="right-menu">
      <router-link to="/" class="avatar-container">返回首页</router-link>
      <!-- <el-dropdown class="avatar-container" trigger="click">
        <div class="avatar-wrapper">
          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
          <i class="el-icon-caret-bottom" />
        </div>
        <el-dropdown-menu slot="dropdown" class="user-dropdown">
          <router-link to="/">
            <el-dropdown-item>
              Home
            </el-dropdown-item>
          </router-link>
          <a target="_blank" href="https://github.com/PanJiaChen/vue-admin-template/">
            <el-dropdown-item>Github</el-dropdown-item>
          </a>
          <a target="_blank" href="https://panjiachen.github.io/vue-element-admin-site/#/">
            <el-dropdown-item>Docs</el-dropdown-item>
          </a>
          <el-dropdown-item divided @click.native="logout">
            <span style="display:block;">Log Out</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown> -->
    </div>
  </div>
</template>

 步骤八

1.细节调整，我的左侧有二级目录的图标有点偏移，不知是哪的css污染。文件 \src\styles\sidebar.scss 中：

将原来的 -2 改为 -6

将原来的 19 改为 14

2.细节调整，报如下错误。因为 router/index.js 路由页中配置 path 设置问题，key 会重复，改为 index。文件 src\layout\components\Sidebar

 效果

补充

基础模板 vue-admin-template 默认没有 tagsview，如需添加，可参考《基于 vue-element-template 框架添加 tagsview》

其它

1.左侧 el-menu 背景色和字体颜色被污染，可在 src\layout\components\Sidebar 中修改。

background-color="#304156"

text-color="#bfcbd9"

2.是否显示左侧栏的标题 

src\setting.js文件中 sidebarLogo 设为 true。

src\layout\components\Sidebar。屏蔽如下（最好将data.logo 设置为 ''）：

​​​​​​​

3.自动获取，路由都在views 中

let pages = [
    {
        name: '监测数据',
        path: 'monitor'
    },
    {
        name: '质量控制',
        path: 'quality',// 父节点的path文件可以不存在，但一定不能与子节点path重名
        children: [
            {
                name: '质控设置',
                path: 'qsetting'
            },
            {
                name: '质控数据',
                path: 'qdata'
            }
        ]
    },
    {
        name: '审核管理',
        path: 'examine',
        children: [
            {
                name: '一级审核',
                path: 'aclass'
            },
            {
                name: '二级审核',
                path: 'bclass'
            }
        ]
    },
]

自动获取方法：

function parseRoute(arr, adminType) {
    let newArr = arr.map(page => {
        let path = page.path;
        let children = [];
        if(page.children) {
            children = page.children.map(subPage => {
                let subPath = subPage.path;
                let subItem = {
                    path: `/${subPath}`,
                    name: subPath,
                    component: () => import(`@/views/${adminType}/${subPath}`),
                    meta: { title: subPage.name, icon: 'dashboard' }
                }
                return subItem;
            })
        }
        else {
            children = [{
                path: `/${path}`,
                name: path,
                component: () => import(`@/views/${adminType}/${path}`),
                meta: { title: page.name, icon: 'dashboard' }
            }]
        }
        let item = {
            path: `/${path}`,
            name: `${adminType}Page`,
            component: Layout,
            // 只有 1 个则不需要，> 1 需要设置 meta
            meta: children.length > 1 ? { title: page.name, icon: 'dashboard' } : null,
            children
        }
        return item;
    });
    return newArr;
}

使用

const adminRoutes = parseRoute(pages, 'admin');
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes: [
        ...routes,
        ...adminRoutes
    ]
})

效果