189 8069 5689
这篇“Vue3中如何引入Ant Design”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Vue3中如何引入Ant Design”文章吧。
成都创新互联云计算的互联网服务提供商,拥有超过13年的服务器租用、成都服务器托管、云服务器、虚拟主机、网站系统开发经验，已先后获得国家工业和信息化部颁发的互联网数据中心业务许可证。专业提供云主机、虚拟主机、空间域名、VPS主机、云服务器、香港云服务器、免备案服务器等。
首先介绍一下 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（项目说明文档） - ...（其它配置文件）
npm 是 Node 的包管理工具，我们可以通过 npm 安装 Ant Design
加上 --save 选项，可以同时将配置写入 package.json 的 dependencies 字段（生产环境依赖）
npm install --save ant-design-vue
在 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
}
}
}
}在安装和引入 Ant Design 后，我们就可以在页面使用 Ant Design 中的组件啦