七、Vue3基础之七

---

一、Vue3定义全局函数和变量

由于vue3没有Prototype属性，使用app.config.globalProperties代替去定义变量和函数。
Vue2

Vue.prototype.$http => () => {}
1

vue3

const app = createApp({})
app.config.globalProperties.$http = () => {}
1
2

在vue3移除了过滤器，我们可以使用全局函数代替Filters

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import mitt from 'mitt'

const Mit = mitt()

const app = createApp(App)

declare module 'vue' {
    export interface ComponentCustomProperties {
        $Bus: typeof Mit
    }
}

app.config.globalProperties.$Bus = Mit

// 自定义一个全局过滤器$filters，里面有一个函数format
type Filter = {
    format:(str:string) => string
}
declare module '@vue/runtime-core'{
    export interface ComponentCustomProperties{
        $filters:Filter
    }
}

app.config.globalProperties.$filters = {
    format(str:string):string {
        return `'888'.${str}`
    }
}
// 自定义全局过滤器结束


app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

App.vue

<template>
    <div>
        <!-- 这里来应用全局过滤器了 -->
        {{$filters.format('aaa')}}
    </div>
    
</template>

<script setup lang="ts">
import A from './components/A.vue'

</script>

<style lang="scss" scoped>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

二、Vue3插件

在使用createApp()初始化Vue应用程序后，你可以通过use()方法将插件添加到你的应用程序中。
比如element的Message插件，点一下弹出消息框，封装一个全局的插件，在vue的任意组件中都可直接调用。
在src下components下建一个Loading的目录，下面建index.ts和index.vue
index.ts 建插件

import type { App, VNode } from 'vue'
import Loading from './index.vue'
import { createVNode, render } from 'vue'

export default{
    install(app:App){
        // 将Loading作为一个虚拟DOM加载进来VNode
        const Vnode:VNode = createVNode(Loading)
        // 将Vnode渲染到body上
        render(Vnode, document.body)
        app.config.globalProperties.$loading = {
            show:Vnode.component?.exposed?.show,
            hide:Vnode.component?.exposed?.hide
        }
        // app.config.globalProperties.$loading.show()
        console.log(Vnode)
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

index.vue 插件用到的模板

<template>

    <div v-if="isShow" class="loading">
         Loading......
    div>

template>

<script setup lang='ts'>
import { ref, reactive } from 'vue'
const isShow = ref<boolean>(false)

const show = () => isShow.value = true
const hide = () => isShow.value = false

// 这样才能在插件中拿到 start
defineExpose({
    isShow,
    hide,
    show
})
// end

script>

<style lang='scss' scoped>
.loading{
    background-color: black;
    opacity: 0.8;
    font-size: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    color: white;
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

main.ts引入插件

import { createApp } from 'vue'
import App from './App.vue'
// 插件 start
import Loading from './components/Loading'
// end

const app = createApp(App)



// 将插件加载进vue实例中 start
app.use(Loading)
// end

app.mount('#app')

// 编写ts loading声明文件放置报错和智能提示 start
type Lod = {
    show: () => void,
    hide: () => void
}

declare module '@vue/runtime-core'{
    export interface ComponentCustomProperties{
        $loading: Lod
    }
}
// end
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

App.vue在组件中使用这个全局插件

<template>
    <div>   
    div> 
template>

<script setup lang="ts">
import { ref,getCurrentInstance } from 'vue'

// 通过获取组件实例来获取绑定到全局组件的插件 start
const instance = getCurrentInstance()
instance?.proxy?.$loading.show()

setTimeout(()=>{
    instance?.proxy?.$loading.hide()
}, 2000)

// end
script>

<style lang="scss" scoped>
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

三、了解UI库

ElementPlus、Ant Design Vue、Iview、Vant移动端
安装ElementPlus

npm install element-plus --save
1

如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型。
其他的参照官方文档即可。

四、Scoped和样式穿透

样式穿透主要用于修改很多vue常用的组件库（element, vant, AntDesign）,虽然配好了样式但是需要更改其他的样式，就需要用到样式穿透。

Scoped原理
vue中的scoped通过在DOM结构以及css样式上加唯一不重复标记，以保证唯一。
App.vue

<template>
    <div>
        <el-input v-model="input" placeholder="Please input" />
    div>

template>

<script setup lang="ts">
import { ref } from 'vue'
const input = ref('')
script>

<style lang="scss" scoped>
// 这里就使用到了样式穿透
:deep(.el-input__inner){
    background-color: yellowgreen;
}
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

五、css style新特性

5.1 插槽选择器

A.vue

<template>
    子组件A.vue
    <slot>slot>
template>

<script setup lang='ts'>

script>

<style lang='scss' scoped>
// 这样来使用父组件中定义的样式
:slotted(.a){
    color: yellowgreen;
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

App.vue

<template>
    <A>
        
        <div class="a">App.vue中定义的divdiv>
    A>
template>

<script setup lang="ts">
import A from './components/A.vue'
script>

<style lang="scss" scoped>

style>

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

5.2 全局选择器

App.vue

<template>
    <A>
        
        <div class="a">App.vue中定义的divdiv>
    A>

    <B>B>
template>

<script setup lang="ts">
import A from './components/A.vue'
import B from './components/B.vue'
script>

<style lang="scss" scoped>
// 全局css样式
:global(div){
    color: rebeccapurple;
}
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

5.3 动态css

A.vue

<template>
    <div class="box">
        子组件A.vue
    div>
template>

<script setup lang='ts'>
import { ref } from 'vue'
const color = ref('yellow')
script>

<style lang='scss' scoped>
.box{
    // 动态css
    color: v-bind(color);
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

5.4 css module

<template>
    <div :class="[$style.box, $style.border]">
        子组件A.vue
    div>
template>

<script setup lang='ts'>
import { ref } from 'vue'
const color = ref('blue')
script>

<style module>
.box{
    color: v-bind(color);
}
.border{
    border: 1px soled yellowgreen
}
style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

六、Vue3集成Tailwind CSS

Tailwind CSS是一个由js编写的CSS框架，他是基于postCss去解析的。
写类名编辑样式

七、vue开发移动端

开发移动端最主要的就是适配各种手机。
vw 视口的最大宽度，1vw等于视口宽度的百分之一
vh 视口的最大高度，1vh等于视口高度的百分之一
安装依赖：将px转换成vw和vh

npm install postcss-px-to-viewport -D
1