├── .babelrc ├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── README.md ├── build ├── build.js ├── check-versions.js ├── logo.png ├── utils.js ├── vue-loader.conf.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── config ├── dev.env.js ├── index.js └── prod.env.js ├── index.html ├── package-lock.json ├── package.json ├── src ├── App.vue ├── assets │ └── logo.png ├── axios │ ├── api.js │ ├── fetch.js │ └── url.js ├── components │ ├── btnList │ │ └── btnList.vue │ ├── filterBox │ │ ├── batchAudit.vue │ │ ├── batchDelete.vue │ │ ├── batchDifferences.vue │ │ ├── batchStatement.vue │ │ └── batchUnAudit.vue │ ├── getWebSocket │ │ └── getWebSocket.vue │ ├── head │ │ └── head.vue │ ├── search │ │ └── Search.vue │ ├── sidebar │ │ └── sidebar.vue │ ├── tabs │ │ └── Tabs.vue │ ├── tags │ │ └── tags.vue │ ├── template │ │ ├── hzlDialog.vue │ │ ├── hzlInput.vue │ │ ├── hzlPage.vue │ │ ├── hzlSelect.vue │ │ ├── hzlTable.vue │ │ └── index.js │ └── templateOne.vue ├── i18n │ ├── index.js │ └── lan │ │ ├── en.js │ │ └── zh.js ├── images │ ├── captcha.png │ └── login-bg .png ├── main.js ├── page │ ├── chart │ │ └── chart.vue │ ├── home │ │ └── home.vue │ ├── inquiry │ │ ├── BankFlow.vue │ │ ├── OrderReceivable.vue │ │ ├── SystemStatement.vue │ │ ├── TransactionFlow.vue │ │ └── children │ │ │ ├── orderAdd.vue │ │ │ └── orderDetail.vue │ ├── login │ │ └── login.vue │ ├── reportForms │ │ ├── OrderSummary.vue │ │ └── ReceivablesBalance.vue │ ├── set │ │ ├── structure.vue │ │ └── updatePWD.vue │ ├── upload │ │ └── upload.vue │ ├── verifyPlatform │ │ ├── VerifyBankStatement.vue │ │ ├── VerifyReceivables.vue │ │ └── verifyAutomate.vue │ └── verifyRecord │ │ ├── VerifyBankStatementRecord.vue │ │ └── VerifyReceivablesRecord.vue ├── router │ └── index.js ├── store │ ├── index.js │ └── modules │ │ ├── actions.js │ │ ├── mutation-type.js │ │ └── mutations.js └── style │ └── main.css └── static ├── .gitkeep └── data ├── localData.json └── tableCols.json /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | /dist/ 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | #基于vue-cli构建的财务后台管理系统(`vue2`+`vuex`+`axios`+`vue-router`+`element-ui`+`echarts`+`websocket`+`vue-i18n`) 4 | 5 | [](https://github.com/996icu/996.ICU/blob/master/LICENSE)[](https://996.icu) 6 | 7 | 8 | ------- 9 | 10 | ### 本项目可以学到: 11 | 1、学会使用vue-cli2.0构建项目. 12 | 2、基于(pomise)封装axios的get、post等http请求. 13 | 3、学会使用vue-router实现页面跳转带参. 14 | 4、学会使用vuex状态管理. 15 | 5、配套element-ui(主要对table的操作多) 16 | 6、对elementui进行二次封装组件,提高复用性 17 | 7、略微涉及echarts作图标分析 18 | 8、使用websocket监听ele进度条状态 19 | 9、使用vue-i18n实现国际化--中英文切换 20 | 10、使用Ngprogress做加载,类似github loading bar 21 | 22 | 23 | #### 安装 24 | 25 | #### 项目地址: 26 | (`git clone`) 27 | 28 | ```shell 29 | git clone https://github.com/hzlshen/vue-project.git 30 | ``` 31 | 32 | #### 通过`npm`安装本地服务第三方依赖模块(需要已安装[Node.js](https://nodejs.org/)) 33 | 34 | ``` 35 | npm install 36 | ``` 37 | 38 | #### 启动服务(http://localhost:8080) 39 | 40 | ``` 41 | npm run dev 42 | ``` 43 | 44 | #### 发布代码 45 | ``` 46 | npm run build 47 | ``` 48 | 49 | #### 开发 50 | 51 | #### 目录结构 52 |
53 | . 54 | ├── README.md 55 | ├── build // 构建服务和webpack配置 56 | ├── config // 项目不同环境的配置 57 | ├── dist // 项目build目录 58 | ├── index.html // 项目入口文件 59 | ├── package.json // 项目配置文件 60 | ├── src // 生产目录 61 | │ ├── assets // css js 和图片资源 62 | │ ├── axios // ajax url 放置 63 | │ ├── components // 各种组件 64 | │ ├── images // 图片文件夹 65 | │ ├── i18n // 国际化文件夹 66 | │ ├── page // 各种页面 67 | │ ├── router // 页面路由 68 | │ ├── store // vuex状态管理器 69 | │ ├── style // 样式文件 70 | │ └── main.js // Webpack 预编译入口 71 |72 | 73 | 74 | ###项目截图 75 |
Tips:{{$t('h.tips')}}
38 |