16-Element组件库
Element官网(基于Vue2框架):组件 | Element
Element-Plus官网(基于Vue3框架):Image 图片 | Element Plus (element-plus.org)
Element组件库
1)安装ElementUI组件库,推荐使用 npm 的方式安装,它能更好地和 webpack 打包工具配合使用
npm i element-ui -S
2)引入ElementUI组件库,在main.js文件下
import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import App from './App.vue'; Vue.use(ElementUI); new Vue({ el: '#app', render: h => h(App) });
3)访问官网,复制组件代码进行调整
Element-Plus组件库
1)安装ElementUI组件库,使用包管理器(如 NPM、Yarn 或 pnpm)安装 Element Plus
# NPM $ npm install element-plus --save # Yarn $ yarn add element-plus # pnpm $ pnpm install element-plus
2)引入ElementUI组件库,在main.js文件下
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')
3)访问官网,复制组件代码进行调整
案例:在Vue2框架下,使用Element组件库使用相应组件功能
ElementView.vue文件
<template> <div> <!-- button按钮 --> <el-row> <el-button>默认按钮</el-button> <el-button type="primary" v-on:click="primary">主要按钮</el-button> <el-button type="success" v-on:click="success">成功按钮</el-button> <el-button type="info" v-on:click="info">信息按钮</el-button> <el-button type="warning" v-on:click="warning">警告按钮</el-button> <el-button type="danger" v-on:click="danger">危险按钮</el-button> </el-row> </div> </template> <script> export default { name: 'ElementView', data() { return { msg: 'Hello World' } }, methods: { primary() { console.log("这是主要按钮的点击事件...") }, success() { console.log("这是成功按钮的点击事件...") }, info() { console.log("这是信息按钮的点击事件...") }, warning() { console.log("这是警告按钮的点击事件...") }, danger() { console.log("这是危险按钮的点击事件...") } } } </script> <style> </style>
App.vue文件
<template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <ElementView></ElementView> </div> </template> <script> import ElementView from "@/views/element/ElementView.vue"; export default { name: 'App', components: { ElementView }, data() { return { msg: 'Welcome to Your Vue.js App' } } } </script> <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>