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文件：

<code>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()]

})

]

}

}

1.6、使用【案例：消息提示】

element-plus组件使用：Message 消息提示 | Element Plus

案例： 

2、启动Vue项目，报错：TypeError: AutoImport is not a function

背景：

        在做网页时，网页的消息提示处理，我是引入element-plus的，并且是按需引入的。我第一天，按需引入后是正常的，但是第二天，启动项目，突然就开始报错：TypeError: AutoImport is not a function~

解决：

查看<code>unplugin-auto插件版本：npm list unplugin-auto-import

回退插件版本：npm install unplugin-auto-import@0.16.1

回退后，再启动项目，又报了另一个错:ERROR  TypeError: Components is not a function

这是unplugin-vue-components版本过高~

版本回退：npm install unplugin-vue-components@0.25.2

以上就解决了

3、vue3中使用router【不同于vue2】

vue2中的使用：

vue3中的使用：安装VueRouter4:npm install vue-router@4

不安装vueRouter4也可以这样写：

4、盒子中如何放置照片

盒子中放照片，无非就是这几种情况：

以照片的最短边填满盒子的对应边，而较长的边就不展示，裁掉以照片的最长边填满盒子的对应边，而较短的边多余其他区域为背景色

例如有一个div，div下有一个img，此时，我们需要：

给div一个确定的宽、高；设置img的宽高都为100%；给div还需要设置一个值：overflow:hidden，表示超出容器的部分会隐藏；给img设置一个值：object-fit:cover / contain【cover是上述的情况1，contain是情况2】

举例：