组件库引入

组件库引入

1 vue2项目引入ant-design组件库

Ant Design是蚂蚁集团推出的企业级UI设计体系，其Vue实现版本ant-design-vue及React原生组件库为开发者提供完整的解决方案。

1.1 安装

vue2项目安装ant-design组件库，高版本会提示vue版本冲突，建议安装1.7.8
安装命令：npm i --save ant-design-vue@1.7.8

1.2 引入

main.js或main.ts引入ant-design组件库，一次性导入所有组件。

一次性引入所有组件会增加代码包体积，因此不推荐这种做法。

import Vue from 'vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';
import App from './App.vue';
import router from './router';
import store from './store';Vue.config.productionTip = false;
Vue.use(Antd);new Vue({router,store,render: (h) => h(App),
}).$mount('#app');

2 vue2项目引入vant组件库

请见Vant组件-三、安装导入Vant组件库 ，包括以下3种导入方式（完整）

• 自动按需引入组件
  • 全局导入
  • 局部导入
• 手动按需引入组件
  • 全局注册
  • 局部注册
• 导入所有组件