vue vant移动端组件库和element-uipc端组件库

最新推荐文章于 2024-07-03 11:45:00 发布

m0_59023231

最新推荐文章于 2024-07-03 11:45:00 发布

阅读量544

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_59023231/article/details/124766298

版权

本文介绍了如何在Vue项目中安装和按需引入移动端组件库 vant 和企业级组件库 element-ui。包括 vant 的全部与按需导入方式，以及 element-ui 的全量与按需导入步骤，帮助开发者优化项目体积，提高加载效率。

摘要由CSDN通过智能技术生成

1.vant2移动端组件库

1.1 下载安装vant组件库

cnpm i vant@latest-v2 --save

1.2 在vue项目中main.js导入组件

1.2.1 导入所有组件(不推荐)

	import Vant from 'vant';
	import 'vant/lib/index.css';
	Vue.use(Vant);

然后再组件中直接复制官方文档中的组件代码即可显示

1.2.2 按需导入组件(推荐)

1.2.2.1 安装插件

cnpm i babel-plugin-import --save

1.2.2.2 在根目录的babel.config.js文件中添加plugins字段

module.exports = {
  		presets: [
    			'@vue/cli-plugin-babel/preset'
  		],
  		plugins: [
    			['import', {
      				libraryName: 'vant',
      				libraryDirectory: 'es',
      				style: true
    			}, 'vant']
  		]
	}

1.2.2.3 在main.js中按需导入需要用到的组件

	import { Button, Icon } from 'vant';
	Vue.use(Button);
	Vue.use(Icon);

1.2.2.4 在组件中直接复制官方文档中的组件代码即可显示

	<van-icon name="chat-o"  badge="9" color="#1989fa" size="40"/>

2.element-ui组件库

2.1 下载安装element组件库

cnpm i element-ui --save

2.2 在vue项目中导入组件

2.2.1 导入所有组件

	import ElementUI from 'element-ui';
	import 'element-ui/lib/theme-chalk/index.css';
	Vue.use(ElementUI);

2.2.2 按需导入组件

2.2.2.1 安装babel-plugin-component插件

cnpm i babel-plugin-component --save

2.2.2.2 在babel.config.js文件中添加plugins字段

module.exports = {
  		presets: [
    			'@vue/cli-plugin-babel/preset'
  		],
  		"plugins": [
    			[
      			    "component",
      			    {
        				"libraryName": "element-ui",
        				"styleLibraryName": "theme-chalk"
      			    }
    			]
  		]
	}

2.2.2.3 在main.js中按需导入需要的组件

	import { Button, Switch } from 'element-ui';
	Vue.use(Button);
	Vue.use(Switch);

2.2.2.4 在组件中直接使用组件标签即可

	<el-button type="danger" icon="el-icon-delete" circle></el-button>

2.2.2.5 几个特殊的引用如下：

Vue.use(Loading.directive);

Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;