Vue3+Vuecli局部引入element-plus

安装

# 选择一个你喜欢的包管理器

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

按需导入

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

自动导入

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

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

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

module.exports = {
  configureWebpack: {
    plugins: [
      require('unplugin-auto-import/webpack')({ /* options */ }),
      require('unplugin-vue-components/webpack')({ /* options */ }),
    ],
  },
}

使用

<template>
  <el-button>I am ElButton</el-button>
</template>
<script>
  import { ElButton } from 'element-plus'
  export default {
    components: { ElButton },
  }
</script>

结果：

最后

以上就是漂亮鸡为你收集整理的Vue3+Vuecli局部引入element-plus的全部内容，希望文章能够帮你解决Vue3+Vuecli局部引入element-plus所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。