forked from github/dataease
129 lines
3.8 KiB
Markdown
129 lines
3.8 KiB
Markdown
# 项目说明
|
||
|
||
> 这是一个极简的 vue admin 管理后台，基于vue-admin-template进行了细节改造，主要是把侧边导航改造为了顶部和侧边两个导航。
|
||
>
|
||
> 本项目默认开启了css：sourceMap和devtool('source-map')，便于在开发中调试，除非编译速度过慢，否则开发环境不建议修改。
|
||
|
||
## IDE
|
||
|
||
编辑器建议使用VS Code，格式化时可以统一代码风格，配置项建议统一设置为默认不自动保存，手动保存后自动修复部分错误。具体参数如下：
|
||
|
||
```js
|
||
{
|
||
"emmet.triggerExpansionOnTab": true,
|
||
"files.autoSave": "off",
|
||
"vetur.format.defaultFormatterOptions": {
|
||
"js-beautify-html": {
|
||
"wrap_attributes": "force-aligned"
|
||
},
|
||
"prettyhtml": {
|
||
"printWidth": 100,
|
||
"singleQuote": false,
|
||
"wrapAttributes": false,
|
||
"sortAttributes": true
|
||
},
|
||
"prettier": {
|
||
"semi": false,
|
||
"singleQuote": true
|
||
}
|
||
},
|
||
"eslint.run": "onSave",
|
||
"editor.codeActionsOnSave": {
|
||
"source.fixAll.eslint": true
|
||
}
|
||
}
|
||
```
|
||
|
||
|
||
## 目录结构
|
||
|
||
```bash
|
||
├── build # 构建相关
|
||
├── mock # 项目mock 模拟数据
|
||
├── public # 静态资源
|
||
│ │── favicon.ico # favicon图标
|
||
│ └── index.html # html模板
|
||
├── src # 源代码
|
||
│ ├── api # 所有请求
|
||
│ ├── assets # 主题 字体等静态资源
|
||
│ ├── components # 全局公用组件
|
||
│ ├── directive # 全局指令
|
||
│ ├── filters # 全局 filter
|
||
│ ├── icons # 项目所有 svg icons
|
||
│ ├── lang # 国际化 language
|
||
│ ├── layout # 全局 layout
|
||
│ ├── router # 路由
|
||
│ ├── store # 全局 store管理
|
||
│ ├── styles # 全局样式
|
||
│ ├── utils # 全局公用方法
|
||
│ ├── vendor # 公用vendor
|
||
│ ├── views # views 所有页面
|
||
│ ├── App.vue # 入口页面
|
||
│ ├── main.js # 入口文件 加载组件 初始化等
|
||
│ └── permission.js # 权限管理
|
||
├── tests # 测试
|
||
├── .env.xxx # 环境变量配置
|
||
├── .eslintrc.js # eslint 配置项
|
||
├── .babelrc # babel-loader 配置
|
||
├── .travis.yml # 自动化CI配置
|
||
├── vue.config.js # vue-cli 配置
|
||
├── postcss.config.js # postcss 配置
|
||
└── package.json # package.json
|
||
```
|
||
|
||
|
||
|
||
## 构建步骤
|
||
|
||
```bash
|
||
# 克隆项目
|
||
git clone 项目地址
|
||
|
||
# 进入项目目录
|
||
cd admin-web
|
||
|
||
# 安装依赖
|
||
npm install
|
||
|
||
# 建议不要直接使用 cnpm 安装依赖，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
|
||
npm install --registry=https://registry.npm.taobao.org
|
||
|
||
# 启动服务
|
||
npm run dev
|
||
```
|
||
|
||
浏览器访问 [http://localhost:9528](http://localhost:9528)
|
||
|
||
## 发布
|
||
|
||
```bash
|
||
# 构建测试环境
|
||
npm run build:stage
|
||
|
||
# 构建生产环境
|
||
npm run build:prod
|
||
```
|
||
|
||
## 其它
|
||
|
||
```bash
|
||
# 预览发布环境效果
|
||
npm run preview
|
||
|
||
# 预览发布环境效果 + 静态资源分析
|
||
npm run preview -- --report
|
||
|
||
# 代码格式检查
|
||
npm run lint
|
||
|
||
# 代码格式检查并自动修复
|
||
npm run lint -- --fix
|
||
```
|
||
|
||
更多信息请参考花裤衩大佬的vue-element-admin [使用文档](https://panjiachen.github.io/vue-element-admin-site/zh/)
|
||
|
||
[线上地址](http://panjiachen.github.io/vue-admin-template)
|
||
|
||
[国内访问](https://panjiachen.gitee.io/vue-admin-template)
|
||
|