Vue 学习之路之 Ant Design Vue 初步使用

最新推荐文章于 2024-08-11 15:33:20 发布

原创最新推荐文章于 2024-08-11 15:33:20 发布 · 1.2k 阅读

CC 4.0 BY-SA版权

目前为止，已经对 Vue 的基本用法有了初步了解。由于不想自己手动去开发组件（一方面嫌丑，另一方面感觉上手太慢），所以直接就开始学习第三方组件库的使用。根据之前的前端开发经验，猜想 Vue 框架肯定存在着很多第三方组件库，从一开始接触的 Element-ui，到后面听学长说的饿了么UI。直到现在对 Vue 有了一个初步的认识之后，想通过 Ant Design Pro 这个项目来加深对 Vue 的认识。下面记录下在Vue中使用第三方组件库的经验（Ant Design Pro）

注意：本文使用 npm 进行构建，yarn 方式请参考官方文档。

参考文档：https://www.antdv.com/docs/vue/use-with-vue-cli-cn/

一、安装 vue-cli 3 脚手架，可以帮我们自动初始化一个脚手架并安装 Vue 项目的各种必要依赖

npm install -g @vue/cli

二、创建项目

vue create file-viewer

三. 在项目安装引入 Ant Design Vue 依赖

npm i --save ant-design-vue

四. 在项目中声明使用 Ant Design Vue，有两种方式：全量使用（导入 Antd 全部组件）和按需使用（只导入使用到的部分组件）

1. 全量使用。以下代码便完成了 Antd 的全量引入（在此引入后，即可在项目中任意位置使用Antd提供的组件而不需要单独的声明引入）。需要注意的是，样式文件需要单独引入。

import Vue from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
Vue.config.productionTip = false;

Vue.use(Antd);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
});

2. 按需使用。需要使用到 babel-plugin-import 插件：一个用于按需加载组件代码和样式的 babel 插件

2.1 在 babel.config.js 配置文件中加入下面的配置代码，其中 style 的值可以是 true: 表示自动引入样式文件，默认为 less，css: 表示引入 css 样式文件，less: 表示引入 less 样式文件

plugins: [
        [
          "import",
          { libraryName: "ant-design-vue", libraryDirectory: "es", style: 'css' }
        ]
      ]

2.2 然后像上面全量引入一样在main.js引入你需要使用的组件即可