第一个 Vue + Ant-Design-Vue 小项目跑起来

快速入门

安装 nodejs

检查安装是否正确

node -v

npm -v

安装 Vue Cli

npm install -g @vue/cli

检查安装版本

vue --version

创建一个项目

vue create hello-world

运行这个项目

进入这个项目目录

执行

npm run serve

安装 ant design view

进入到 hello-world 目录

npm add ant-design-vue

在 main.js 里面引入

import Vue from 'vue';
import Button from 'ant-design-vue/lib/button';
import 'ant-design-vue/dist/antd.css';
import App from './App';

Vue.component(Button.name, Button);

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

在 App.vue 中修改

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <a-button type="primary">Button></a-button>
  </div>
</template>

再次运行，则可以看到 Button 按钮