base on A Vue.js 3 UI Library based on Arco Design <div align="center"> <a href="https://arco.design" target="_blank"> <img alt="Arco Design Logo" width="200" src="https://avatars.githubusercontent.com/u/64576149?s=200&v=4"/> </a> </div> <div align="center"> <h1>Arco Design</h1> </div> <div align="center"> A comprehensive Vue UI components library based on the [Arco Design](https://arco.design/) system. [](https://github.com/arco-design/arco-design-vue/blob/main/LICENSE) </div> <div align="center"> English | [简体中文](./README.zh-CN.md) </div> # Features ## Comprehensive With more than 60 crafted components that you can use out of the box. ## Customizable theme Extensive theme tokens can be customized to build your own theme. Two ways of customization are supported: * [With less-loader](https://arco.design/vue/docs/theme) * [Design Lab](https://arco.design/themes) - Recommended! ## TypeScript friendly All components are written in TypeScript so it's type friendly. # Installation Available as an [npm package](https://www.npmjs.com/package/@arco-design/web-vue) ```bash // with npm npm install @arco-design/web-vue // with yarn yarn add @arco-design/web-vue ``` # Examples ```typescript import { createApp } from 'vue' import ArcoVue from '@arco-design/web-vue'; import App from './App.vue'; import '@arco-design/web-vue/dist/arco.css'; const app = createApp(App); app.use(ArcoVue); app.mount('#app'); ``` ## Development 1. Use `npm install -g` to install basic packages such as `lerna` and `yarn`. 2. Use `yarn install` to install the dependencies of each package in `workspaces` (If you encounter a `YN0018` error, you can use `YARN_CHECKSUM_BEHAVIOR=update yarn` to install). 3. Use `npm run init` to initialize the project. # Useful Links * [Documentation website](https://arco.design/) * [Dark mode](https://arco.design/vue/docs/dark) * [Theme customization](https://arco.design/vue/docs/theme) * [Figma component library](https://www.figma.com/file/FVu1DydEeXvJqXrkOb90Oi/ArcoDesign%E7%BB%84%E4%BB%B6%E8%AE%BE%E8%AE%A1_2.0?node-id=5472%3A308) * [Awesome Arco](https://github.com/arco-design/awesome-arco) # Ecosystems | Project | Description | | --------------------- | ------------------------------------------------------- | | [React Component Library] | A comprehensive React UI components library based on the Arco Design system | | [Design Lab] | A platform to create and manage your themes with ease. | | [Material Market] | A platform that provides massive high-quality customized materials to greatly boost development efficiency. | | [Icon Box] | One-stop platform to manage your icons. | | [Arco Pro] | A solution to quickly building applications from scratch. | [React Component Library]: https://arco.design/react/docs/start [Design Lab]: https://arco.design/themes [Material Market]: https://arco.design/material [Icon Box]: https://arco.design/iconbox [Arco Pro]: https://arco.design/pro/ # Contributing Developers interested in contributing should read the [Code of Conduct](./CODE_OF_CONDUCT.md) and the [Contributing Guide](./CONTRIBUTING.md). Thank you to all the people who already contributed to ArcoDesign! <a href="https://github.com/arco-design/arco-design-vue/graphs/contributors"><img src="https://contrib.rocks/image?repo=arco-design/arco-design-vue" /></a> # License Ths project is [MIT licensed](./LICENSE). ", Assign "at most 3 tags" to the expected json: {"id":"8854","tags":[]} "only from the tags list I provide: [{"id":77,"name":"3d"},{"id":89,"name":"agent"},{"id":17,"name":"ai"},{"id":54,"name":"algorithm"},{"id":24,"name":"api"},{"id":44,"name":"authentication"},{"id":3,"name":"aws"},{"id":27,"name":"backend"},{"id":60,"name":"benchmark"},{"id":72,"name":"best-practices"},{"id":39,"name":"bitcoin"},{"id":37,"name":"blockchain"},{"id":1,"name":"blog"},{"id":45,"name":"bundler"},{"id":58,"name":"cache"},{"id":21,"name":"chat"},{"id":49,"name":"cicd"},{"id":4,"name":"cli"},{"id":64,"name":"cloud-native"},{"id":48,"name":"cms"},{"id":61,"name":"compiler"},{"id":68,"name":"containerization"},{"id":92,"name":"crm"},{"id":34,"name":"data"},{"id":47,"name":"database"},{"id":8,"name":"declarative-gui "},{"id":9,"name":"deploy-tool"},{"id":53,"name":"desktop-app"},{"id":6,"name":"dev-exp-lib"},{"id":59,"name":"dev-tool"},{"id":13,"name":"ecommerce"},{"id":26,"name":"editor"},{"id":66,"name":"emulator"},{"id":62,"name":"filesystem"},{"id":80,"name":"finance"},{"id":15,"name":"firmware"},{"id":73,"name":"for-fun"},{"id":2,"name":"framework"},{"id":11,"name":"frontend"},{"id":22,"name":"game"},{"id":81,"name":"game-engine "},{"id":23,"name":"graphql"},{"id":84,"name":"gui"},{"id":91,"name":"http"},{"id":5,"name":"http-client"},{"id":51,"name":"iac"},{"id":30,"name":"ide"},{"id":78,"name":"iot"},{"id":40,"name":"json"},{"id":83,"name":"julian"},{"id":38,"name":"k8s"},{"id":31,"name":"language"},{"id":10,"name":"learning-resource"},{"id":33,"name":"lib"},{"id":41,"name":"linter"},{"id":28,"name":"lms"},{"id":16,"name":"logging"},{"id":76,"name":"low-code"},{"id":90,"name":"message-queue"},{"id":42,"name":"mobile-app"},{"id":18,"name":"monitoring"},{"id":36,"name":"networking"},{"id":7,"name":"node-version"},{"id":55,"name":"nosql"},{"id":57,"name":"observability"},{"id":46,"name":"orm"},{"id":52,"name":"os"},{"id":14,"name":"parser"},{"id":74,"name":"react"},{"id":82,"name":"real-time"},{"id":56,"name":"robot"},{"id":65,"name":"runtime"},{"id":32,"name":"sdk"},{"id":71,"name":"search"},{"id":63,"name":"secrets"},{"id":25,"name":"security"},{"id":85,"name":"server"},{"id":86,"name":"serverless"},{"id":70,"name":"storage"},{"id":75,"name":"system-design"},{"id":79,"name":"terminal"},{"id":29,"name":"testing"},{"id":12,"name":"ui"},{"id":50,"name":"ux"},{"id":88,"name":"video"},{"id":20,"name":"web-app"},{"id":35,"name":"web-server"},{"id":43,"name":"webassembly"},{"id":69,"name":"workflow"},{"id":87,"name":"yaml"}]" returns me the "expected json"