1 | # @wei_design/web-vue
|
2 |
|
3 | A Vue.js 3 UI library
|
4 |
|
5 | [![commitizen](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli)
|
6 | [![WeDesign version badge](https://img.shields.io/npm/v/@wei_design/web-vue.svg?style=flat-square)](https://www.npmjs.org/package/@wei_design/web-vue)
|
7 |
|
8 | ---
|
9 |
|
10 | - 🔭 [Vite](https://vitejs.dev)
|
11 | - 💪 [Vue3](https://vuejs.org)
|
12 | - 🔥 TypeScript
|
13 |
|
14 | [快速开始](https://wei_design.cloud-app.com.cn)
|
15 |
|
16 | ## 安装
|
17 |
|
18 | ### npm
|
19 |
|
20 | 这里推荐`pnpm`进行安装
|
21 |
|
22 | ```sh
|
23 | pnpm install @wei_design/web-vue --save
|
24 | ```
|
25 |
|
26 | ### cdn
|
27 |
|
28 | #### unpkg
|
29 |
|
30 | [资源浏览](https://unpkg.com/@wei_design/web-vue/)
|
31 |
|
32 | ```html
|
33 | <link
|
34 | rel="stylesheet"
|
35 | href="//unpkg.com/@wei_design/web-vue/lib/style.css"
|
36 | />
|
37 | <script src="//unpkg.com/@wei_design/web-vue"></script>
|
38 | ```
|
39 |
|
40 | #### jsdelivr
|
41 |
|
42 | [资源浏览](https://cdn.jsdelivr.net/npm/@wei_design/web-vue/)
|
43 |
|
44 | ```html
|
45 | <link
|
46 | rel="stylesheet"
|
47 | href="//cdn.jsdelivr.net/npm/@wei_design/web-vue/lib/style.css"
|
48 | />
|
49 | <script src="//cdn.jsdelivr.net/npm/@wei_design/web-vue"></script>
|
50 | ```
|
51 |
|
52 | ## 使用
|
53 |
|
54 | ### 全局引入
|
55 |
|
56 | 在`main.js`中
|
57 |
|
58 | ```js
|
59 | import { createApp } from 'vue';
|
60 | import App from './App.vue';
|
61 | // 完整引入组件库
|
62 | import WeDesign from '@wei_design/web-vue';
|
63 |
|
64 | const app = createApp(App);
|
65 | // 全局安装
|
66 | app.use(WeDesign).mount('#app');
|
67 | ```
|
68 |
|
69 | 组件当中
|
70 |
|
71 | ```vue
|
72 | <WeButton :loading="true">按钮组件</WeButton>
|
73 | ```
|
74 |
|
75 | ### 按需引入
|
76 |
|
77 | `main.js`中
|
78 |
|
79 | ```js
|
80 | import { createApp } from 'vue';
|
81 | import App from './App.vue';
|
82 | // 按需引入
|
83 | import { Button } from '@wei_design/web-vue';
|
84 |
|
85 | const app = createApp(App);
|
86 |
|
87 | app.use(Button).mount('#app');
|
88 | ```
|
89 |
|
90 | 组件当中
|
91 |
|
92 | ```vue
|
93 | <WeButton :loading="true">按钮组件</WeButton>
|
94 | ```
|
95 |
|
96 | ---
|
97 |
|
98 | 有问题欢迎issue...
|