README-KAOS-manager

---

项目简介

该部分主要是用户对于KAOS建模的文档管理端，可以查看并修改用户所创建的所有需求文档模型。采用vue.js，是一套构建用户界面的渐进式框架。比较简洁，用于解耦、可复用的组件来构造界面。轻量级，无依赖。

项目构建方法

环境配置

首先要安装好nodejs和npm

• 安装node.js，node.js安装包及源代码下载地址: https://nodejs.org/en/download/
• 安装npm，由于新版的node.js已经集成了npm，所以npm也一并安装好了，可以输入npm -v和node -v来进行测试是否安装成功。
• npm升级命令:npm install npm -g
• 使用淘宝定制的cnpm命令行工具代替默认的npm ​ npm install -g cnpm --registry=https://registry.npm.taobao.org 如果权限不够则用管理员身份运行cmd
• 安装vue-cli，vue-cli是vue的脚手框架。npm install -g vue-cli
• 测试是否安装成功：vue -V

项目导入

• 从github上获取项目，导入idea
• 配置idea

File - Settings - Languages&Frameworks - JavaScript：修改JavaScript language version为ECMAScript 6，确认 File - Settings - Plugins：搜索vue，安装Vue.js

• 安装依赖：npm install，项目文件中，会多出一个node_modules文件夹
• 运行项目：npm run dev，将会自动在浏览器打开页面，如未正常打开，请访问完整的路径http:// localhost:8091/views/home/list.html
• 端口联系：\static\api.config.js文件中，API_BASE_URL为画图端地址，SERVICE_API_URL为后端地址。可根据需要修改。

项目在docker打包方法

在项目目录下运行docker build -t kaos-management .

目录结构

webpack
|-- build                            // 项目构建(webpack)相关代码
    |-- build.js                     // 生产环境构建代码
    |-- check-version.js             // 检查node、npm等版本
    |-- utils.js                     // 构建工具相关
    |-- vue-loader.conf.js           // webpack loader配置
    |-- webpack.base.conf.js         // webpack基础配置
    |-- webpack.dev.conf.js          // webpack开发环境配置,构建开发本地服务器
    |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
    |-- dev.env.js                   // 开发环境变量
    |-- index.js                     // 项目一些配置变量
    |-- prod.env.js                  // 生产环境变量
 |---src
    |---assets                          // 资源
         |---css/common.css  #css
         |---font/                       // 字体图标
         |---js/common.js                // 自己定义的全局通用事件
         |---js/conf.js                  // 项目的配置
         |---js/Lib.js                   // 暴露接口给组件调用
         |---js/vueFilter.js             // 注册vue的全局过滤器	
    |---components                      // 组件
         |---HbHead.vue                  // head组件
    |---views                            // 各个页面模块，模块名可以自定义
         |---home    #一级目录
             |---list    #二级目录
                 |---list.html
                 |---list.js
                 |---listApp.vue
         |---vuxDemo    #一级目录
             |---button    #二级目录
                 |---button.html
                 |---button.js
                 |---buttonApp.vue	
             |---calendar    #二级目录
                 |---calendar.html
                 |---calendar.js
                 |---calendarApp.vue		 
......