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

vue-element-admin初始化、项目配置和项目结构分析。
157阅读 · 0评论 · 2020-9-3 22:51发布

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 全局配置

共有0 条评论

暂无评论