Vue3 引入Element Plus

Element Plus 是为适配 Vue3 而对 Element UI 进行重构后产生的前端组件库,包含丰富的基础组件

下面先贴出 官方文档,里面的介绍已经十分全面和详细,大家遇到的很多问题都可以在上面找到答案

假设现在我们已经用 vue-cli 4 工具创建了一个 Vue3 项目,然后怎么在项目中引入 Element Plus 呢?

注意,这里必须是用 vue-cli 4 创建的 Vue3 项目,否则后面会报错,首先介绍一下默认生成的目录结构

+ demo
    + node_modules(存放第三方模块)
    + public(存放静态文件)
        - favicon.ico(图标)
        - index.html (页面模板)
    + src(我们自己写的文件一般放在这个文件夹下)
        + assets(存放资源文件)
        + components(存放公共组件)
        + router.js(路由管理:Router)
        + store.js (状态管理:Vuex)
        + views(存放视图组件)
        - App.vue(页面入口文件)
        - main.js(程序入口文件)
    - package.json(项目配置文件)
    - package-lock.json(项目配置文件)
    - babel.config.js(babel 配置文件)
    - README.md(项目说明文档)
    - ...(其它配置文件)

1、安装 Element Plus
npm 是 Node 的包管理工具,我们可以通过 npm 安装 Element Plus

加上 --save 选项,可以同时将配置写入 package.json 的 dependencies 字段(生产环境依赖)

npm install --save element-plus

2、引入 Element Plus
在 Vue 中引入 Element Plus 有两种方式,分别是全部引入和局部引入,下面将会逐一介绍

(1)全部引入

在 main.js 中引入并注册全部组件,即可在其它页面中直接使用全部组件

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 新增代码:引入全部组件及样式
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

const app = createApp(App)

app.use(store)
app.use(router)

// 新增代码:注册全部组件
app.use(ElementPlus)

app.mount('#app')


采用这种引入方式,不管是否使用到的组件,都会全部加载进来,显然不是一个好的办法

(2)局部引入

在 main.js 中引入并注册特定组件,在其它页面中只可使用特定组件

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 新增代码:引入特定组件及样式
import {
  ElButton
} from 'element-plus'
import 'element-plus/lib/theme-chalk/el-button.css'

const app = createApp(App)

app.use(store)
app.use(router)

// 新增代码:注册特定组件
app.component(ElButton.name, ElButton)

app.mount('#app')


采用这种引入方式,可以保证只引入需要的组件(按需引入)

但每引入一个组件,都要手动将其对应的样式文件同时引入,未免过于麻烦


babel-plugin-import 插件可以辅助完成这个工作,首先安装 babel-plugin-import 插件

加上 --save-dev 选项,同时将配置写入 package.json 的 devDependencies 字段(开发环境依赖)

npm install --save-dev babel-plugin-import


然后在 babel.config.js 配置插件

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  // 新增代码
  plugins: [
    [
      "import",
      {
        libraryName: 'element-plus',
        customStyleName: (name) => {
          return `element-plus/lib/theme-chalk/${name}.css`;
        }
      }
    ]
  ]
}


接着在 main.js 按需引入组件

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 新增代码:引入特定组件
// 此时会自动引入对应的样式文件,无需再手动逐一引入
import {
  ElButton
} from 'element-plus'

const app = createApp(App)

app.use(store)
app.use(router)

// 新增代码:注册特定组件
app.component(ElButton.name, ElButton)

app.mount('#app')


最后记得使用 npm run serve 重启应用,即可在其它页面中使用特定组件


3、使用 Element Plus
在安装和引入 Element Plus 后,我们就可以在页面使用 Element Plus 中的组件啦

<template>
  <div>
    <el-button type="primary" @click="handleClick">Primary</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick: function (e) {
      console.log('click', e)
    }
  }
}
</script>


这时,如果你能看到一个蓝色的按钮出现在页面上,就说明已经配置成功

接下来就可以尽情享受 Element Plus 带给你的高效开发体验
————————————————
版权声明:本文为CSDN博主「半虹」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/wsmrzx/article/details/115775025

  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值