element plus 安装及引入 Vue3

1. 首先用vscode打开cli创建的文件 (cli创建vue3项目在此不赘述)

2..vscode快捷键 CTRL+J 打开终端

3. 安装Element Plus

npm install element-plus--save

加上 --save 选项，可以同时将配置写入 package.json 的 dependencies 字段（生产环境依赖）

4. 引入 Element Plus

在 Vue 中引入 Element Plus 有两种方式，分别是全部引入和局部引入

5. 我认为最舒服的方法(局部引入)

一般的局部引入每次都需要自己将其对应的样式文件同时引入(import一堆)，

例如: import 'element-plus/lib/theme-chalk/el-button.css'

要想省略这个繁琐的步骤

  5.1 首先安装babel-plugin-import   插件可以辅助完成这个工作，

代码  npm install babel-plugin-import --save-dev

(加上 --save-dev 选项，同时将配置写入 package.json 的 devDependencies 字段（开发环境依赖)  

  5.2 然后在 babel.config.js 配置插件

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],//默认自带的,作用:ES6转Es5
  // 新增代码
  plugins: [
    [
      "import",
      {
        libraryName: 'element-plus',
        customStyleName: (name) => {
          return `element-plus/lib/theme-chalk/${name}.css`;
        }
      }
    ]
  ]
}

  5.3 在 main.js 按需引入组件

// main.js

import { createApp } from 'vue'
import App from './App.vue'


// 自动逐一引入
import {
  ElButton
} from 'element-plus'

const app = createApp(App)

// 注册特定组件
app.component(ElButton.name, ElButton)

app.mount('#app')

6. 使用 Element Plus

<template>
  <div>
    <el-button type="primary" @click="handleClick">Primary</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick: function (e) {
      console.log('click', e)
    }
  }
}
</script>

  End: 你会看到一个蓝色的按钮出现在页面上