Vue3+Vuecli局部引入element-plus

81 阅读 0 评论 54 点赞

我是靠谱客的博主漂亮鸡，这篇文章主要介绍Vue3+Vuecli局部引入element-plus，现在分享给大家，希望可以做个参考。

局部引入element-plus

- 安装
- 按需导入
- - 自动导入
- 使用

由于在项目中，想要使用element-ui，但是在使用过程中发现vue3不会直接使用element-ui，而是直接使用element-plus；

安装

复制代码

1
2
3
4
5
6
7
8
9
10
11
# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

按需导入

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

自动导入

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

复制代码

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

由于项目中采用的是vue-cli脚手架，所以要将下方的代码写入到vue.config.js中

复制代码

1
2
3
4
5
6
7
8
9
module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-auto-import/webpack')({ /* options */ }),
      require('unplugin-vue-components/webpack')({ /* options */ }),
    ],
  },
}

使用

复制代码

1
2
3
4
5
6
7
8
9
10
<template>
  <el-button>I am ElButton</el-button>
</template>
<script>
  import { ElButton } from 'element-plus'
  export default {
    components: { ElButton },
  }
</script>