速通element-plus常用语法

速通element-plus常用语法

element-plus+vue3+vite3 是常见的前端搭建技术栈。element-plus是UI组件库。

参考官网文档：Element Plus (element-plus.org)

5分钟快速搭建element-plus+vue3+vite3项目环境。

1. 安装开发库，创建项目，（前置条件：已安装Node.js）

   # 安装开发环境
   npm install -g create-vite
   # 创建项目
   create-vite my-vue-element-plus-project --template vue  
   # 安装Element Plus
   cd my-vue-element-plus-project
   npm install element-plus
   # 安装自动导入插件
   npm install -D unplugin-vue-components unplugin-auto-import
   

2. 配置项目
   2.1 src/main.js

    // main.ts
    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')
   

   2.2 vite.config.ts

    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()],
        }),
      ],
    })
   
   

3. 编写代码

   src/App.vue

   <script setup>
   import { ref } from 'vue';
   const project_name = ref("Vue3 + Vite + Element Plus");
   </script>
   
   <template>
     <el-container>
       <el-header>
         <h1>我的 {{ project_name }} 项目</h1>
       </el-header>
       <el-main>
         <div>这是一个高效的 {{project_name}} 项目！</div>
       </el-main>
     </el-container>
   </template>
   
   <style scoped>
   
   </style>
   
   

4. 运行

   npm run dev
   

封装组件（父传子小例子）

点击查找想要使用的组件：Overview 组件总览 | Element Plus (element-plus.org)

1. 在components/MyComponent.vue 粘贴里面。

   <template>
     <div>
       <el-button @click="show = !show">Click Me</el-button>
   
       <div style="margin-top: 20px">
         <el-collapse-transition>
           <div v-show="show" style="height: 400px">
             <div class="transition-box" v-for="transitionName in transitionNames" :key="transitionName" :class="transitionName">
               {{ transitionName }}
             </div>
           </div>
         </el-collapse-transition>
       </div>
     </div>
   </template>
   
   <script lang="ts" setup>
   import { ref, defineProps } from 'vue'
   
   // 定义 props 来接收父组件传入的 transitionNames 数组
   const props = defineProps({
     transitionNames: Array<string[]>,
   })
   
   const show = ref(true)
   </script>
   
   <style scoped>
   .transition-box {
     margin-bottom: 10px;
     width: 200px;
     height: 100px;
     border-radius: 4px;
     background-color: #409eff;
     text-align: center;
     color: #fff;
     padding: 40px 20px;
     box-sizing: border-box;
     margin-right: 20px;
   }
   </style>
   
   
   

2. 在App.vue引用自己的组件（如果需要传参，按vue3语法props传入）
   注意：父组件在调用组件，使用：绑定数据传入, 传入的是=号后面引号里面的参数。传入的是变量，不是字符串。

   <script setup>
   import { ref } from 'vue';
   import myComponent from './components/MyComponent.vue'
   const project_name = ref("Vue3 + Vite + Element Plus");
   const transition_list = ref(['el-collapse-transition1', 'el-collapse-transition2'])
   
   </script>
   
   <template>
     <el-container>
       <el-header>
         <h1>我的 {{ project_name }} 项目</h1>
       </el-header>
       <el-main>
         <div>这是一个高效的 {{project_name}} 项目！</div>
         <myComponent :transition-names="transition_list"></myComponent>
       </el-main>
     </el-container>
   </template>
   
   <style scoped>
   
   </style>