acc-south-aviation-components

快速上手

如何在项目中快速使用 acc-south-aviation-components.

开发依赖

• vue-cli@3 配置参考文档
  • 项目脚手架生成工具
• webpack 配置参考文档
  • 文件打包配置
• docsify 开发文档
  • 文档工具
• ESlint: acc-eslint-config-vue
  • 代码规范限制
• socket.io 开发文档
  • 文档上载依赖
• elementUI 依赖文档

脚本命令

通过脚本进行项目开发/打包/上传/

"serve": "vue-cli-service serve" // example 开发
"build": "vue-cli-service build", // example 打包
"doc": "webpack && docsify serve ./docs", // doc 开发
"deploy": "webpack && node examples/assets/js/deploy.js", // doc 打包并发布
"init": "npm install --registry http://registry.npmjs.org", // 项目依赖安装
"pub": "npm publish --registry http://registry.npmjs.org" // components 发包

引入使用

组件库的使用分为全量引用以及按需加载.

组件库加载

1. npm install acc-south-aviation-components --save --registry http://registry.npmjs.org
2. npm install --registry http://registry.npmjs.org

全量引入

import Vue from 'vue';
import accUI from 'acc-south-aviation-components';
import App from './App.vue';

Vue.use(accUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

按需引入

我们可以只引入需要的组件，以达到减小项目体积的目的。

import Vue from 'vue';
import { dialog, comAccCascader } from 'acc-south-aviation-components';
import App from './App.vue';

Vue.use(dialog);
Vue.use(comAccCascader);

new Vue({
  el: '#app',
  render: h => h(App)
});

完整组件/插件列表和引入方式

完整组件列表以项目根目录./main.js 为准.

import Vue from 'vue';

import {
  dialog,
  comAccPager,
  comAccCascader,
  comAccPopover,
  comAccTcode,
  comAccTable,
  comAccTree,
  comAccEditor,
  comAccClassCheck,
  comAccCategory,
  comAccIdInput,
  comAccDropdown
}  from 'acc-south-aviation-components';

// plugins
Vue.use(dialog);

// components
Vue.use(comAccPager);
Vue.use(comAccCascader);
Vue.use(comAccPopover);
Vue.use(comAccTcode);
Vue.use(comAccTable);
Vue.use(comAccTree);
Vue.use(comAccEditor);
Vue.use(comAccClassCheck);
Vue.use(comAccCategory);
Vue.use(comAccIdInput);
Vue.use(comAccDropdown);

目录结构