【vue3】02. 跟着官网学习vue3

每日鸡汤：每个你想要学习的念头，都是为了的自己向你求救

目录

前言

一、createApp 应用实例

index.html

main.js

app.vue

二、应用配置

1. app.config

2.（ 知识延伸）全局变量的ts提示

总结

---

前言

前篇 我们跟着官网快速上手简单的搭建了一个项目，使用了vue的外部脚本，我们继续跟着官网学习基础部分，再一次重申一下，任何框架的官网都是我们学习技术的第一资料来源

---

一、createApp 应用实例

在我们用官网的明令新建的vue项目中，有一个main.js，文件，其中代码如下

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

import './assets/main.css'

createApp(App).mount('#app')

这里面，我们就用到了createApp方法，一个项目通常只有一个实例（如官网所说也可以有多个应用实例，但是我参与的项目没有遇到过，这个先不考虑）

index.html

让我们小白来重新看一下这个代码的逻辑，你可能好奇#app这个元素在哪里？

—— 在我们的项目根目录下面的index.html中（不要觉得这个问题很愚蠢，因为我最开始接触前端的时候连这个也不知道）

index.html是构建项目自动生成的，很简单，它是一个模版，和我们之前手动写的1.html一个道理，我们启动npm run dev，访问的根目录就是这个index.html，这个模版中引用了，src/main.js这也就是为什么，我们在main.js中用createApp创建vue实例，因为main.js在index.html中被引用，相当于整个项目的入口

main.js

啰嗦了一大堆，主要是想让你知道，main.js 直整个项目的入口，在这个文件中，我们可以做很多事情，我们可以引用全局的组件，使用vue-router等 。

一个很简单的需求，我们访问项目中的每个页面时，都需要执行=>获取cookie中存储的token，并使用token获取用户信息。

你可以选择在每个页面都写一遍这个方法，好麻烦的，不如在main.js中写一遍一劳永逸，每个页面访问之前都会执行。

app.vue

同理，我们注意一下app.vue这个文件。

如果说main.js可以放我们想要在任何页面都执行的js代码，那么app.vue可以放我们想要在任何页面都展示的html代码。比如一个全局的反馈按钮，如下图，这种永远定位在应用右下角的按钮，一定是放在app.vue中，而不是每个页面写一遍。

那我们再说句题外话，比如这种app.vue中的全局按钮，有一些特殊的页面，比如登录，我们不想展示，那么怎么处理？很明显用v-if 或者v-show，但是怎么获取值？我们当前不能在某个页面操纵app.vue里面的逻辑。

答案是：使用路由判断！

假设页面name = login，不想展示反馈按钮：

    反馈

这样写看似很好，没问题，但是其实有更好的方法，我们就不用做$route.name !== 'login' 诸如此类的判断。那就是在router.js中我们给login页面设置meta属性

// router.js
{
	path: '/login',
	name: 'login',
	component: () => import('xxxxxx'),
	meta: {
		showFeedback: false
	}
},

这样我们在app.vue中只需要使用$route.meta.showFeedback就行

    反馈

 扯远了，具体查看vue router 的路由元信息，我为什么会想到这个，因为我最开始的时候遇到过这个问题，但是根本没想到用meta，即便我看多那么多次文档。（好蠢） 

总之app.vue就是官网所说的根组件，index.html中id="app"的html元素就是官网所说的dom中的根组件模版。

二、应用配置

1. app.config

在main.js中，通常用app.config设置全局的方法。

我最常用到的是app.config.globalProperties用来挂载全局的message，store，api等通用方法

//main.js
app.config.globalProperties.$api = $api
app.config.globalProperties.$message= Message

这样我们在任何一个组件内都可以使用$api，$message，在任何的组件的模版内都可以直接使用$api和$message

需要注意的是我们在 setup里面是不能用this的，所以同样，不能使用this.$api，在带有setup的script标签中，我们应用$api还是需要单独引用的。

2.（ 知识延伸）全局变量的ts提示

以下内容位于官方文档的

【API => 进阶API => TypeScript工具类型 => componentcustomproperties】

假设我们使用选项式api，使用ts构建项目。

在上面我们增加了全局的方法$api，我们期望在使用this.$api的时候不会有ts的类型错误，那么就需要声明这个类型（$api），这就要了解ts的声明文件。

当使用第三方库时，我们需要引用它的声明文件，才能获得对应的代码补全、接口提示等功能。

一般来说，我们在项目根目录，新建一个@/src/index.d.ts文件即可，声明文件必须以 .d.ts为后缀。对于vue项目，我们可以这样定义 ，其中ComponentCustomProperties是vue3的工具类型（用于增强组件实例类型以支持自定义全局属性）

import { $api } from 'xxx
declare module 'vue' {
    interface ComponentCustomProperties {
        $api: $api
    }
}

其他的配置我暂时用的不多，先忽略

---

总结

至此，官网 创建一个应用部分结束，我们主要学习了createApp，index.html，main.js，app.vue这几个文件的作用。

仅供记录学习使用，有不对的地方欢迎指正。