1.1. 安装

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

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

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

image-20220616205326158

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

1.2. 引入

1.2.1. 完整导入

[!tip]

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

安装好了后还需要导入到项目中,修改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')

1.2.2. 按需导入

自动导入【推荐】

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

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

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

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

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

1.3. 快速搭建

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

image-20220617092212791

1.4. 手动搭建

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

[!note]

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

1.5. 使用组件

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

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

1.6. 图标

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>
Copyright © d4m1ts 2022 all right reserved,powered by Gitbook该文章修订时间: 2022-06-19 21:48:56

results matching ""

    No results matching ""