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

﹏ヽ暗。殇╰゛Y 2023-02-09 14:07 16阅读 0赞

# 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 文件 ##

然后我们运行 `npm run dev` 将项目跑起来。

![format_png][]

## 小结 ##

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

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

> 本文由 FungLeo 原创，允许转载，但转载必须保留首发链接。

--------------------

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

文章代码仓库 [https://github.com/fengcms/vue3-demo][https_github.com_fengcms_vue3-demo] 会用 `git` 的朋友，可以去直接下载我的代码。当然，给我点个 `star` 啥的，也不是不可以的哈！

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9naXRlZS5jb20vZnVuZ2xlby9teS1hcnRpY2xlLWltYWdlL3Jhdy9tYXN0ZXIvaW1hZ2UvNmYvNDY1MjdlM2Y5ZjgyYjhjYTQyYWUxZDM4MmRkYmE0LmpwZw?x-oss-process=image/format,png
[https_blog.csdn.net_fungleo_category_10020552.html]: https://blog.csdn.net/fungleo/category_10020552.html
[https_github.com_fengcms_vue3-demo]: https://github.com/fengcms/vue3-demo