Vue3+Ts 实现 ant-design-vue 的全局引入和局部引入以及Vite按需加载
为了不耽误您的时间,可以直接拉到最后,第三种方法,观看使用~~~全局引入ant-design-vue的全局引入很简单,npm i --save ant-design-vue@next,然后在main.ts中添加即可。不推荐:这会影响应用的网络性能。(from 官网)局部引入第一种:在需要的组件中引入,例如按钮(方法可行但不推荐,只做说明)例子组件<template><div cl
为了不耽误您的时间,可以直接拉到最后,第三种方法,观看使用~~~
全局引入
ant-design-vue的全局引入很简单,npm i --save ant-design-vue@next
,然后在main.ts中添加
即可。
不推荐:这会影响应用的网络性能。(from 官网)
局部引入
第一种:在需要的组件中引入,例如按钮(方法可行但不推荐,只做说明)
例子组件
<template>
<div class="hello">
<p>
<a-button type="primary">Primary</a-button>
<a-button>Default</a-button>
<a-button type="dashed">Dashed</a-button>
<a-button type="danger">Danger</a-button>
<a-button type="primary">按钮</a-button>
<a-button type="link">Link</a-button>
</p>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import Button from "ant-design-vue/lib/button"; // 引入按钮
import "ant-design-vue/lib/button/style/css"; // 引入样式
export default defineComponent({
name: "HelloWorld",
components: {
"a-button": Button, // 使用按钮
},
props: {},
});
</script>
<!-- JellyDD 靓仔~ -->
<style scoped></style>
要单独引入button以及按钮的样式,繁琐 + 1
第二种:需要插件 使用 babel-plugin-import(官网推荐)。
首先我们 npm install babel-plugin-import --save-dev
然后配置 babel.config.js 文件
babel.config.js
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [
[
"import",
{ libraryName: "ant-design-vue", libraryDirectory: "es", style: "css" },
], // `style: true` 会加载 less 文件
],
};
再使用ant-design-vue就可以这样写
例子组件
<template>
<div class="hello">
<p>
<a-button type="primary">Primary</a-button>
<a-button>Default</a-button>
<a-button type="dashed">Dashed</a-button>
<a-button type="danger">Danger</a-button>
<a-button type="primary">按钮</a-button>
<a-button type="link">Link</a-button>
</p>
</div>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { Button } from "ant-design-vue"; // 直接引入按钮
export default defineComponent({
name: "HelloWorld",
components: {
"a-button": Button, // 使用按钮
},
props: {},
});
</script>
<!-- JellyDD 靓仔~ -->
<style scoped></style>
这样每次在组件中使用就得引入,也很麻烦+10086,我们为了不每次都引入可以不美的操作:
直接在main.ts中使用use方法,如下
main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { Button, TimePicker } from "ant-design-vue";
createApp(App).use(Button).use(TimePicker).use(store).use(router).mount('#app')
需要使用的就直接在main.ts中引入,就可以了,但是不够简洁,没有模块化。
第三种简化:所以最终终方法应该怎么做呢:
我们可以写一个模块,导出一个参数为createApp(App)的函数,所以我们可以这样操作
新建文件ant-design-vue,里面新建index.ts模块
index.ts写一个导出一个参数为createApp(App)的函数,如下
文件ant-design-vue里面的index.ts
import { Button, TimePicker } from "ant-design-vue";
const components = [Button, TimePicker]
// eslint-disable-next-line
export default function setupAtnd(app: any) {
components.forEach((component) => {
app.use(component)
})
}
然后我们需要什么就从这里引入,使用
最后别忘记在main.ts中使用
main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import setupAtnd from "./ant-design-vue/index";
const app = createApp(App)
setupAtnd(app)
app.use(store).use(router).mount('#app')
可能遇到的问题,全部如上操作,控制台还是提示全局引入,可能原因,重装一下
ant-design-vue
我原本用的上面的就是报错…无语子
vite按需加载
vite.config.js文件
import ViteComponents, {
AntDesignVueResolver
} from 'vite-plugin-components';
import vue from '@vitejs/plugin-vue'
export default {
plugins: [
/* ... */
vue(),
ViteComponents({
customComponentResolvers: [AntDesignVueResolver()],
}),
],
};
然后在组件中直接使用
即可。
更多推荐
所有评论(0)