十分钟带你入门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 开发环境

1. 需要安装Node.js，本文使用包含Nodejs的web版的vscode在线开发环境进行演示，可以参考《使用树梅派搭建Golang、Python、NodeJs的开发服务器》

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

   

3. 使用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
   

4. 安装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
   

5. 安装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开发一个省市联动页面

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

2. 打开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
   

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

   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
   

4. 先把项目运行起来

   jagitch@4d7a018f5ea9:element-plus-province-city$ npm run dev -- --host 0.0.0.0 --port 8888
   
   > element-plus-province-city@0.0.0 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
   

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

6. 修改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')
   

7. 修改项目根目录下的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))
       }
     }
   })
   

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

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

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

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

10. 接下来我们直接在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>
    

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

    

总结

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

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

推荐阅读

1. 十分钟带你入门Node.js 开发

2. 教你如何1秒安装一个Linux系统（ubuntu,debian,centos） 比虚拟机安装系统省时省心省力

3. 如何将github开源项目发布

4. mysql开发环境的搭建与基本使用

5.【Git从入门到精通】系列课程03：一分钟让你成为开源的一分子/使用github托管我们的代码