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（工具）

自动生成文档

npm run docs

代码检查

npm run lint

生产环境打包

npm run build

用于部署，如果发布到npm仓库则不需要执行

打包全量文件

npm run build:components

删除组件

npm run remove <name>

• name：要删除的组件名称

发布到npm仓库

npm run publish