vue3 + ant design vue项目搭建

在搭建之前，请务必选ant design 2.x的版本。 因为2.x是使用vue3的， 1.x稳定版是使用vue2的。

• vue3中文官网地址：https://vue3js.cn/docs/zh/
• ant design vue官网地址： https://2x.antdv.com/docs/vue/introduce/

我们开始吧

1. 先升级npm的版本

npm install -g npm

2. 最重要的一个环节，先卸载之前的vue cli 2.9.6

npm uninstall -g @vue/cli

3. 安装vue3 

npm install vue@next

4. 命令行工具 (CLI) , 下载最新的vue cli版本

npm install -g @vue/cli@next
//尝试了，安装不上，但是cnpm没问题,咋也不知道怎么回事，也不敢问。 
cnpm install -g @vue/cli@next

5. 创建项目

vue create myproject 

注意：在这里需要选择vue2还是vue3， 按上下键选定vue3后回车

6. 安装完成后，界面提示我们依次输入命令 

cd project
run run serve

7 到这里，我们就能看到vue的基础页了

二 接下来是ant design vue的安装与使用

1. 安装ant-design-vue

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

2. 然后在main.js中写入

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

import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

const app = createApp(App);
app.config.productionTip = false;
app.use(Antd);

app.mount('#app')

3. 运行程序

run run serve

4. 接下来我们来看看是否生效了HelloWorld.vue中输入

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <a-button type="primary">Primary</a-button>
  <a-button>Default</a-button>
  <a-button type="dashed">Dashed</a-button>
  <a-button type="danger">Danger</a-button>
  <a-config-provider :auto-insert-space-in-button="false">
    <a-button type="primary">按钮</a-button>
  </a-config-provider>
  <a-button type="primary">按钮</a-button>
  <a-button type="link">Link</a-button>
  </div>
</template>

哇，太神奇了，真的看到了我们期待的按钮， 鼓掌！！！！博客后台目前上传不了图了，你就假装下面有一张图吧，在我这里确实是看到了按钮的哦，如果有问题，可以私聊我哦。  接下来就按照需求开始开发吧。