【读书后台管理系统】—前端框架搭建（一）

【读书后台管理系统】—前端框架搭建（一）

一、项目初始化

注：该项目是基于vue-element-admin下进行的

git clone https://github.com/PanJiaChen/vue-element-admin
cd vue-element-admin
npm i
npm run dev
1
2
3
4

二、项目精简

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

• dashboard：首页
• error-page：异常页面
• login：登录
• redirect：重定向
• 对 src/router/index 进行相应修改
• 删除 src/router/modules 文件夹
• 删除 src/vendor 文件夹

三、项目配置

通过 src/settings.js 进行全局配置：

• title：站点标题
• showSettings：是否显示右侧悬浮配置按钮
• tagsView：是否显示页面标签功能条
• fixedHeader：是否将头部布局固定
• sidebarLogo：菜单栏中是否显示LOGO
• errorLog：默认显示错误日志的环境

四、项目结构

• api：接口请求
• assets：静态资源
• components：通用组件
• directive：自定义指令
• filters：自定义过滤器
• icons：图标组件
• layout：布局组件
• router：路由配置
• store：状态管理
• styles：自定义样式
• utils：通用工具方法
• auth.js：token 存取
• permission.js：权限检查
• request.js：axios 请求封装
• index.js：工具方法
• views：页面
• permission.js：登录认证和路由跳转
• settings.js：全局配置
• main.js：全局入口文件
• App.vue：全局入口组件