vue3.0 Composition API 上手初体验 构建 vue 基础代码

vue3.0 Composition API 上手初体验 构建 vue 基础代码

上一讲中，咱们经过配置 webpack 构建了一个基础的开发环境。可是并无涉及到 vue3.0 的内容，这一讲中，咱们来构建一些基础代码。

首先，在终端中进入到咱们的项目目录，个人 demo 目录为 ~/Sites/myWork/demo/vue3-demo。

本人为 MacOS 环境， Windows 环境请自行将一些命令转换成你习惯的操做。好比在文件夹中操做，或在 vscode 等编辑器中操做。

建立基础文件

# 进入项目文件夹
cd ~/Sites/myWork/demo/vue3-demo
# 建立 App.vue 文件
touch src/App.vue

重写 src/main.js 文件

在上一讲中，咱们直接写了个测试代码就完了，这里咱们将文件内容替换为如下内容：

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

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

注意，这里的写法已经和 2.0 的写法彻底不一致了。 2.0 的时候采用的是建立一个新对象的方式，而这里采用的是函数方式。

这里我不作过多解释，若是想追究原理，能够去查看源码，或等待官方更新文档。

编写 src/App.js 文件

<template>
  <div>这是一个 vue 3.0 的 demo</div>
</template>

而后咱们运行 npm run dev 将项目跑起来。

小结

这一讲内容比较少，着重点是 main.js 中的写法变化。

下一讲，咱们来引入 vue-router。

本文由 FungLeo 原创，容许转载，但转载必须保留首发连接。

---

《vue3.0 Composition API 上手初体验》 文章目录地址： https://blog.csdn.net/fungleo/category_10020552.html 我会不按期的补充一些相关内容，欢迎关注订阅！

文章代码仓库 https://github.com/fengcms/vue3-demo 会用 git 的朋友，能够去直接下载个人代码。固然，给我点个 star 啥的，也不是不能够的哈！