@cvb740
2019-05-10T09:58:49.000000Z
字数 5027
阅读 16615
vue-ui
admin-board（管理面板）是一套后台集成方案，集成了知识门户、调度与监控、元数据管理、数据质量管理、我的内容、后台管理等五个子系统。
它基于 vue 和 element-ui实现。使用了最新的前端技术栈，如vue、vue-router、vuex、element-ui、axios、es6、webpack、eslint、babel、sass等。参照了vue-element-admin的实现，通过nginx来部署代码、某些接口使用mock.js来进行模拟、接口文档利用koa、swagger和easy-mock来部署。
请先学习前置知识
你可以查看创建项目
git clone http://121.33.209.27:8000/summary/%E6%95%B0%E6%8D%AE%E7%AE%A1%E6%8E%A7%E5%B9%B3%E5%8F%B0%2Fadmin_board.gitcd admin_boardnpm inpm run dev
注：所有的git相关仓库都在数据管控平台下
（仓库名：swagger-interface）
信息门户和后台管理：
进入项目文件夹，运行
npm run prod
运行
npm run rollback:prod
即可自动回滚prod内网测试版
注意：回滚会交换前后两个版本的代码
sit:
http://139.196.73.235:60000
sit_better:
http://47.103.37.169:60000
进入项目文件夹，运行
npm run sit
即可自动打包并部署外网演示版
即可自动打包并部署内网测试版
运行
npm run rollback:sitnpm run rollback:sit_better
即可自动回滚sit或sit_better（会将对应服务器上的版本回滚成上一个版本）
├── build // webpack构建相关├── config // webpack打包的配置├── src // 主要的源代码│ ├── api // $api的诞生地，实现接口的模块化│ ├── assets // 项目依赖的静态资源如： 主题、字体、图片等静态资源│ ├── components // 可以自己导入使用的全局组件，其中Global下的所有组件会自动导入│ ├── directive // vue指令，如权限、可拖拽对话框，可以自己导入使用│ ├── filters // 会自动全部导入index.js的所有过滤器│ ├── icons // 项目所有 svg icons│ ├── init // 初始化，如$eventBus、errorLog、路由跳转的进度条和一些实验性功能│ ├── lang // i18n的国际化功能│ ├── layout // 全局 layout，包括菜单栏和头部│ ├── mixins // 你可以自己导入的mixins混入│ ├── mock // mock模拟数据│ ├── router // vue-router路由定义│ ├── settings // 页面中可配置的一些设置│ ├── store // vuex的定义│ ├── styles // 全局的样式，会自动导入variables.scss下的所有变量│ ├── utils // 全局公用的工具方法，包含数据转换和验证、以及请求的封装│ ├── vendor // 第三方插件、包含yfiles、echarts、前端导出excel和zip文件以及记录用户操作│ ├── views // 所有的view视图│ ├── App.vue // 入口页面│ ├── main.js // 入口文件 加载组件 初始化等├── static // 纯粹的静态文件 (会直接拷贝)│ ├── Tinymce // 富文本编辑器│ └── temp-page // 通过iframe加载的html├── task // 所有的npm任务├── zip // dist文件夹的压缩包，可以实现回退功能├── .babelrc // babel的配置├── .eslintrc.js // eslint的配置├── .posscssrc.js // postcss对css的处理配置，包括autoprefixer├── .travis.yml // CI的自动化配置├── .gitignore // gitignore文件├── favicon.ico // favicon.ico图标├── index.html // index.html页面模板└── package.json // package.json
以下是一些我已经写好的npm脚本（具体可以查看package.json，以下列出的有删减）
你可以直接 npm run task_name 来执行相关的任务
某些脚本需要你进入task的对应文件夹下去下载相关依赖
推荐使用vue ui的方式来执行脚本
"scripts": {// 运行开发版本"dev": "npm run dev:real",// 展示项目相关的一些链接和说明"show": "node task/show/index.js",// 打包并部署到外网的演示版"sit": "npm run build:sit&&npm run deploy:sit&&npm run deploy:sit_better",// 打包并部署到内网的测试版"prod": "npm run build:prod&&npm run deploy:prod",// =================上面的任务是较为常用的=================// 回滚外网演示版的sit版本"rollback:sit": "node task/deploy/rollback/sit.js",// 回滚外网演示版的sit_better版本"rollback:sit_better": "node task/deploy/rollback/sit_better.js",// 回滚内网测试版的prod版本"rollback:prod": "node task/deploy/rollback/prod.js",// 快速的从git远程仓库来拉取代码"git:pull": "node task/git/pull/index.js",// 快速的拉取并提交本地代码"git:push": "node task/git/push/index.js",// 启动一个node服务来预览打包好的dist/index.html页面"preview-page": "node task/preview-page/index.js",// 自动从iconfont来下载对应的最新iconfont包"download-iconfont": "node task/download/iconfont/index.js",// 利用eslint fix来校验代码"lint:fix": "eslint --ext .js,.vue src --fix","test": "npm run lint:fix",// 触发precommit的eslint校验"precommit": "lint-staged",// 优化对应的文件夹下的所有svg文件"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml","svgo:static": "svgo -r -f static/",},
更新依赖
npm install -g npm-check-updates
如：更新element-ui的package.json
ncu -u element-ui
然后下载这个包
npm install
以下是一些相关的项目或工具对应的git仓库介绍，你可以git clone对应的仓库来开发对应项目
git主仓库：
下面所有的git相关仓库都在数据管控平台下
仓库名：swagger-interface
用于搭建接口代理和接口文档的koa服务器，部署在http://192.168.1.235:4000/，具体的swagger接口文档在/public/data下，你可以改对应的接口文档并提交，之后运行deploy任务即可自动部署（需要你在服务器上配SSH公钥）或者你可以自己去到192.168.1.235的/home/data/server/swagger-interface下依次执行git pull、npm i、npm stop、npm start
git地址：
仓库名：info-app
用于信息门户的移动版，采用vant框架
git地址：
仓库名：operation-record
用于记录测试人员的测试过程并上报bug给前端人员
git地址：
仓库名：spider
基于think.js的node爬虫，用于某些财经、金融等新闻、舆论数据的爬取
git地址：
仓库名：global-cli
运行npm init后即可全局安装cv（快速生成view视图文件夹）等全局命令行
git地址：
仓库名： temporary
用于临时的一些测试或者展示demo
git地址：