Vue DevUI уже имеет 10 членов компонента~🥳😋

внешний интерфейс TypeScript Vue.js
Vue DevUI уже имеет 10 членов компонента~🥳😋

3 месяца назад мы опубликовали статью в Nuggets и официально запустили проект Vue DevUI.Давайте создадим проект Vue DevUI вместе! 🥳

Вскоре к нам присоединилось много друзей, которые любят открытый исходный код, поэтому мы быстро установилиVue DevUI 核心成员小组и обсудили технологический стек библиотеки компонентов Vue DevUI:

  • Vite
  • Vue3
  • JSX

На данный момент группа выросла до 46 участников, а библиотека компонентов Vue DevUI также добавила 10 новых компонентов и выпустила ее на npm.v0.1.0Версия:

vue-devui@0.1.0

⚠️ Примечание. Этот выпуск еще не завершен и не может использоваться в производственных средах.

Особая благодарность следующим друзьям за их вклад 🎉🥳:

Далее я сообщу о текущем прогрессе Vue DevUI.Заинтересованные партнеры могут принять участие в создании проекта Vue DevUI! 👏🎉

Участвуя в проекте Vue DevUI, вы можете:

  • Изучите новейшие технологии Vite+Vue3+TSX
  • Узнайте, как проектировать и разрабатывать компоненты
  • Присоединяйтесь к сообществу открытого исходного кода
  • Познакомьтесь с группой друзей, которые любят учиться и открытый исходный код

новые компоненты

Общие компоненты:

  1. Компонент кнопки кнопки
  2. Компоненты панели панели

Компонент навигации:

  1. Компонент вкладки "Вкладки"

Компонент обратной связи:

  1. Предупреждающий компонент

Компоненты ввода данных:

  1. Компонент флажка CheckBox
  2. Компонент радиокнопки
  3. Переключатель в сборе
  4. Компонент ввода тега TagsInput
  5. Компонент текстового поля TextInput

Компонент отображения данных:

  1. Компонент аватара аватара

Вот визуализация веб-сайта:

demo.png

api.png

Для получения подробной информации о примечаниях к выпуску см.:

git ee.com/Dev UI/v UE-s…

Оптимизация и спецификация

В настоящее время в проект библиотеки компонентов Vue DevUI добавлены следующие спецификации:

  1. Шуточные модульные тесты
  2. Спецификация кода ESLint
  3. Спецификация стиля StyleLint
  4. Соглашение об именах папок/файлов ls-lint
  5. Спецификация фиксации кода CommitLint

быстрый старт

Трилогия быстрого старта:

  • Установить
  • вводить
  • использовать

Установить vue-devui

npm i vue-devui
# npm i vue-devui --registry=https://registry.npm.taobao.org/

Представьте vue-devui

main.ts

import { createApp } from 'vue'
import App from './App.vue'

// 引入 Vue DevUI 组件库
import DevUI from 'vue-devui'
import 'vue-devui/style.css'

// 使用vue-devui
createApp(App).use(DevUI).mount('#app')

Использование компонента «Кнопка»

App.vue

<d-button>确定</d-button>

Изображение эффекта:

devui button.png

Ниже приведен исходный код проекта:

git ee.com/Dev UI/v UE-s…

Чтобы внести свой вклад, вы можете добавить небольшого помощника WeChat: devui-official, пригласить вас в основную группу участников Vue DevUI~😋😋

Добро пожаловать, чтобы следовать за намиDevUIБиблиотека компонентов, зажгите нашу звездочку 🌟:

GitHub.com/Облако разработки Fe/…

Также добро пожаловать в недавно выпущенный DevUIDevUI AdminСистема из коробки строит красивую и атмосферную систему управления фоном за 10 минут!

уведомление

10 числа этого месяца DevUI выпустит версию DevUI 12. Помимо обновления Angular 12, в нем много интересных новых функций, ждите с нетерпением!

Версия DevUI Admin 2.0 также будет выпущена 17-го числа этого месяца, предоставляя волшебную черную технологию, давайте подождем и увидим!

Категории