|
|
@@ -3,28 +3,37 @@
|
|
|
> 此处是通过 vue cli 创建 vue3.0 项目,直接在项目目录下新增
|
|
|
### 1. 安装 ant to vue3
|
|
|
通过 `yarn` 或者 `npm` 进行安装 `ant`
|
|
|
-
|
|
|
+<!-- tabs:start -->
|
|
|
+#### **yarn**
|
|
|
```shell
|
|
|
- yarn add ant-design-vue@next
|
|
|
-
|
|
|
- # OR
|
|
|
-
|
|
|
+ yarn add ant-design-vue@next
|
|
|
+```
|
|
|
+#### **npm**
|
|
|
+```shell
|
|
|
npm i --save ant-design-vue@next
|
|
|
```
|
|
|
+<!-- tabs:end -->
|
|
|
|
|
|
+>[!Warning]
|
|
|
+>如果是需要全局安装不要使用官方的方法来进行一个安装,在21-08-02 使用官方教程安装后使用 `vue3.0` 方法进行引用会在浏览器内提示 `Cannot read property 'use' of undefined` ,但是在终端中不会有错误提示, 使用上方方法安装,可正常使用
|
|
|
|
|
|
-<font color="red">!!! 如果是需要全局安装不要使用官方的方法来进行一个安装,在21-08-02 使用官方教程安装后使用 `vue3.0` 方法进行引用会在浏览器内提示 `Cannot read property 'use' of undefined` ,但是在终端中不会有错误提示, 使用上方方法安装,可正常使用 </font>
|
|
|
-`ant` 官方安装方法
|
|
|
-
|
|
|
+`ant`官方安装方法
|
|
|
+<!-- tabs:start -->
|
|
|
+#### **yarn**
|
|
|
```shell
|
|
|
- npm install ant-design-vue --save
|
|
|
yarn add ant-design-vue
|
|
|
```
|
|
|
+#### **npm**
|
|
|
+```shell
|
|
|
+ npm install ant-design-vue --save
|
|
|
+```
|
|
|
+<!-- tabs:end -->
|
|
|
|
|
|
### 2. `vue3` 中,配置 `ant`
|
|
|
> 全局配置ant
|
|
|
> 在vue3中全局挂载模块和vue2中有一点区别, 区别不大
|
|
|
-
|
|
|
+<!-- tabs:start -->
|
|
|
+### **vue3**
|
|
|
编辑 `src` 目录下的 `main.js` ,使用 `app.use` 来进行导入,支持链式调用
|
|
|
```javascript
|
|
|
import { createApp } from 'vue';
|
|
|
@@ -37,7 +46,9 @@ app.mount("#app");
|
|
|
// 也可以按照下面方式进行引用,xxx为模块
|
|
|
createApp(app).use(xxx).use(xxx).use(Antd)
|
|
|
```
|
|
|
-
|
|
|
+### ***vue2***
|
|
|
+没写
|
|
|
+<!-- tabs:end -->
|
|
|
## 递归渲染 `sidebar`
|
|
|
#### 1. 思路解析
|
|
|
侧边栏部分可以使用 `ant` 的布局 `Layout` 来实现,配合 `ant` 的导航菜单 `a-menu` 子菜单使用 `a-sub-menu` 来实现多层级
|
