5、前端笔记-Vue3.0 Ant Design of Vue

1、安装

使用 npm 或 yarn 安装

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

或

yarn add ant-design-vue@next

下载按需加载的插件

npm install babel-plugin-import --save-dev

或

yarn add babel-plugin-import

在项目的根目录下创建 babel.config.js

module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
  plugins: [
    [
      "import",
      {
        libraryName: "ant-design-vue",
        libraryDirectory: "es",
        style: true, // `style: true` 会加载 less 文件
      }
    ]
  ]
}

在项目根目录下创建vue.config.js配置项目信息

const Timestamp = new Date().getTime();

module.exports = {
  configureWebpack: {
    //每次打包后生成的js携带时间戳
    output: {
      filename: `[name].${Timestamp}.js`,
      chunkFilename: `[name].${Timestamp}.js`,
    },
  },
  css: {
    loaderOptions: {
      //这只主题样式，修改此文件后需要重新启动
      less: {
        lessOptions: {
          modifyVars: {
            //这是配置css主题色
            "primary-color": "#007AFF",
          },
          javascriptEnabled: true,
        },
      },
    },
    // 每次打包后生成的css携带时间戳
    extract: {
      filename: `css/[name].${Timestamp}.css`,
      chunkFilename: `css/[name].${Timestamp}.css`,
    },
  },
};

安装less与less-loader

npm install less less-loader --save-dev

如果引入组件时出现 TypeError: this.getOptions is not a function 报错，可能是你安装后less less-loader的版本过高,这个时候你需要将你的版本下降一下。

我的依赖版本库

{
  "dependencies": {
    "ant-design-vue": "^2.2.7",
    "core-js": "^3.6.5",
    "register-service-worker": "^1.7.1",
    "vue": "^3.0.0",
    "vue-class-component": "^8.0.0-0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^4.18.0",
    "@typescript-eslint/parser": "^4.18.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-pwa": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-typescript": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "@vue/eslint-config-typescript": "^7.0.0",
    "babel-plugin-import": "^1.13.3",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.0.0",
    "less": "^3.13.1",
    "less-loader": "^7.1.0",
    "node-sass": "^4.12.0",
    "prettier": "^2.2.1",
    "sass-loader": "^8.0.2",
    "typescript": "~4.1.5"
  }
}

2、使用

完整引用

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

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

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

按需引用

<template>
  <div class="home">
    <a-button type="primary">Dashed Button</a-button>>
  </div>
</template>

import { Options, Vue } from "vue-class-component";
import { Button as aButton } from "ant-design-vue";
@Options({
  components: {
    aButton,
  },
})
export default class Home extends Vue {}

3、常用组件

官网：www.antdv.com/docs/vue/ge…