ant-design-vue入门

可以预先看在ant-design-vue官网的 快速入门。

Vue和Vue CLI

Vue CLI = Vue.js + 一堆插件

创建项目

• 全局安装Vue CLI：npm install -g @vue/cli

  • 查看Vue CLI版本：vue --version或vue -V
  • 安装Vue CLI时，最好添加版本号，如npm install -g @vue/cli@4.5.13

• 创建一个项目：vue create web

  • Manually select features，按空格选中
    • TypeScript
    • Router
    • Vuex
    • Linter/Formatter
  • Choose a version of Vue，3.x
  • Use class-style component syntax? N
  • Use Babel alongside TypeScript? n
  • Use history mode for router? Y
    • history：xxx/user
    • hash:xxx/#/user
  • Pick a linter/formatter config
    • ESLint with error prevention only
  • Pick additional lint feature
    • Lint on save
  • Where do you prefer palcing config for Babel,ESLint,etc.?
    • In dedicated config files
  • Save this as a preset for future projects?N

• 启动项目

  • cd web
  • npm run serve

• 浏览器访问：http://localhost:8080/
  

项目结构

• main.ts|App.vue|index.html
  Vue CLI 初始执行main.ts，将内容页App.vue渲染到index.html，完成页面显示。
• package.json
  完整的版本号定义：<主版本号><次版本号><修订版本号>
  • "vue": "^3.0.0" 表示会自动安装3.0.0及以上版本，注意哈，只是改变修订版本号，不会改变主版本号
    • 比如，3.0.1发布了，下载该源码后，npm install时会下载3.0.1，而不是3.0.0。
    • 比如，4.0.0发布了，下载该源码后，npm install时会下载最新的3.x.x，但不会下载4.0.0。
  • "typescript": "~4.1.5"，表示会自动安装4.1.x的最新版本，注意哈，只改变修订版本号，不会改变次版本号
    • 比如，4.1.6发布了，npm install时会下载4.1.6
    • 比如，4.2.0发布了，npm install时会下载最新的4.1.x，但不会下载4.2.0
• package-lock.json
package.json中指定最新版本的主版本号，package-lock.json则用来确定修订版本号。
  比如，package.json中指定"@vue/cli-service": "~4.5.0"，package-lock.json中则确定了修订版本号："version": "4.5.13"。

集成ant-design-vue

安装ant-design-vue

• npm install ant-design-vue --save
  下载的是ant-design-vue@1.7.5，但ant-design-vue@1.x不支持Vue3。
• npm install ant-design-vue@next --save
  表示安装ant-design-vue最新的未发布的版本，此时下载的是ant-design-vue@2.1.4

使用ant-design-vue

• main.ts中引入antdv
  

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

createApp(App).use(store).use(router).use(Antd).mount('#app')

• Home.vue中使用Button组件
  

<template>
  <div class="home">
    <a-button type="danger">Danger</a-button>
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src

export default defineComponent({
  name: 'Home',
  components: {
    HelloWorld,
  },
});
</script>