Vue3中如何引入Ant Design
这篇“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(项目说明文档) - ...(其它配置文件)
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 中的组件啦
Primary
这时,如果你能看到一个蓝色的按钮出现在页面上,就说明已经配置成功
以上就是关于“Vue3中如何引入Ant Design”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。
网站题目:Vue3中如何引入Ant Design
浏览地址:http://pwwzsj.com/article/joipip.html