十分钟带你入门Element Plus UI框架开发

在这里插入图片描述

概览

Element Plus 是一个基于Vue 3的一个Web UI框架，它支持国际化、拥有众多设计精美的UI组件，可以满足我们项目开发中大部分组件的需求，它支持按需记载从而减小部署包的大小，加快客户端的访问速度。使用Element Plus UI框架，可以极大的提高项目的开发效率，并且我们可以定制它的样式和逻辑满足我们的需求。所以作为一名web编程人员，我们有必要学习一下Element Plus UI框架，增加我们的技术积累。

Element Plus 与 Element UI

Element Plus是基于最新的Vue 3开发的，而Element UI是基于Vue 2，可以说Element Plus是Element UI的升级版。目前Vue官方已停止了Vue 2的开发，所以Element UI迟早会退出历史的舞台，所以初学者直接学习Element Plus就可以了。

Element Plus组件库速览

Element Plus的组件分为基础组件、配置组件、Form表单组件、数据显示组件、导航组件、反馈组件、其他。常见的组件如下图所示：

在这里插入图片描述

搭建Element Plus 开发环境

需要安装Node.js，本文使用包含Nodejs的web版的vscode在线开发环境进行演示，可以参考《使用树梅派搭建Golang、Python、NodeJs的开发服务器》
浏览器访问http://127.0.0.1:8080/?folder=/home/coder/workspace打开在线vscode开发环境

使用npm安装vue 3

jagitch@4d7a018f5ea9:workspace$ npm install vue@latest

added 20 packages in 2s

3 packages are looking for funding
  run `npm fund` for details

安装Element Plus

jagitch@4d7a018f5ea9:workspace$ npm install element-plus --save

added 23 packages in 3s

8 packages are looking for funding
  run `npm fund` for details

安装Element Plus按需导入所需的插件

jagitch@4d7a018f5ea9:workspace$ npm install -D unplugin-vue-components unplugin-auto-import

added 56 packages in 2s

24 packages are looking for funding
  run `npm fund` for details

实践出真知：使用Element plus UI开发一个省市联动页面

浏览器访问http://127.0.0.1:8080/?folder=/home/coder/workspace打开在线vscode开发环境

打开vscode的终端，输入命令创建Vue 3 项目

jagitch@4d7a018f5ea9:workspace$ npx create-vue element-plus-province-city

Vue.js - The Progressive JavaScript Framework

✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in /home/coder/workspace/element-plus-province-city...

Done. Now run:

  cd element-plus-province-city
  npm install
  npm run dev

进入项目文件夹，安装依赖（安装时加载图标可能会卡一段时间，耐心等待一段时间）

jagitch@4d7a018f5ea9:workspace$ cd element-plus-province-city
jagitch@4d7a018f5ea9:element-plus-province-city$ npm install

added 27 packages in 3m

4 packages are looking for funding
  run `npm fund` for details

先把项目运行起来

jagitch@4d7a018f5ea9:element-plus-province-city$ npm run dev -- --host 0.0.0.0 --port 8888

> [email protected] dev
> vite --host 0.0.0.0 --port 8888

  VITE v5.2.12  ready in 260 ms

  ➜  Local:   http://localhost:8888/
  ➜  Network: http://172.27.0.2:8888/
  ➜  press h + enter to show help

打开浏览器输入http://127.0.0.1:8888即可看到我们的web页面了

在这里插入图片描述

修改src/main.js文件，配置Element Plus的UI显示为中文（默认是英文）

import {
      
       createApp } from 'vue'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

import App from './App.vue'

const app = createApp(App)

app.use(ElementPlus, {
      
      
    locale: zhCn,
})

app.mount('#app')

修改项目根目录下的vite.config.js，配置Element Plus按需导入

import {
      
       fileURLToPath, URL } from 'node:url'

import {
      
       defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {
      
       ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
      
      
  plugins: [
    vue(),
    AutoImport({
      
      
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      
      
      resolvers: [ElementPlusResolver()],
    })
  ],
  resolve: {
      
      
    alias: {
      
      
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

在src目录创建省市数据文件

jagitch@4d7a018f5ea9:element-plus-province-city$ touch src/data.json

在data.json中输入省市数据，数据太多，这里只输入北京市的，如需全部数据的请在本博客上方下载源码包，源码包总包含全部的代码和数据

[
    {
      
      
        "value": "北京",
        "label": "北京",
        "children": [
            {
      
      
                "value": 110100,
                "label": "北京"
            }
        ]
    }
]

接下来我们直接在src/App.vue这个文件中开发我们的页面，代码如下

<script setup>
import {
      
       ref } from 'vue'
import data from './data.json'
const value = ref([])

const props = {
      
      
  expandTrigger: 'hover',
}

const handleChange = (value) => {
      
      
  console.log(value)
}
</script>
<template>
  <div class="common-layout">
    <el-container>
      <el-header>Element Plus省市联动Demo</el-header>
      <el-main>
        <el-cascader v-model="value" :options="data" :props="props" @change="handleChange" />
      </el-main>
      <el-footer>
        <p>Powered by jagitch</p>
      </el-footer>
    </el-container>
  </div>
</template>

<style scoped>
.el-header {
      
      
  font-size: 1.2em;
  font-weight: bold;
  color:#409EFF;
  text-align: center;
  align-content: center;
}
.el-main {
      
      
  height: calc(100vh - 120px);
}

.el-footer {
      
      
  display: flex;
  align-content: center;
  vertical-align: center;
  align-self: center;
}
</style>

接着返回浏览器查看我们之前运行项目的页面，发现已经按照我们的预期显示了，这是因为create-vue这个脚手架创建的项目支持热加载功能，使用npm run dev后，只要代码有修改，它就是重新编译并刷新浏览器，这样我们在修改代码时就可以实时看到页面的效果了，极大地提高了项目的开发效率。项目运行结果如下图所示：

总结

本文介绍了如何在Vue 3项目中使用Element Plus UI框架进行页面开发，系统讲解了Element Plus的安装、按需导入相关插件的安装以及在Vite.config.js中进行插件的配置；Element Plus支持国际化，它默认的语言时英语，所以本文也演示了如何在main.js中将Element Plus的显示语言设置为中文。最后通过实践的方式，从项目搭建开始，演示了在项目中使用Element Plus的级联组件完成了省市的选择。

如果本文对您有所帮助和启发，请用关注和点赞来鼓励我，我会持续带来更多有价值的内容！