Aegis-ui-desktop NPM

aegis-ui-desktop

基于 Vue 的桌面端组件库 aegis-ui-desktop，扩展自ant-design-vue

安装

 npm install aegis-ui-desktop -S

使用

使用之前必须通过cdn引入ant-design-vue, ant-design-vue官方并未提供cdn，此cdn是公司的cdn

<link rel="stylesheet" href="https://public-file.aegis-info.com/ant-design-vue/1.3.9/antd.min.css">
<script src="https://public-file.aegis-info.com/ant-design-vue/1.3.9/antd.min.js"></script>
<script src="https://public-file.aegis-info.com/ant-design/icons/2.0.0/aut-design-icons.js"></script>

完整引入

import AegisUI from 'aegis-ui-desktop'
Vue.use(AegisUI)

按需引入

按需加载需要借助babel-plugin-import, 这样就可以只引入需要的组件，以减小项目体积

npm i babel-plugin-import -D

将babel.config.js修改为：

module.exports = {
  presets: ['@vue/app'],
  plugins: [
    [
      'import',
      {
        libraryName: 'aegis-ui-desktop',
        libraryDirectory: 'es',
        style: true
      },
      'aegis-ui-desktop'
    ]
  ]
};

引入组件

import { DAlert } from "aegis-ui-desktop";
@Component({
  components: {
    DAlert
  }
})

开发环境启动

npm run dev

创建组件

npm run create <name> <cn-name> <type>

name为组件名称，格式要求如下：
- 命名统一使用小写单词，多个单词之间以-分隔
- ui组件以ae-、d-、m-其中之一开头，ae-表示通用组件，d-表示pc端组件，m-表示移动端组件
- vue指令或工具类组件按实际作用命名
cn-name为组件的中文名称
type 可选ui（ui组件）、directive（vue指令）、tool（工具）