|
|
|
|
# 项目说明
|
|
|
|
|
1. 这是使用vue-cli建立的项目
|
|
|
|
|
2. 为了支持多页面，对vue-cli默认的配置文件进行了一些改动，目前是将单个页面的配置放置moudles.js里面
|
|
|
|
|
- 如果要添加新的页面，直接在moudles.js里面添加即可
|
|
|
|
|
- 如果要添加的页面很多，还是把moudles.js改为根据默认约定生成模块吧
|
|
|
|
|
3. UI使用的是adminlte
|
|
|
|
|
|
|
|
|
|
# 项目结构
|
|
|
|
|
|
|
|
|
|
## src/components
|
|
|
|
|
存放公共组件，每个组件一个文件夹，所有公共组件统一在components/index.js里面注册为全局组件
|
|
|
|
|
|
|
|
|
|
## src/utils
|
|
|
|
|
存放公共的utils方法
|
|
|
|
|
|
|
|
|
|
## src/vuex
|
|
|
|
|
存放store，store模块化，拆分到不同的模块下面
|
|
|
|
|
|
|
|
|
|
## src/router
|
|
|
|
|
存放路由，路由模块化，根据不同模板将路由放到不同的js里面
|
|
|
|
|
|
|
|
|
|
## src/view
|
|
|
|
|
存放业务相关组件，每个模块一个文件夹
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
# 开发
|
|
|
|
|
|
|
|
|
|
## 环境准备
|
|
|
|
|
|
|
|
|
|
1. 安装最新版NodeJS
|
|
|
|
|
2. 安装最新版npm
|
|
|
|
|
3. 进入vue-adminlte目录
|
|
|
|
|
|
|
|
|
|
## 运行项目
|
|
|
|
|
|
|
|
|
|
npm install
|
|
|
|
|
|
|
|
|
|
# 开发运行环境;运行命令后，浏览器自动打开http://localhost:8000
|
|
|
|
|
npm run dll
|
|
|
|
|
|
|
|
|
|
# 开发运行环境;运行命令后，浏览器自动打开http://localhost:8000
|
|
|
|
|
npm run dev
|
|
|
|
|
|
|
|
|
|
# 开发完成后打包命令，会生成dist文件夹，不要在本地打开，请安装类似http-server来运行
|
|
|
|
|
npm run build
|
|
|
|
|
|
|
|
|
|
## 其他
|
|
|
|
|
|
|
|
|
|
- 使用eslint语法规范JS代码
|
|
|
|
|
- 使用淘宝镜像加速npm
|
|
|
|
|
|
|
|
|
|
# 参考
|
|
|
|
|
|
|
|
|
|
1. [https://github.com/luchanan/vue2.0-multi-page](https://github.com/luchanan/vue2.0-multi-page)
|
|
|
|
|
2. [https://github.com/jiananle/vue-multi-page](https://github.com/jiananle/vue-multi-page)
|
|
|
|
|
3. [https://github.com/bluefox1688/vue-cli-multi-page](https://github.com/bluefox1688/vue-cli-multi-page)
|
|
|
|
|
4. [https://github.com/jarvan4dev/vue-multi-page](https://github.com/jarvan4dev/vue-multi-page)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
# 组件命名
|
|
|
|
|
1. 列表类：XXXXList，路由：/xxxx/list
|
|
|
|
|
2. 编辑类：XXXXEdit，路由：/xxxx/:id/edit，/xxxx/add
|
|
|
|
|
1. 如果需要编辑的信息很多，需要分组件，再单独建立一个edit文件夹，用来存放edit对应的组件
|
|
|
|
|
3. 查看类：XXXXView，路由：/xxxx/:id/view
|
|
|
|
|
1. 如果需要查看的信息很多，需要分组件，再单独建立一个view文件夹，用来存放view对应的组件
|
|
|
|
|
4. Modal：统一以Modal结尾。
|
|
|
|
|
选择类的以Select开头，添加类的以Add开头，修改类的以Edit开头
|
|
|
|
|
比如：SelectUserModal.vue，AddUserModal.vue，
|
|
|
|
|
1. 如果modal可能是个公用的，放到该业务模块的common文件夹下面。如果不是公用的，放在使用的地方即可。
|
|
|
|
|
|
|
|
|
|
前端 nodejs 可以装淘宝的镜像
|
|
|
|
|
npm install -g cnpm --registry=https://registry.npm.taobao.org
|
|
|
|
|
|
|
|
|
|
然后分别执行
|
|
|
|
|
cnpm install
|
|
|
|
|
npm run dll
|
|
|
|
|
npm run dev
|
|
|
|
|
|
|
|
|
|
# 项目结构
|
|
|
|
|
|——src
|
|
|
|
|
├── assets：主要包含一些图片、公共css、第三方js
|
|
|
|
|
├── common
|
|
|
|
|
│ ├── components: 公共组件
|
|
|
|
|
│ ├── install.js：注册全局组件、混入全局文件等
|
|
|
|
|
│ ├── mixins：混入文件
|
|
|
|
|
│ │ └── PiSearchM.js：PiSearch方法
|
|
|
|
|
│ └── utils：公共方法
|
|
|
|
|
└── module
|
|
|
|
|
├── frame：包含头部、左侧菜单、tab菜单、修改密码、个人资料、退出登录等
|
|
|
|
|
│ ├── App.vue
|
|
|
|
|
│ ├── assets
|
|
|
|
|
│ ├── components
|
|
|
|
|
│ ├── frame.html
|
|
|
|
|
│ ├── frame.js
|
|
|
|
|
│ ├── http：接口文件
|
|
|
|
|
│ ├── minxin
|
|
|
|
|
│ │ └── menu.js：菜单方法
|
|
|
|
|
│ ├── router：路由
|
|
|
|
|
│ ├── store：vuex
|
|
|
|
|
│ ├── utils
|
|
|
|
|
│ └── views
|
|
|
|
|
│ ├── Aboutme.vue：个人资料
|
|
|
|
|
│ ├── ChangeSKins.vue：换肤
|
|
|
|
|
│ ├── Home.vue：首页组件
|
|
|
|
|
│ ├── Index.vue：头部组件、左侧菜单组件、退出登录弹框、修改密码弹框
|
|
|
|
|
│ ├── MenuTree.vue
|
|
|
|
|
│ ├── SubSystem
|
|
|
|
|
│ │ ├── SubSystem.vue：tab菜单及iframe
|
|
|
|
|
│ │ └── table：首页是单体公司看板时，点击税盘余票、销项税额等显示不同子组件
|
|
|
|
|
│ │ ├── Bykpl.vue
|
|
|
|
|
│ │ ├── Byxxjje.vue
|
|
|
|
|
│ │ ├── Dkse.vue
|
|
|
|
|
│ │ ├── Jrrzfp.vue
|
|
|
|
|
│ │ ├── Jxfpje.vue
|
|
|
|
|
│ │ ├── Jxfpse.vue
|
|
|
|
|
│ │ ├── Qsfpje.vue
|
|
|
|
|
│ │ ├── Qsfpse.vue
|
|
|
|
|
│ │ ├── Rwsb.vue
|
|
|
|
|
│ │ ├── Sjse.vue
|
|
|
|
|
│ │ ├── Spyp.vue
|
|
|
|
|
│ │ ├── Wdyfp.vue
|
|
|
|
|
│ │ ├── Xxse.vue
|
|
|
|
|
│ │ ├── Ycswzb.vue
|
|
|
|
|
│ │ └── Yqwrz.vue
|
|
|
|
|
│ └── board
|
|
|
|
|
│ ├── multiBoard.vue
|
|
|
|
|
│ ├── singleBoard.vue
|
|
|
|
|
│ └── taxType：首页是多公司看板时，点击进项、销项、全税
|
|
|
|
|
│ ├── jinxiang.vue
|
|
|
|
|
│ ├── quanshui.vue
|
|
|
|
|
│ └── xiaoxiang.vue
|
|
|
|
|
├── index：权限管理、消息管理、菜单管理等页面
|
|
|
|
|
│ ├── App.vue
|
|
|
|
|
│ ├── components
|
|
|
|
|
│ ├── http：接口文件
|
|
|
|
|
│ ├── index.html
|
|
|
|
|
│ ├── index.js
|
|
|
|
|
│ ├── router：路由
|
|
|
|
|
│ ├── views
|
|
|
|
|
│ │ ├── AsideMenu：左侧菜单
|
|
|
|
|
│ │ │ └── AsideMenu.vue
|
|
|
|
|
│ │ ├── Examine
|
|
|
|
|
│ │ │ ├── Business：审批业务配置
|
|
|
|
|
│ │ │ ├── Examine.vue：审批管理父模块，只是提供router-view
|
|
|
|
|
│ │ │ └── Flow：审批流程配置
|
|
|
|
|
│ │ ├── HomeConfig
|
|
|
|
|
│ │ │ ├── HomeConfig.vue：统计项设置父模块，只是提供router-view
|
|
|
|
|
│ │ │ └── StatisticsProject：统计项设置
|
|
|
|
|
│ │ ├── Log
|
|
|
|
|
│ │ │ ├── Log.vue
|
|
|
|
|
│ │ │ └── LogQuery：日志查询
|
|
|
|
|
│ │ ├── MenuManagement
|
|
|
|
|
│ │ │ ├── MenuManagement.vue
|
|
|
|
|
│ │ │ └── Structure：菜单结构
|
|
|
|
|
│ │ ├── Message
|
|
|
|
|
│ │ │ ├── Message.vue
|
|
|
|
|
│ │ │ └── Notification：消息通知
|
|
|
|
|
│ │ ├── RightsManagement：权限管理
|
