后台管理系统模板 预览
- 主界面包含: 登录页面;首页;用户管理(用户资产查询、用户日志查询、用户管理);系统管理(分组权限管理、APP版本管理、后台账号管理、权限分配、修改密码)。
- 主功能包含: 本地mock数据;登录跳转;导航栏菜单伸缩;表单校验中文提示;列表查询的常用布局;弹窗的父子组件传值;树组件、嵌套列表的使用。
.
├── README.md ------------------------ 说明文件
├── package.json --------------------- 项目配置
├── vue.config.js -------------------- webpack配置入口
├── public --------------------------- 入口文件
├── ├── favicon.ico ---------------- 网页图标
├── └── index.html ----------------- 入口页面
└── src ------------------------------ 源码目录
├── assets ----------------------- 项目资源文件目录(图片、字体等)
├── components ------------------- 业务模块集合目录(组件)
├── js ---------------------------- 全局变量
├── ├── fetch ------------------- 请求配置 (axios ajax配置管理文件)
├── ├── formatters -------------- 数据格式化配置
├── ├── mocks ------------------- 本地mock数据
├── └── veeValidate -------------- 表单校验配置
├── views ------------------------ 页面集合目录
├── App.less --------------------- 主样式
├── App.vue ---------------------- 主组件
├── main.js ---------------------- 项目级入口配置文件
└── router.js -------------------- 路由配置
# 推荐使用yarn管理依赖
npm i yarn -g
yarn config set registry htts://registry.npm.taobao.org
# 安装依赖
yarn install
# 启动本地调试
yarn dev
# 打包压缩
yarn build
# eslint格式校验
yarn lint
- vue-cli 项目脚手架
- vue js框架
- element-ui UI框架
- vue-router 路由管理器
- vee-validate 表单校验工具
- less CSS预处理语言
- eslint 代码规范的检查工具
- yarn 依赖管理工具
- webpack 模块打包工具
- 如果
vee-validate
在项目运行时报错,请重新安装旧版本,操作如下:
npm uninstall vee-validate
或yarn remove vee-validate
npm install [email protected]
或yarn add [email protected]
- 路由模式变更,操作如下:
- router.js -> 路由切换history模式去URL中的#号,
mode: 'history'
- vue.config.js -> 注释掉
baseUrl: process.env.NODE_ENV === 'production' ? './' : '/'
即可