产品架构

• 字体为思源字体
  • SourceHanSansCN-Regular 正常字体
  • SourceHanSansCN-Medium 加粗字体
• 代码压缩 compression-webpack-plugin
• 配置文件 baseConfig.json 相关的基本配置数据
• 接口工具 利用Nswage工具依据swagger.json生成
• vue-kst-auth 封装的授权npm包
• vue-router
• vuex
• element-ui
• vue-property-decorator
• axios

目录结构

|—— public
    |—— font // 字体（思源字体）
    |—— baseConfig.json // 接本配置
    |—— favicon.ico
|—— src
    |—— assets
        |—— them // 主题文件（element-ui自定义主题）
    |—— plugins // 插件
    |—— router // 路由
    |—— store
        |—— baseData.ts // 基本数据
    |—— views
    | App.vue

封装成npm包提醒

• 封装组件使用element-ui需要在组件中引用并实例化，不然引用后报错

  1、按需使用
  import { Button, Select } from 'element-ui';
  Vue.use(Button)
  Vue.use(Select)
  [其他](https://element.eleme.cn/#/zh-CN/component/quickstart)
    
  2、全部使用
  import ElementUI from "element-ui";
  Vue.use(ElementUI)

封装Web Components

1、命令 vue-cli-service build --target wc --name my-element [entry]
注：如果需要添加对vue的内部依赖 在命令后加 --inline-vue
(详情)[https://cli.vuejs.org/zh/guide/build-targets.html#web-components-%E7%BB%84%E4%BB%B6]

公共数据介绍

引用数据：如
<img src="/publicData/images/logo.png">
转发服务器地址为：http://api.svc.htres.cn/
文件目录：
|--publicData
    |-- images
        |-- favicon.ico
        |-- logo.png
        |-- bg.png
        |-- 等
    |-- styles
        |-- theme
            |-- fonts
            |-- index.css
            |-- 等
    |-- 等

公用组件 web components

• 学习 web components
• 公共头部导航

代码：
<template>
  <div class="layout1">
    <!-- 头 -->
    <div class="layout-head">
      <div class="head_L">
        <a href="./" title="星环视界">
          <img src="/publicData/images/logo.png" alt="logo" />
        </a>
      </div>
      <div class="head_R">
        <!-- 导航列表 -->
        <slot name="navList"></slot>
      </div>
      <div class="head_end">
        <!-- 尾部内容 -->
        <slot name="handEnd"></slot>
      </div>
    </div>
  </div>
</template>

转发服务器地址为：http://api.svc.htres.cn/
项目中引入：如
<script src="/asset-model/components/xhkj-layout1.min.js"></script>

使用：
<xhkj-layout1>
    <div slot="navList">
    <router-link to="/model" exact>根模型</router-link>
    <router-link to="/equipment">运行模型</router-link>
    <router-link to="/asset">资产管理</router-link>
    <router-link to="/dataset">数据设置</router-link>
    <a href="/work-flow">作业流程</a>
    </div>
    <router-link slot="handEnd" to="/login">切换租户</router-link>
</xhkj-layout1>

安装最新vue-kst-auth包

yarn add vue-kst-auth

项目开始

yarn install

项目运行

yarn run serve

打包

yarn run build

Run your tests

yarn run test

Lints and fixes files

yarn run lint

Customize configuration

See Configuration Reference.