项目说明

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
2. https://github.com/jiananle/vue-multi-page
3. https://github.com/bluefox1688/vue-cli-multi-page
4. 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：权限管理