Vue3中怎么引入Ant Design

时间：2023-05-12 04:40

首先介绍一下 vue-cli 3 默认生成的目录结构

+ demo    + node_modules（存放第三方模块）    + public（存放静态文件）        - favicon.ico（图标）        - index.html （页面模板）    + src（我们自己写的文件一般放在这个文件夹下）        + assets（存放资源文件）        + components（存放公共组件）        + router.js（路由管理：Router）        + store.js （状态管理：Vuex）        + views（存放视图组件）        - App.vue（页面入口文件）        - main.js（程序入口文件）    - package.json（项目配置文件）    - package-lock.json（项目配置文件）    - babel.config.js（babel 配置文件）    - README.md（项目说明文档）    - ...（其它配置文件）

1、安装 Ant Design

npm 是 Node 的包管理工具，我们可以通过 npm 安装 Ant Design

加上 --save 选项，可以同时将配置写入 package.json 的 dependencies 字段（生产环境依赖）

npm install --save ant-design-vue

2、引入 Ant Design

在 Vue 中引入 Ant Design 有两种方式，分别是全部引入和局部引入，下面将会逐一介绍

（1）全部引入

在 main.js 中引入并注册全部组件，即可在其它页面中直接使用全部组件

// main.js import Vue 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' // 新增代码：注册全部组件Vue.use(Antd) new Vue({  router,  store,  render: h => h(App)}).$mount('#app')

采用这种引入方式，不管是否使用到的组件，都会全部加载进来，显然不是一个好的办法

（2）局部引入

在 main.js 中引入并注册特定组件，在其它页面中只可使用特定组件

// main.js import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store' // 新增代码：引入特定组件及样式import {  Button} from 'ant-design-vue'import 'ant-design-vue/lib/button/style' // 新增代码：注册特定组件Vue.component(Button.name, Button) new Vue({  router,  store,  render: h => h(App)}).$mount('#app')

采用这种引入方式，可以保证只引入需要的组件（按需引入）

但每引入一个组件，都要手动将其对应的样式文件同时引入，未免过于麻烦

babel-plugin-import 插件可以辅助完成这个工作，首先安装 babel-plugin-import 插件

加上 --save-dev 选项，同时将配置写入 package.json 的 devDependencies 字段（开发环境依赖）

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

然后在 babel.config.js 配置插件

module.exports = {  presets: [    '@vue/cli-plugin-babel/preset'  ],  // 新增代码  plugins: [    [      'import',      { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true }    ]  ]}

接着在 main.js 按需引入组件

// main.js

// main.js import Vue from 'vue'import App from './App.vue'import router from './router'import store from './store' // 新增代码：引入特定组件// 此时会自动引入对应的样式文件，无需再手动逐一引入import {  Button} from 'ant-design-vue' // 新增代码：注册特定组件Vue.component(Button.name, Button) new Vue({  router,  store,  render: h => h(App)}).$mount('#app')

最后记得使用 npm run serve 重启应用，即可在其它页面中使用特定组件

注意，如果你在使用 vue-cli 3 创建项目时配置了 Less，那么你在运行应用时可能会出现以下错误：

Inline JavaScript is not enabled. Is it set in your options?

这是因为 Webpack 对于 Less-loader 的默认配置不合适所导致的，所以我们需要修改一下配置

在根目录下的项目配置文件 vue.config.js 中添加以下配置项（如果没有这个文件，就自己创建一个）

module.exports = {  css: {    loaderOptions: {      less: {        javascriptEnabled: true      }    }  }}

3、使用 Ant Design

在安装和引入 Ant Design 后，我们就可以在页面使用 Ant Design 中的组件啦

<template>  <div>    <a-button type="primary" @click="handleClick">Primary</a-button>  </div></template> <script>export default {  methods: {    handleClick: function (e) {      console.log('click', e)    }  }}</script>

这时，如果你能看到一个蓝色的按钮出现在页面上，就说明已经配置成功

以上就是Vue3中怎么引入Ant Design的详细内容，更多请关注Gxl网其它相关文章！