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@1.26.8 -D 

npm i svg-sprite-loader@8.0.2 -D 

npm i svgo@6.0.11 -D

npm i svg-sprite-loader@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'

属性 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: '/',
    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 router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes:[...routes,...adminRoutes]
})

export default router

此时页面效果如下

步骤六

上图一级面包屑改造，打开文件 src\components\Breadcrumb\index.vue，修改 path 和 title 即可；

步骤七

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

改造后

 打开文件 src\layout\components\Navbar.vue，做如下修改

 步骤八

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

将原来的 -2 改为 -6

将原来的 19 改为 14

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

 效果