vue element admin 二次开发_基于vueelementadmin二次开发初始化

内容提要：

• vue-element-admin初始化、项目配置和项目结构分析。

vue-element-admin初始化

本文使用vue-element-admin作为基础，进行二次开发。

官方文档：https://panjiachen.github.io/vue-element-admin-site/zh/guide/

使用方法

1. 克隆项目

   git clone https://github.com/PanJiaChen/vue-element-admin.git
   

2. 进入项目目录安装依赖

   cd vue-element-admin
   npm install
   # 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
   npm install --registry=https://registry.npm.taobao.org
   

3. 本地开发 启动项目

   npm run dev
   

4. 访问界面提示的网址，可以查看到如下页面。

    

项目精简

• 删除src/views下的源码，保留：

  • dashboard：首页

  • error-page：异常页面

  • login：登录

  • redirect：重定向

• 对src/router/index 进行相应修改

  • 删除modules文件夹

  • 删除index.js中modules的引入

  • 与保留内容无关的路由删除

• 删除 src/vendor 文件夹

项目配置

可以修改项目src/settings.js中的配置信息，配置功能如下。

属性	说明
title	站点标题
showSettings	是否显示右侧悬浮配置按钮
tagsView	是否显示页面标签功能条
fixedHeader	是否将头部布局固定
sidebarLogo	菜单栏中是否显示LOGO
errorLog	默认显示错误日志的环境，['production', 'development']

如果需要直接在浏览器中对源码进行调试，可以修改vue.config.js文件。

# true表示开启显示可以阅读的源码
productionSourceMap: true,

项目结构分析

项目目录含义

项目	说明
src/api	接口
src/asserts	静态文件
src/components	通用的组件
src/directive	自定义指令
src/filter	自定义过滤器
src/icons	图标组件，用于展示图标
src/layout	全局框架组件
src/router	组件的路由配置
src/store	vuex
src/styles	全局样式文件
src/utls	工具类
src/views	页面组件
App.vue	全局唯一组件
main.js	全局入口文件
permission.js	登录校验和登录后跳转
settings.js	全局配置