本教材由知了传课辛苦制作而成,仅供学习使用,请勿用于商业用途!如进行转载请务必注明出处!谢谢!

Element-Plus组件库使用

element plus组件库是由饿了么前端团队专门针对vue框架开发的组件库,专门用于电脑端网页的。因为里面集成了很多组件,所以使用他可以非常快速的帮我们实现网站的开发。

安装:

课程中用到的版本是1.2.0,为了跟课程环境保持一致,安装的时候指定版本:

npm install element-plus@1.2.0-beta.3 --save

引入:

引入的时候也是分成两种,一种是全部引入,一种是按需引入。

一、完整引入:

import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import App from './App.vue' const app = createApp(App) app.use(ElementPlus) app.mount('#app')

二、局部引入:

首先需要安装unplugin-vue-components

npm install unplugin-vue-components

1. 配置:

vue.config.js中添加以下配置:

module.exports = { configureWebpack: { plugins: [ require('unplugin-vue-components/webpack')({ /* options */ }), ], }, }

2. 使用:

然后在项目中可以进行使用了。先进行导入,然后进行组件注册,最后再使用:

<template> <el-button>I am ElButton</el-button> </template> <script> import { ElButton } from 'element-plus' export default { components: { ElButton }, } </script>

1461人已阅读,今天你学习了吗?

添加新回复