《vue 3.0探险记》- 尝试安装And Design

原创

全栈道z 2022-09-01 15:32:21 博主文章分类：web前端 ©著作权

©著作权归作者所有：来自51CTO博客作者全栈道z的原创作品，请联系作者获取转载授权，否则将追究法律责任

继上一篇：《vue 3.0探险记》- 尝试安装Element UI，我们发现element这是要跑路的节奏，那就赶紧找好下家，想一想饿了么被阿里给收购了，阿里有And Design, 一家公司确实不需要两种风格的UI。那接下来就看看And Design好了。打开And Design of Vue就看到了对vue 3.0的提示：

《vue 3.0探险记》- 尝试安装And Design_vue.js

那就尝试一下安装使用~

第一步：安装Ant Design

可以参照Ant Design快速上手：https://2x.antdv.com/docs/vue/getting-started-cn/

npm i --save ant-design-vue@next

第二步：在main.js中添加Ant Design 的引用

我这里使用的是一次全部引用，也可以按需引用

import { createApp } from 'vue'
import App from './App.vue'
import antd from 'ant-design-vue';

import 'ant-design-vue/dist/antd.css'; // or 'ant-design-vue/dist/antd.less'

const app = createApp(App);
app
.use(antd)
.mount('#app');

第三步：使用

在APP.vue中直接顶部添加一个Button

<template>
  <a-button type="primary">
    Primary
  </a-button>

  <img alt="Vue logo" src="./assets/logo.png">
  <HelloWorld msg="Welcome to Your Vue.js App"/>
</template>

《vue 3.0探险记》- 尝试安装And Design_vue.js_02