关于vue—cli创建vue3项目引入element plus 按需引入方式的记录

         虽然说工作中一直使用的vue2 但是在空闲之余也学习学习vue3，在断断续续的学习中，打算用element框架，但是在按需引入的时候频频报错，如果不按需引入全局引入的话又导致项目体积过大，后在查阅相关资料之后顺利的解决，再次做以记录。

废话不多说直接记录

1、根据element plus 官网指引下载相关依赖

        

由于我用的是vue cli 不是vite所以我直接用的内部包管理器，不用内部管理器的也可以用npm 等方式引入

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

2、在官网中提供了一种自动按需引入的方式，就不用像VUE2一样解构出来某一个元素，而后用app.use(xxx)的方式进行注入了，而是可以直接在需要用的组件中使用，极为方便

        首先在vue.config.js进行Webpack的配置，（这里也是我卡住报错的原因，之前我一直认为是像vue2一样创建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 = {
    configureWebpack: {
        plugins: [
            AutoImport({
                resolvers: [ElementPlusResolver()],
            }),
            Components({
                resolvers: [ElementPlusResolver()],
            }),
        ],
    }
}

之后就可以在项目中进行使用了，可以说比vue2还方便了不少。

 

vite的使用方法也差不多，详情可以去撸element plus的官网文档附上传送门

element vue3传送门