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

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

废话不多说直接记录

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

        关于vue—cli创建vue3项目引入element plus 按需引入方式的记录_第1张图片

由于我用的是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('unplu

你可能感兴趣的:(vue,vue.js,javascript,前端)