前言

一眨眼Vue3 beta版发布都快一年了,为了恰饭,学不动也得起来学啊。

听说Vue3配合vite使用更香,但是鉴于尤大更新vite版本的速度实在是太快了,学习速度跟不上更新速度了啊喂!

所以这次学习计划还是基于vue-cli,等后面vite版本稳定下来轮子多了再入手。

安装

使用Vue CLI安装Vue3的过程和Vue2基本一致,在终端输入vue create project之后,选择Vue版本为3.x,其他选项按照之前Vue2的习惯来配置即可。

这边需要注意的是,只有Vue CLI 4.5及以上版本才有选择Vue版本的选项,安装之前需要检查下你的Vue CLI版本。

当然,除了命令行安装,你也可以选择用可视化工具安装,输入vue ui,按照界面提示傻瓜式操作就可以了。

另外,在安装完成之后的操作和之前完全一致(例如配置vue.config.js、目录结构、npm命令等等),这边就不赘述了,懂得都懂哈。

创建Vue实例

在Vue2中创建一个Vue实例使用的是new Vue(),而在Vue3中,则需要使用createApp()这个API来创建一个应用实例,然后链式调用其他方法。

// main.js
import {createApp} from "vue"
import App from "./App.vue"
import router from "./router"
import store from "./store"

const app = createApp(App)

app.use(router)
    .use(store)
    .mount("#app")