第一個 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 按鈕