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

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

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

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

案例： 

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

背景：

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

解决：

查看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】

举例：