开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情
这一次我准备使用vite来完成整个系列文章，同时为了更好的演示代码，我用了stackblitz的服务，同时也感谢掘金提供码上掘金这个平台，我可以直接把stackblitz嵌入进来，大家可以更直观的看代码，甚至运行起来.
PS: 如果你打不开stackblitz，我就没办法了
createApp
与vue2有所不同，vue3不再需要new,而是通过导出的这个函数。我认为这里有个2个优点：1、更加的语义化。2、更加精简资源，不再需要初始化全部代码。
在vue3中，代码封装的更加细化，更方便我们使用tree-shaking,从这里也能可见一斑。
因此,我们第一句代码就是
import { createApp } from 'vue'
const App = {}
const app = createApp(App)
其中App指的是组件，这里我们暂时先不看这个。这三句代码就意味着你已经创建好了vue3的app,我觉得比vue2相比确实更加的语义化。而且在这个时候，我们仅仅引入了createApp的这个函数，引入的体积明显会更小了。
但这时候，你会发现页面并没有渲染，这是为什么呢？请往下看
createApp的返回值
我们一般会把createApp的返回值保存起来，因为它还有很多用处。
createApp会返回一个vue实例，而我们可以对这个实例做如下操作
- app.mount() / app.unmount()
这两个单词大家在写vue的时候应该经常能见到，mount意思就是挂载，就是渲染到节点的意思，因此我们上一步就应该在createApp之后直接mount，这样app才会正常显示。
const app = createApp(App).mount('#app')
mount时需要指定的挂载的节点，这里可以直接传入DOM对象，或者DOM查询字符串。
- app.use()
这个也是比较常用的一个方法，主要用于引入vue插件，这也是为什么说vue是一个渐进式框架的原因，通过插件系统，vue可以有更多的功能，比如我们最最最最常用的一个插件vue-router
- app.provide()
今天又发现了一个新大陆，这个api我之前倒是没想到能在根实例上使用，这里其实是一个依赖注入的思想，provide传入的值可以在所有子组件里使用，类似于react的context.
那么大家应该都能猜到，在子组件内，我们就可以使用inject来获取值，这块我有空会仔细研究研究，说不定可以与only-state相结合，实现类似于vuex的全局共享变量。
- app.component()
这个是用来注册全局组件的，这一点倒是没有什么变化，如果我们自己有一个全局组件也可以这样注册。
- app.directive()
这个是用来注册全局的自定义指令的，vue3的指令写法与vue2基本没什么变化，这一点倒是不错
- app.mixin()
注册全局的mixin，其实mixin常用于vue2中，vue3其实可以不用的，可以通过composition-api解决
- app.version
没什么说的，vue的版本号罢了，主要用于兼容和判断vue2
-
app.config 这里与vue2有点不同，在vue2中，我们通常通过
Vue.prototype.xxx来挂载一些全局的东西，在vue3中则作为一个配置项，这里其实有很多配置，我挑几个重点的来说下 -
- app.config.errorHandler/warnHandler
这里放的是vue的全局错误处理函数，这里常用来debug或者做前端监控。这里可以捕获你发生了什么错误或者警告，发生在哪个组件。具体参数可以直接查看文档
-
- app.config.globalProperties
这里就是vue的全局属性，如果你需要在Options API里通过this.xxx访问，你需要把值放到这里来。
对应的就是app.config.globalProperties.xxx = 'something'
还有一些其他参数配置，大家可以在官网文档上看，我写的这些都是日常使用比较多的。
经过这一张，我已经创建好了一个vite的基础项目，代码在这里
