一、Element Plus

基于 Vue 3，面向设计师和开发者的组件库

二、安装

使用包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

浏览器直接引入

<head>
  <!-- Import style -->
  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
  <!-- Import Vue 3 -->
  <script src="//unpkg.com/vue@3"></script>
  <!-- Import component library -->
  <script src="//unpkg.com/element-plus"></script>
</head>

三、使用

完整引入

// 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')

按需导入

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

然后把下列代码插入到你的 Vite 的配置文件中

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

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

四、使用Vite&Element Plus编写一个页面

4.1 初始化

使用vite创建一个模板

npm create vite@latest

安装element

npm install element-plus --save

4.2 引入element-plus

修改src/main.js文件引入element-plus

import { createApp } from 'vue'
import './style.css'
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')

修改全局样式src/style.css

#app {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0;
}

4.3 自定义组件

RabbHeader.vue

<script setup>

</script>

<template>
 <div>
    <el-link href="https://lazyrabbit.xyz" target="_blank" ype="primary">主页</el-link>
    <el-link type="primary">关于</el-link>
  </div>
</template>

<style scoped>
.el-link {
  margin-right: 8px;
}
.el-link .el-icon--right.el-icon {
  vertical-align: text-bottom;
}
</style>

RabbMain.vue

<script setup>

</script>

<template>
    <el-carousel height="150px">
      <el-carousel-item v-for="item in 4" :key="item">
        <h3 class="small justify-center" text="2xl">{{ item }}</h3>
      </el-carousel-item>
    </el-carousel>
  <div class="rabb-timeline">
   <el-timeline style="max-width: 600px">
    <el-timeline-item timestamp="2018/4/12" placement="top">
      <el-card>
        <h4>Update Github template</h4>
        <p>Tom committed 2018/4/12 20:46</p>
      </el-card>
    </el-timeline-item>
      <el-timeline-item timestamp="2018/4/3" placement="top">
        <el-card>
          <h4>Update Github template</h4>
          <p>Tom committed 2018/4/3 20:46</p>
        </el-card>
      </el-timeline-item>
      <el-timeline-item timestamp="2018/4/2" placement="top">
        <el-card>
          <h4>Update Github template</h4>
          <p>Tom committed 2018/4/2 20:46</p>
        </el-card>
      </el-timeline-item>
      <el-timeline-item timestamp="2018/4/3" placement="top"/>
    </el-timeline>
  </div>
     
</template>

<style scoped>
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.rabb-timeline{
  margin-top: 20px;
}
</style>

RabbFooter.vue

<script setup>

</script>

<template>
 <div>
    <el-divider />
    <div class="rabb-copyright">
      Rabb &copy; 2024
    </div>
  </div>
</template>

<style scoped>
.rabb-copyright {
  text-align: center;
}
</style>

4.4 根组件

App.vue

<script setup>
import RabbHeader from './components/header/RabbHeader.vue'
import RabbMain from './components/main/RabbMain.vue'
import RabbFooter from './components/footer/RabbFooter.vue'
</script>

<template>
<div class="common-layout">
    <el-container>
      <el-header>
        <rabb-header/>
      </el-header>
      <el-main><rabb-main/></el-main>
      <el-footer><rabb-footer/></el-footer>
    </el-container>
    </div>
</template>

<style scoped>
</style>

4.5 启动

npm run dev