快速安裝

npm install atd-ueui --save

前期準備

import { createApp } from 'vue'
import App from '@/App.vue'
import ATDUEUI from 'atd-ueui'
import '../node_modules/atd-ueui/dist/style.css'

const app = createApp(App);
app.use(ATDUEUI);
app.mount('#app');

引用

import { atdButton, atdInput } from 'atd-ueui'

輕鬆开始

<atd-button>默認按鈕</atd-buttonn>
<atd-button type="primary">主要按鈕</atd-button>

問題反饋

• 您可以發送郵件至[email protected]來反饋。

分支規範

• 代碼請保持在 dev 分支，禁止操作 main 分支。
• 組件文檔暫時需要提供 md 文件，包括（項目使用方式、演示、配置、事件 API、插槽說明...）。
• 提交代碼前請先 rebase。
• git 提交流程示例：

git add .
git commit -m "add component:button" // example
git pull --rebase origin dev
git push origin dev

文檔集成規範

• 組件目錄下新增的 doc 文件夾用於文檔編寫。
• doc 文件夾下提供一個 doc.md，一个組件最多只允許一個 .md 文件。
• doc 文件同級存放 demo.vue 文件，demo 不限制個數。
• 然後在 doc.md 文件頂部使用 setup 語法糖的方式引入 demo 文件，使用组件的形式展示。
• src/router/routerPage/page.js 引入 md 文件作爲路由使用即可。
• 左側選單 "menuList" 管理文件在 /src/const/menuList.js, path 路徑二級路由保持與元件 path 配置一致。
• Attributes.vue 作爲參數原件，使用請參考 button/doc/Attributes.vue。
• Events.vue 作爲事件 API 组件，使用請參考 input/doc/Events.vue
• 如果有其他的 api 需要展示，新增相關元件文件并引用，例如：options.vue，使用請參考 tree/doc/options.vue
• 代碼預覽文件為 src/components/Preview.vue，需在 doc.md 文件以元件的形式引入 Preview.vue ，接收两 个props，compName 为元件目錄名稱（建議與路由名稱保持一致），demoName 是爲了要展示 demo 文件名，例如：

//doc.md
<script setup>
  import demo1 from './demo1.vue'; import demo2 from './demo2.vue'; import preview from '@/components/preview.vue';
  <div class="componetnsBox">
    <demo1 />
  </div>
  <preview compName="button" demoName="demo1" />
  <div class="componetnsBox">
    <demo2 />
  </div>
  <preview compName="button" demoName="demo2" />
</script>

組件測試規範

• 任何一個組件應完成測試後提交 PR
• 組件測試腳本提供存放目錄為 tests 目錄文件，提供 .spec.js 為測試腳本
• 測試腳本需包含初始化測試、渲染測試、插槽測試、事件測試、功能測試等基礎測試
• 具體示例請參考 /tests/button.spec.js 腳本文件
• 組件測試命令為：

npm test

開發環境

• 你需要 Node.js 14+，yarn 1.1+ 和 npm 6+及 vite 2+

項目啓動

npm run dev

項目打包

npm run build

元件開發規範

• 通過在 packages 目錄下創建組件目錄結構，包含測試、入口文件、文檔。
• 原件入口文件必須以 index.js 命名，并包含 install 方法, Example：

import mButton from './index.vue';
mButton.install = app => {
  app.component(mButton.name, mButton);
};
export default mButton;

• packages 文件夹下 index.js 作爲整體入口文件，需包含所有元件，若需要綁定全局变量或提供元件實例調用，Example：

  app.config.globalProperties.$message = Message;

• 任何組件禁止使用三方依賴庫。

• 組件內如果依賴了其他組件，需要在當前組件內引入，Example: select。