仿小红书网站——记录（前端-Vue3）

龙洋静

已于 2024-03-27 08:55:13 修改

阅读量1.8k

点赞数 8

分类专栏：前端 Vue 文章标签： vue.js bug 前端

于 2024-03-27 08:54:52 首次发布

本文链接：https://blog.csdn.net/LYJbao/article/details/136360944

版权

前端同时被 2 个专栏收录

12 篇文章

订阅专栏

Vue

10 篇文章

订阅专栏

本文介绍了在Vue3项目中使用element-plus的全量引入和按需引入方法，包括安装、配置以及遇到的错误如TypeError的解决过程。还提到了VueRouter在Vue3中的使用差异和图片填充盒子的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、消息提示——element plus按需引入

1.1、背景

element-ui是适用于vue2，element-plus适用于vue3，我的这个项目是使用的vue3~

1.2、安装命令：npm install element-plus --save

1.3、在package.json中检查是否安装成功：

1.4、全量引入：修改main.js文件：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(router).use(ElementPlus).mount('#app')

1.5、按需引入

注：按需引入时，就不用修改main.js文件了！！！！

安装自动引入的插件：npm install -D unplugin-vue-components unplugin-auto-import

修改vue.config.js文件为下列代码：

// vue.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 = {
  outputDir: './build',
  // 和webpapck属性完全一致，最后会进行合并
  configureWebpack: {
    resolve: {
      alias: {
        components: '@/components'
      }
    },
    //配置webpack自动按需引入element-plus，
      plugins: [
        AutoImport({
          resolvers: [ElementPlusResolver()]
        }),
        Components({
          resolvers: [ElementPlusResolver()]
        })
      ]
  }
}