Element-plus基础

安装

创建好脚手架项目后，进入到相关的目录，使用如下的命令，可以安装element plus

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

安装好之后，在package.json文件中会存在element-plus

也可以用cdn的方式引入，这里就不写了，如果有需要再去看官方文档

引入

完整导入

提示

如果对打包后的文件大小不是很在乎，那么使用完整导入会更方便

安装好了后还需要导入到项目中，修改src/main.js，添加2行引入代码和1行加载代码，如下：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// 引入element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(router).use(ElementPlus).mount('#app')

按需导入

自动导入【推荐】

需要使用额外的插件来导入要使用的组件；

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

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

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

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

Webpack

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')

module.exports = {
  // ...
  plugins: [
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

快速搭建

官方提供了Vite 模板，搭建看看效果，是我想要的东西；回头再来看看Vite

手动搭建

vue create hello-vue
cd hello-vue
vue add element-plus
vue add router

备注

add组件的时候，都会覆盖App.vue，需要自己调整，而且搭建出来的是原生的，布局什么的都需要自己去搞，建议还是用上面那个直接的模板，然后再添加router进去！！！

使用组件

完整参考：https://element-plus.gitee.io/zh-CN/component/button.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95

需要什么直接复制代码即可

图标

• 图标合集

Element Plus 提供了一套常用的图标集合。

安装：

npm install @element-plus/icons-vue

注册所有图标：

使用vue add添加组件的情况下，在@plugins/element.js中添加如下代码进行注册：

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 加入代码点1
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

export default (app) => {
  app.use(ElementPlus)
  // 加入代码点2
  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
  }
}

然后就可以复制有图标的组件了，基础语法如下：

<el-icon :size="size" :color="color">
      <Edit />
</el-icon>