0.0.8 • Published 3 years ago

atd-ueui v0.0.8

Weekly downloads
-
License
MIT
Repository
-
Last release
3 years ago

快速安裝

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>

問題反饋

  • 您可以發送郵件至wimnft@gmail.com來反饋。

分支規範

  • 代碼請保持在 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 ,接收两 个propscompName 为元件目錄名稱(建議與路由名稱保持一致),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
0.0.8

3 years ago

0.0.7

3 years ago

0.0.6

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago