内容提要:
vue-element-admin初始化、项目配置和项目结构分析。
vue-element-admin初始化
本文使用vue-element-admin作为基础,进行二次开发。
官方文档:https://panjiachen.github.io/vue-element-admin-site/zh/guide/
使用方法
克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git
进入项目目录安装依赖
cd vue-element-admin
npm install
# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org本地开发 启动项目
npm run dev
访问界面提示的网址,可以查看到如下页面。
项目精简
删除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 | 全局配置 |