组件库引入

组件库引入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-vue1.7.81.2 引入main.js或main.ts引入ant-design组件库一次性导入所有组件。一次性引入所有组件会增加代码包体积因此不推荐这种做法。importVuefromvue;importAntdfromant-design-vue;important-design-vue/dist/antd.css;importAppfrom./App.vue;importrouterfrom./router;importstorefrom./store;Vue.config.productionTipfalse;Vue.use(Antd);newVue({router,store,render:(h)h(App),}).$mount(#app);2 vue2项目引入vant组件库请见Vant组件-三、安装导入Vant组件库 包括以下3种导入方式完整自动按需引入组件全局导入局部导入手动按需引入组件全局注册局部注册导入所有组件3 vue2项目引入Element UI组件库首先用npm i element-ui -S安装然后有两种主要引入方式。全局引入是在main.js里import ElementUI from element-ui再import element-ui/lib/theme-chalk/index.css最后注册全局组件Vue.use(ElementUI)。按需引入需要先装babel-plugin-component插件然后在main.js里import { 组件名 } from element-ui再Vue.use(组件名)。Element UI 的按需引入其实包括两种.一种是用 babel-plugin-component 插件自动引入插件会帮你处理组件和样式官网主要介绍这种。另一种是手动按需引入不用插件直接从 element-ui/lib 导入单个组件和对应的 CSS 文件官网没重点提但实际可以这么用。官网还提供了 Vue CLI 插件可以一键创建集成 Element 的项目。