Vue3入门二

1.EnventBus

事件总线这种方式到底该不该用，或者该如何使用，我觉得在网络上有不同的意见，有人说可以用，有人说这种没法朔源的方法，对大型的程序，完全是一种破坏。

(1) 安装mitt

1

npm install mitt -S

(2) 新建事件总线

1
2
3
4
5
6
7
8
9
10
11
12

/* bus.js */

import mitt from "mitt";

const bus = {}
const emitter = mitt()

bus.$on = emitter.on
bus.$off = emitter.off
bus.$emit = emitter.emit

export default bus

(3) 监听

1
2
3
4
5
6
7
8
9
10

import eventBus from "./bus.js"

export default {
    setup(){
        eventBus.$on("eventname",function(){
            console.log("事件触发了");
        })
    }
}

(4) 触发

1
2
3
4
5
6
7
8

import eventBus from "./bus.js"

export default {
    setup(){
        eventBus.$emit("eventname")
    }
}

注意
这里我倒是没有遇见过，有人遇到过了，就是在使用路由的时候，路由切换，组件销毁的时候，这个消息总线还是在监听，可能是因为组件虽然销毁了，但是原型链还是存在，如果遇到了，可以注意下,类似与参考文章3。

参考文章:
1.Vue 3 中如何优雅的使用eventBus（事件总线） 不借助插件的原生使用方式，还有使用 vue3-eventbus 的方式
2.Vue3使用Mitt替代EventBus 这里是一个完整的例子，从头创建了一个 vue3.0 的项目，但是有些不合理，比如全局挂载的方式，如果不使用this，全局挂载就应该挂载到getInstance上
3.(javascript)使用Vuejs + Vue-router 开发单页面，如何使得切换页面时能销毁原组件？ 这里是关于 setInterval 函数在组件销毁之后还在执行的问题。
4.vue-router切换，组件不销毁

2.组件库

参考文章:
1.2021年最佳VUE3 UI框架推荐 Element UI、Vant、Vuetify
2.在 vue-cli 3 中使用

3.scss

默认创建的项目，不包含scss加载器的，需要手动增加。

1
2
3
4
5
6
7

## 增加预处理器,
## @vue/cli 4.5.15 目前还不支持 sass-loadder 11和12
## 这里要增加sass-loader的版本号 10,否则回报this.getOptions 不是函数的错误
pnpm add sass-loader@10.1.1 sass -D

## Vite创建的项目
pnpm add sass -D

安装之后，还是报错，提示需要webpack，这个可以忽略，直接运行:pnpm serve，就可以了。

参考文章:
1.vue3.0项目增加less/sass
2.CSS 相关
3.使用预处理器 在 webpack 中，所有的预处理器需要匹配对应的 loader。Vue Loader 允许你使用其它 webpack loader 处理 Vue 组件的某一部分。它会根据 lang 特性以及你 webpack 配置中的规则自动推断出要使用的 loader。
4.TypeError: this.getOptions is not a function I had the same problem resolved by downgrading sass-loader to 10.1.1. I am using @vue/cli 4.5.8 that includes webpack@4.46.0.
5.sass-loader
6.Webpack 5 走起! - Loaders(9) - Sass/SCSS
7.vite 配置 scss

4.setup单文件

参考文章：
1.在实验 vue3.2中 的