Vue3中怎么引入Ant Design

首先介绍一下 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(&#39;click&#39;, e)
    }
  }
}
</script>

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

以上就是Vue3中怎么引入Ant Design的详细内容,更多请关注www.sxiaw.com其它相关文章!