vue3、ts使用ant-design-vue
1.安装yarnadd ant-design-vue@next# ORnpm i --save ant-design-vue@next2.使用在main.ts文件中引入import { createApp } from "vue";import App from "./App.vue";import Antd from 'ant-design-vue';import 'ant-design-vue
·
1.安装
yarn add ant-design-vue@next
# OR
npm i --save ant-design-vue@next
2.使用
在main.ts文件中引入
import { createApp } from "vue";
import App from "./App.vue";
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import router from "./router";
import store from "./store";
createApp(App)
.use(store)
.use(router)
.use(Antd)
.mount("#app");
3.按需加载
安装babel插件
cnpm install babel-plugin-import --save-dev
新建plugins/Ant/index.ts文件,
按需引用需要加载的组件
import { Button, Input, Steps, Form, Select, Row, Radio, DatePicker, Col, Icon, Checkbox, Switch } from 'ant-design-vue'
const ant = {
install(Vue: any) {
Vue.component(Button.name, Button)
Vue.component(Input.name, Input)
Vue.component(Steps.name, Steps)
Vue.component(Form.name, Form)
Vue.component(Select.name, Select)
Vue.component(Row.name, Row)
Vue.component(Radio.name, Radio)
Vue.component(DatePicker.name, DatePicker)
Vue.component(Col.name, Col)
Vue.component(Icon.name, Icon)
Vue.component(Checkbox.name, Checkbox)
Vue.component(Switch.name, Switch)
}
}
export default ant
修改bable.config.js
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
plugins: [
[
"import",
{ libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
]
]
};
在main.ts文件中修改,引入plugins/Ant下的文件
import { createApp } from "vue";
import App from "./App.vue";
import Antd from './plugins/Ant'
import 'ant-design-vue/dist/antd.css';
import router from "./router";
import store from "./store";
createApp(App)
.use(store)
.use(router)
.use(Antd)
.mount("#app");
使用ant组件
<a-button type="primary">按钮</a-button>
查看效果
更多推荐
已为社区贡献6条内容
所有评论(0)