vue 如何引入 ant design
阿新 • • 發佈:2020-08-11
一、在vue中如何引入ant design
(1)完整引入
main.js
中全域性引入並註冊
import Antd from 'ant-design-vue' import 'ant-design-vue/dist/antd.css' Vue.use(Antd)
- 在頁面中不再需要引入註冊元件,可以直接使用所有的元件
<template> <div> <a-button type="primary">hello world</a-button> </div> </template> <script> export default {} </script>
(2)匯入部分元件
- 在
main.js
中匯入並註冊需要在專案中使用的元件
import { Button } from "ant-design-vue"; import 'ant-design-vue/lib/button/style/css' Vue.component(Button.name, Button)
- 在專案中可以直接使用這個已經註冊的元件
<template> <div> <a-button type="primary">hello world</a-button> </div> </template> <script> export default {} </script>
(3)按需載入
ant-design-vue
使用babel-plugin-import
進行按需載入
- 安裝
babel-plugin-import
外掛
npm i babel-plugin-import --save-dev
- 修改
.babelrc
檔案,在plugins
節點下,新增下面這個配置項:
"plugins": ["transform-vue-jsx", "transform-runtime", [ "import", { "libraryName": "ant-design-vue", "libraryDirectory": "lib", "style": "css" } ] ]
- 在需要使用相關元件的頁面引入並註冊即可按需載入
<template> <div> <a-button type="primary">hello world</a-button> </div> </template> <script> import { Button } from 'ant-design-vue'; export default { components:{ AButton:Button }, } </script>
參考這個https://www.cnblogs.com/psxiao/p/11417697.html