Chinese | English
Hello! Welcome to DK-plus!
I'm glad that you are interested in contributing to DK-plus. Before submitting your contribution, please take some time to read the following guidelines. This will help us collaborate better, avoid unnecessary work, and save everyone's time.
As we all know, there are many existing component libraries in the market. Often, the components we need to develop have already been created by other third-party libraries. However, please refrain from directly copying and using source code from other libraries.
The development of a component library itself is a process of learning and progress. It's not just about adding components for the sake of adding them. We hope that participants can learn something and improve their skills while adding new components. If you encounter difficulties with a specific feature during the development phase, you can initiate a discussion or directly contact me or seek help in the group. Of course, it's also acceptable to learn from and reference other open-source libraries. However, we expect you to have a solid understanding of the problem and tackle it by yourself when writing the code.
If you have any specific questions or need further guidance on how to contribute, please let me know. I'm here to assist you.
Before contributing, you need to get the project up and running so that you can better understand its structure and how to develop it.
If you have completed the previous preparations, you can skip ahead and start from here:
-
Fork dk-plus
-
Clone your fork to your local machine.
โโโ .github # github้
็ฝฎๆไปถ
โโโ .husky # ไปฃ็ ๆไบคๅๆฃๆต
โโโ .vscode # vscode้
็ฝฎๆไปถ
โโโ build #ๆnpmๅ
ๅทฅ็จๆไปถ
โโโ โโโ utils # ๆๅ
ๅทฅๅ
ท้
็ฝฎ
โโโ โโโ component.ts #ๆไปถ่พๅบ้
็ฝฎ
โโโ โโโ full-component.ts #ๆๅ
ๆไปถ่พๅบ่ฟๆปค่ฎพ็ฝฎ
โโโ โโโ gen-types.ts #gulpfile่ฎพ็ฝฎ
โโโ โโโ gulpfile.ts #ๆๅ
ๅฏๅจๆไปถ
โโโ โโ packages.ts #ไธ้จๆๅ
util ๏ผ ๆไปค ๏ผ hook็
โโโ coverage #ๆต่ฏ่ฆ็็
โโโ deploy # ่ฟ็จๅฝไปคSSHไธไผ ๅฐๆๅกๅจ้
็ฝฎ
โโโ โโโ config.js # ่ฟ็จๅฝไปคSSHไธไผ ๅฐๆๅกๅจ้
็ฝฎ
โโโ โโโ index.sh # ่ฟ็จๅฝไปคSSHไธไผ ๅฐๆๅกๅจ้
็ฝฎ
โโโ docs #ๆๆกฃ้กน็ฎ
โโโ โโโ .vitepress #ๆๆกฃ้
็ฝฎๆไปถ
โโโ โโโ โโโ cache #ๆฌๅฐ่ฟ่ก็ผๅญๆไปถ
โโโ โโโ โโโ data #ๆๆกฃ้
็ฝฎๆไปถ
โโโ โโโ โโโ โโโ description.ts #่ฏดๆๆไปถ
โโโ โโโ โโโ โโโ expansionNav.ts #ๆฉๅฑๅฏผ่ชๆไปถ
โโโ โโโ โโโ โโโ header.ts #ๅคด้จmeat ๆไปถ
โโโ โโโ โโโ โโโ nav.ts #ๅฏผ่ชๆไปถ
โโโ โโโ โโโ โโ sidebar.ts #ไพง่พนๆ ๅฏผ่ชๆไปถ
โโโ โโโ โโโ dist #ๆๅ
ๅ็ๆไปถ
โโโ โโโ โโโ json #ๆๆกฃ้
็ฝฎๆไปถ
โโโ โโโ โโโ โโโ contribution.json #่ดก็ฎ่
ๅๅๆไปถ
โโโ โโโ โโโ โโโ friendlyLinks.json #ๅๆ
้พๆฅๆไปถ
โโโ โโโ โโโ โโ home.json #้ฆ้กตๆไปถ
โโโ โโโ โโโ plugins #ๆๆกฃ้
็ฝฎๆไปถ
โโโ โโโ โโโ โโโ index.ts #ๆๆกฃ้
็ฝฎไธปๆไปถ
โโโ โโโ โโโ โโโ plugin-module.ts #ๅๅปบ markdown ๅฎไพ
โโโ โโโ โโโ โโ set-style.ts #่ฎพ็ฝฎๆๆกฃๆ ทๅผ(่ฑๆฐๅถไฝ)
โโโ โโโ โโโ theme #่ชๅฎไนไธป้ข
โโโ โโโ โโโ โโโ components #่ชๅฎไนไธป้ขๆไปถๅคน
โโโ โโโ โโโ โโโ โโ home.vue #ไธป้กตๆ ทๅผๆๆงฝ
โโโ โโโ โโโ โโโ style #่ชๅฎไนไธป้ขๆ ทๅผๆไปถๅคน
โโโ โโโ โโโ โโโ โโโ global.scss #ๅ
จๅฑๆ ทๅผ
โโโ โโโ โโโ โโโ โโโ home.scss #ไธป้กตๆ ทๅผ
โโโ โโโ โโโ โโโ โโ vitepress.scss #่ๅๆ ทๅผ
โโโ โโโ โโ config.ts #ๆๆกฃ้
็ฝฎๆไปถ
โโโ โโโ expansion #ๆๆกฃๆฉๅฑๆไปถ
โโโ โโโ โโโ Flutter #Flutterๆๆกฃๆฉๅฑๆไปถ
โโโ โโโ โโโ โโโ FlutterDome #Flutter Dome
โโโ โโโ โโโ โโโ โโ structure.md #Flutter Dome็ปๆ
โโโ โโโ โโโ โโโ ios #iosๆๆกฃๆฉๅฑๆไปถ
โโโ โโโ โโโ โโโ โโโ installXcode #ๅฎ่ฃ
XcodeIOS
โโโ โโโ โโโ โโโ โโ createProject #ๅๅปบ้กน็ฎ IOS ไธญ
โโโ โโโ โโโ โโโ windows #windowsๆๆกฃๆฉๅฑๆไปถ
โโโ โโโ โโโ โโโ โโโ fvmInstall #ๅฎ่ฃ
fvm
โโโ โโโ โโโ โโโ โโโ WinInstall #ๅฎ่ฃ
vscode ๆไปถ
โโโ โโโ โโโ โโโ โโ AndroidInstall #ๅฎ่ฃ
Android Studio
โโโ โโโ node_modules # ้กน็ฎไพ่ต
โโโ โโโ index.md #ๆๆกฃ้ฆ้กต
โโโ โโโ package.json #ๆๆกฃไพ่ตๆไปถ
โโโ โโ vite.config.ts #ๆๆกฃ้กน็ฎ่ฎพ็ฝฎ
โโโ images # ่ฟ็จๅพ็ๅคไปฝ
โโโ logo #ๅพๆ logo
โโโ node_modules # ้กน็ฎไพ่ต
โโโ npm #npmๅ
้กน็ฎ
โโโ โโ dist #ๆๅ
ๅ็ๆไปถ
โโโ packages # ็ปไปถๅบ็ปไปถ
โโโ โโโ components # ๅญๆพๆๆ็็ปไปถ
โโโ โโโ โโโ _hooks # hooks
โโโ โโโ โโโ โโโ _directive # ่ชๅฎไนๆไปคไปฃ็
โโโ โโโ โโโ โโโ โโโ loading # loading ๆไปค
โโโ โโโ โโโ โโโget-button # ่ทๅๆ้ฎ็ๆนๆณ(hooks_dk-button)
โโโ โโโ โโโ โโโget-Global # ่ทๅๅ
จๅฑ็ๆนๆณ(hooks_ๅ
ๅซ็ปไปถ็ฑปๅ_็ปไปถๅฑๆง)
โโโ โโโ โโโ โโโ public # ๅ
ฌๅ
ฑ็hooksๆนๆณ
โโโ โโโ โโโ โโโ โโโ get-color #้ข่ฒๅค็ๅ ๆทฑ ๅๆทก
โโโ โโโ โโโ โโโ โโโ get-props #่ทๅ็ปไปถ็props
โโโ โโโ โโโ โโโ โโโ get-Global #่ทๅ็ปไปถprops็size | type ๅผ็ปๅฎ้ป่ฎคๅผ
โโโ โโโ โโโ โโโ โโโ get-props #่ทๅ็ปไปถprops string ็ฑปๅ็ๅผ ๅobj็ฑปๅ็ๅผ
โโโ โโโ โโโ โโโ โโโ get-return #ๆง่กๆนๆณๅฝๆฐ
โโโ โโโ โโโ โโโ โโโ get-ripples #ๆๅฎๅ
็ด ๅ
็็นๅปๆช็ฅ ไธบ็นๆฎ็ปไปถๅฎๅถๆๅ
ฅๅ
็ด ไพๅฆdk-button ๆฐดๆณข็บนๆๆ
โโโ โโโ โโโ โโโ โโโ get-StyleList #็จไบ่ทๅpropsๅ
ๅๆฐๆ นๆฎ่ฎพ็ฝฎ็ๆๅฏนๅบๅ็งฐ็class ่ทๅไผ ๅ
ฅ็ๆ ทๅผๆฐ็ปๆจกๅผ็ๅผ่งฃๆ ๅคๆญๆฏๅฆไธบๆ ทๅผๆทปๅ ๅไฝ
โโโ โโโ โโโ โโโ set-size #็ฎๆ็ๆฏๅฆๅคๆญ้่ฆๆทปๅ ๅไฝ
โโโ โโโ โโโ โโโindex.ts # hooksๅบๅฃๆไปถ
โโโ โโโ โโโ _icon # ๅญๆพๆๆ็ๅพๆ ๅจๆ็ปไปถ็ๅฐๆน
โโโ โโโ _interface # ้กน็ฎๅ
็ๆฅๅฃๆไปถ
โโโ โโโ _tokens # ้กน็ฎๅ
็้ป่ฎคๅผ่ฎพ็ฝฎ
โโโ โโโ _utils # ็ปไปถๅ
็จ็ๅทฅๅ
ทๆนๆณ
โโโ โโโ โโโ index.ts # ็ปไปถๅ
ๅทฅๅ
ทๅบๅฃๆไปถ
โโโ โโโ โโโ props # ็ปไปถๅ
propsๆจๆญๆนๆณ
โโโ โโโ โโโ typeof # ็ปไปถๅ
typeofๆฐๆฎ็ฑปๅๅคๆญๆนๆณ
โโโ โโโ โโโ filtration # ้ฉผๅณฐ่ฝฌๆขไธบ็ญๆจช็บฟๅฝๅ ๅฐๆฐๅญๅฐบๅฏธๆนไธบๅญ็ฌฆไธฒ
โโโ โโโ โโโ test # ็ปไปถๅ
ๆต่ฏๆนๆณ
โโโ โโโ dkbutton #ๆ้ฎ็ปไปถ
โโโ โโโ dkcodedisplay #ไปฃ็ ๅฑ็คบ็ปไปถ
โโโ โโโ dkcontainer #้กต้ขๅธๅฑ็ปไปถ
โโโ โโโ dkfooter #้กต้ขๅธๅฑ็ปไปถ-ๅบ้จ็ปไปถ
โโโ โโโ dkheader #้กต้ขๅธๅฑ็ปไปถ-ๅคด้จ็ปไปถ
โโโ โโโ dkicon #ๅพๆ ็ปไปถ
โโโ โโโ dkinput #่พๅ
ฅๆก็ปไปถ
โโโ โโโ dkinputNumber #่พๅ
ฅๆก็ปไปถๆ้ฎ
โโโ โโโ dklaside #้กต้ขๅธๅฑ็ปไปถ-ๅทฆไพง็ปไปถ
โโโ โโโ dkloading #ๅ ่ฝฝไธญๆไปค็จ็็ปไปถ
โโโ โโโ dkmain #้กต้ขๅธๅฑ็ปไปถ-ไธญ็บงๅธๅฑ
โโโ โโโ dkshadow #็ๆจกๅ้ดๅฝฑ็ปไปถ
โโโ โโโ dkalert #่ญฆ็คบ็ปไปถ
โโโ โโโ index.ts #็ปไปถๅ
ฅๅฃๆไปถ
โโโ โโโ utils # ๅญๆพๅทฅๅ
ทๆนๆณ
โโโ โโโ theme-chalk # ๅญๆพๅฏนๅบ็ๆ ทๅผ,ๆ ทๅผๆๅ
ๅทฅๅ
ท็ฎฑ
โโโ โโโ โโโ src # ๅญๆพๅฏนๅบ็ๆ ทๅผ
โโโ โโโ โโโ โโโ mixins # ๅ
จๅฑclassๅฝๅ็ๆๆนๆณ
โโโ โโโ โโโ โโโ โโโ configuration # ็งๆ็ปไปถๆ ทๅผ้
็ฝฎ
โโโ โโ โโ gulpfile.ts # ๆๅ
ๅทฅๅ
ท
โโโ โโโ dk-setup-name # ๆ นๆฎๅฝไปค็ๆ็ปไปถๆไปถๅคน ๆๆชๅฎ็ฐ
โโโ โโโ dk-eslint # ้กน็ฎๅ
็eslint้
็ฝฎ
โโโ โโโ dk-plus # ๅบๅฃๆไปถ
โโโ โโ utils # ้กน็ฎๆๅ
่พ
ๅฉๅจ
โโโ play # ็ปไปถ่ฐ่ฏๆต่ฏ้กน็ฎ
โโโ โโโ node_modules # play็ไพ่ต ๆต่ฏ็ฎๅฝ
โโโ โโโ router # ่ทฏ็ฑ้
็ฝฎ
โโโ โโโ typings # ts็ๅฃฐๆๆไปถ
โโโ โโโ views # ้กต้ขๆไปถ
โโโ โโโ app.vue # vue app็ๅ
ฅๅฃๆไปถ
โโโ โโโ index.html # index.html ้ฆ้กต็html
โโโ โโโ main.ts # main.ts ็จๅบๅ
ฅๅฃๆไปถ
โโโ โโโ package.json # package.json ้กน็ฎๅ
ฅๅฃ้
็ฝฎ
โโโ โโ vite.config.ts # vite ่ฝป้็บงๅฏๅจ้กน
โโโ typings # ts็ๅฃฐๆๆไปถ
โโโ โโ vue-shim.d.ts # typescript ๅฃฐๆๆไปถ
โโโ .lintstagedrc # lint-staged ้
็ฝฎๆไปถๆไบคๅๆฃๆต
โโโ .markdownlint.json # markdownlint ้
็ฝฎๆไปถ
โโโ .eslintignore #ESLint ๅปๅฟฝ็ฅ็นๅฎ็ๆไปถๅ็ฎๅฝ
โโโ .eslintrc.js #ESLint ้
็ฝฎๆไปถ
โโโ .gitignore # git ่ฟๆปค่ฏดๆๆไปถ
โโโ .markdownlint.json # markdownlint ้
็ฝฎๆไปถ
โโโ .prettierrc.js # Prettier ้
็ฝฎๆไปถ
โโโ .prettierignore # Prettier ่ฟๆปค่ฏดๆๆไปถ
โโโ .npmrc # npm ้
็ฝฎๆไปถ
โโโ contribution.en-us.md # ่ดก็ฎ่ฏดๆๆไปถ่ฑๆ็
โโโ contribution.md # ่ดก็ฎ่ฏดๆๆไปถไธญๆ็
โโโ CUpdateLog.en-US.md # ๆดๆฐๆฅๅฟ่ฑๆ็
โโโ CUpdateLog.md # ๆดๆฐๆฅๅฟไธญๆ็
โโโ LICENSE # ๅผๆบๅ่ฎฎ
โโโ README.md # ้กน็ฎ่ฏดๆๆไปถ
โโโ README.en-US.md # ้กน็ฎ่ฏดๆๆไปถ่ฑๆ็
โโโ package.json # ้กน็ฎ้
็ฝฎๆไปถ
โโโ pnpm-lock.yaml # pnpm้
็ฝฎๆไปถ
โโโ pnpm-workspace.yaml #pnpm้
็ฝฎๆไปถ
โโ tsconfig.json # TS้
็ฝฎๆไปถ
Next execute the command:
# clone ้กน็ฎ
git clone https://github.com/dk-plus-ui/dk-plus-ui.git
# ่ฟๅ
ฅ้กน็ฎ็ฎๅฝ
cd dk-ui
# ๅฎ่ฃ
ไพ่ต้กน
pnpm install
ps: Note that the federation directive is referenced here
If the cnpm is not installed, install the cnpm first
Foreign user package.json scripts ้็ postinstall ๅฝไปค cnpm install --no-save @commitlint/[email protected] @commitlint/[email protected] ๆนไธบ npm install --no-save @commitlint/[email protected] @commitlint/[email protected]
# CNPMๅฎ่ฃ
npm install -g cnpm --registry=https://registry.npm.taobao.org
# ๅฏๅจๅผๅ้กน็ฎ
pnpm dev:play
# ๅฏๅจๆๆกฃ
pnpm dev:docs
Please read first IDE ๆฏๆ
The editor is highly recommended Visual Studio Code๏ผPlease be sure to install the following plug-ins:
-
Vue Language Features (Volar)Vue3 official development plugin:
-
TypeScript Vue Plugin (Volar) Used to support importing
*.vue
files in TS -
ESLint Code format verification, if not installed, then dk-eslint Do not take effect
-
Prettier Code format verification, if not installed, then dk-eslint Do not take effect
-
Code Spell Checker Used to detect spelling errors in code
dk-plus Internally set up a lot of commands in package.json Is available for viewing. Each command is described in detail below:
script fields | Corresponding command | Command description |
---|---|---|
dev:play | pnpm -C play dev | Start the test development project |
build:play | pnpm -C play build | Package test development projects |
build | gulp -f build/gulpfile.ts | Packaging component library |
dev:docs | pnpm -C docs dev:docs | Start the development documentation project |
build:docs | pnpm -C docs build:docs | Package development documentation projects |
format | prettier --write "*/.{ts,tsx,js,json,css,scss,json,md,vue,yml,yaml}" | Project code formatting |
deploy:docs | cross-env NODE_ENV=docs node ./deploy | test |
test | vitest | Test process |
coverage | vitest run --coverage | Generate test logs |
lint | pnpm lint | Project code review |
prepare | pnpm prepare | Run cell tests |
The main source files are all there packages Directory, where each subdirectory has a separate README.md
For a description of the specified directory, refer to the following documents for detailed specifications of each module:
- dk-plus-components Create a new component
- dk-plus-components Style subject directory
Git allows us to commit each time, with a commit information as a description when executed commit
When, you need to fill in the description information in strict accordance with the specification below, the submission information must be one of the following information, followed by 'English colon + space
The type must be one of the following and be entered against the type description.
type | Give an example | Description |
---|---|---|
build | git commit -m 'build: ๆๅ ***้ ็ฝฎ' | Modifying the packaging configuration |
ci | git commit -m 'ci: ไฟฎๆน ci ้ ็ฝฎ' | Modifying ci Configuration |
docs | git commit -m 'docs: ไฟฎๆนๆๆกฃ' | Modify a document |
feat | git commit -m 'feat: ๆฐๅข***็ปไปถ' | New component |
fix | git commit -m 'fix: ไฟฎๅค***bug' | Fix bugs |
perf | git commit -m 'perf: ไผๅ***ๆง่ฝ' | Optimized performance |
refactor | git commit -m 'refactor: ้ๆ***ไปฃ็ ' | Refactoring code |
style | git commit -m 'style: ไฟฎๆน***ๆ ทๅผ' | Modify style |
test | git commit -m 'test: ๆฐๅข***ๆต่ฏ็จไพ' | Added test cases |
revert | git commit -m 'revert: ๅๆป***ไปฃ็ ' | Rollback code |
chore | git commit -m 'chore: ไฟฎๆน***้ ็ฝฎ' | Modify configuration |
release | git commit -m 'release: ๅๅธ***็ๆฌ' | Release version |
hooks | git commit -m 'hooks: ๆฐๅข*** | exploit |
perfect | git commit -m 'perfect: ๅฎๅ*** ' | Perfect previous code block Where code block |
utils | git commit -m 'utils: ็ปไปถๅทฅๅ ท็ฎฑ*** | Update toolbox |
interface | git commit -m 'interface: ๅขๅ ็ปไปถๅ จๅฑๆฅๅฃ*** | Global interface |
deps | git commit -m 'deps: ไพ่ตๅ็บง | Dependent upgrade |
Available by Markdown Emoji Add emoticons after "message"
Before you commit PR
, make sure that your fork
repository is up to date to avoid conflicts.
- Clone the remote repository to the local:
git clone <repository-url>
- Add a remote repository:
git checkout -b <branch-name>
- Make modifications and submit to local warehouse:
git add .
git commit -m 'feat: ๆฐๅข***็ปไปถ'
4.Push a branch to a remote repository
```shell
git push origin <branch-name>
```
- Create a PR in the remote repository On a code hosting platform like GitHub or GitLab, find the branch you just pushed and create a PR. You can provide details about the changes you have made and any other comments about PR in the PR.
6.Pending review and consolidation: Once your PR is submitted, team members will review and discuss your code and may suggest changes. Once all issues have been resolved and approved, your PR will be merged into the main branch.
Matters needing attention: Before submitting your PR, make sure your local branch is based on the latest main branch. PR commits should be as small as possible, and each PR should contain only one set of related changes. This makes auditing easier and also makes the code easier to maintain.
Add a description to your PR to let other developers know about the changes you've made and their purpose
1.Log in to your npm account
npm login
2.publish
npm publish
If you feel that dk-plus has helped you, you can ask the author for a cup of coffee to encourage you.
Thanks for all that has been done DK-plus People who contribute๏ผ