移植vue-admin-element 到普通的项目中
遇到的问题
这个是将layout目录移植过来

将styles中的scss移植过来

将项目中的store移植过来

src目录中的setting和permission这个路由权限移植过来

这个是main.js 我是使用sdn引入vue和vue-router 和axios和vuex
就不要再import 引入vue和vue-router 要不然会报错 会有重复引入的问题

// import Vue from 'vue'// 全局样式  重置css样式表
import './styles/normalize.css'
// vue-admin-element 样式表
import './styles/index.scss'import App from './App.vue'
import router from './router'
import store from './store'
import  './permission'Vue.config.productionTip = false
// 禁用用户通过插件查看vuex数据
Vue.config.devtools = false
// 这个图片后期要换
const loadimage = require('./assets/common/loading.png')
const errorimage = require('./assets/common/logo.png')
// 图片懒加载
Vue.use(VueLazyload, {preLoad: 1.3,error: errorimage,loading: loadimage,attempt: 1
})new Vue({router,store,render: h => h(App)
}).$mount('#app')

这个是permission.js 路由权限文件 和vue-admin里的权限路由一样

import router from "./router/index.js";
import store from "./store/index.js";
const WHITE_LIST = ['/login','/404']
import { getToken } from '@/utils/auth' // get token from cookie// 使用cdn引入elementui 在js中使用message
// ELEMENT.Message.error('错误');router.beforeEach(async (to,from,next)=>{// 是否有token？const hasToken = getToken()// 有tokenif(hasToken){// 是否去登入页if(to.path === '/login'){// 放行next()}else{// 判断是否有角色const hasRoles = store.getters.roles && store.getters.roles.length > 0if(hasRoles){// 放行next()}else{// 没有角色try {// 获取角色信息const { roles } = await store.dispatch('user/getInfo')// 将角色信息传入这个方法 去返回符合角色的路由信息const accessRoutes = await store.dispatch('permission/generateRoutes', roles)// 将路由信息加入路由// addRoutes 这个是路由3.0 版本的 后面的版本废弃了这个方法 // 我本来用的是3.5的路由 用addRoute 传入 路由// 在router.push（） 跳转路由的时候会报错 要在push后面添加.catch((res)=>{})去捕获错误才行// 所以我就将路由降到了3.0版本 也是无奈啊！！！router.addRoutes(accessRoutes)// 我百度后 说是添加路由后 要等新的路由添加到路由生效后 再跳转 // 确保addRoutes()时动态添加的路由已经被完全加载上去// next({ ...to, replace: true })中的replace: true只是一个设置信息，告诉VUE本次操作后，不能通过浏览器后退按钮，返回前一个路由。next({ ...to, replace: true })} catch (error) {await store.dispatch('user/resetToken')next('/login')}}}}else{if(WHITE_LIST.indexOf(to.path) !== -1){next()}else{next('/login')}}})router.afterEach((to,from)=>{// to: 去的路由// from: 来的路由
}) 
export default WHITE_LIST

app.vue 最外的vue

这是vue.config.js 文件 打包时 去掉了vue vue-router等

const {defineConfig
} = require('@vue/cli-service')
// const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
// 需要排除的包，对象
let externals = {}// 判断是否是生产环境
const isProduction = process.env.NODE_ENV === 'production'
// 如果是生产环境，需要执行以下逻辑
if (isProduction) {externals = {/*** externals对象属性分析：* '包名'：'在项目中引入的名字'**/'axios': 'axios','element-ui': 'ELEMENT','vue': 'Vue','vue-router': 'VueRouter','vuex': 'Vuex'}}module.exports = defineConfig({publicPath: isProduction ? './' : '/',transpileDependencies: true,configureWebpack: {// 打包瘦身// 当为开发环境时，externals为空对象// 当为生产环境时，externals对象值为排除第三方包，达到瘦身目的externals: externals,resolve: {fallback: {path: require.resolve('path-browserify')}}		},css:{loaderOptions: {scss: {prependData: `@import "@/styles/common.scss";`}}},// configureWebpack: config => {// 	const plugins = []// 	plugins.push(new NodePolyfillPlugin())// }	// devServer: {//   // 设置代理请求//   proxy: {//     // 以 api开头//     '^/api': {//       // 设置代理地址 把基地址禁用//       target: ''//     }//   }// }
})

index.html文件 cdn 引入文件

favicon.ico">

scss中的文件
我这个项目中不知道为啥 #app{} 这个设置不上去 不生效
所以在sidebar.scss 中的把#app 这一层注释掉 就可以了

app这个尾巴的括号 别忘 去掉

：exprot{
xx:xx
}
这个是sass 导出变量 在vue页面中可以引入 就可以获取到变量
要抛出变量的话，文件名要改，要不然获取不到变量 文件名中间要加上module 如上图片

我用的是vue-cli4 创建的项目 用的sass 版本是

sass版本太高会报错 所以降低sass版本

项目里有的页面会用到path 例如 SidebarItem 页面
import path from ‘path’

需要下载 “path-browserify”: “^1.0.1”,

layout中的index.vue

这个就是 引入主体的四个组件的js  
default as AppMain  意思是 引入后重命名 为AppMain  这样在解构的时候 就可以获取到这个重命名的组件
export { default as AppMain } from './AppMain'
export { default as Navbar } from './Navbar'
export { default as Sidebar } from './Sidebar/index.vue'
export { default as TagsView } from './TagsView/index.vue'

navbar.vue

// 汉堡图片的组件没什么好说的 只有svg 要换的话 就直接改成图片

// 面包屑组件

AppMain.vue

ScrollPane.vue