专栏首页地方网络工作室的专栏vue3.0 Composition API 上手初体验 构建 vue 基础代码

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Mac 10.13 安装中文版 man 命令

    Mac 10.13 安装中文版 man 命令 本文参考于 《Mac 安装man命令中文文档》,但原文提供的链接以及安装的版本比较老旧。因此重新整理新版在这边提供...

    FungLeo
  • python 常用代码段汇总(一) 判断数据类型 判断是否为整数(包括负数)

    对于入参,我们经常需要判断数据类型,一般,我们的用法是 type() 方法。如下代码演示:

    FungLeo
  • Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(七)初识 *.vue 文件

    Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(七)初识 *.vue 文件 前情回顾 在上一篇文章《Vue2+VueRo...

    FungLeo
  • Vue 3.0将正式发布,它有哪些升级变化?

    那么我们今天就带着大家了解下 vue3.0,到底进化了什么,会对我们的开发有什么影响?

    ConardLi
  • Vue 3.0将正式发布,它有哪些升级变化?

    那么我们今天就带着大家了解下 vue3.0,到底进化了什么,会对我们的开发有什么影响?

    前端达人
  • WWDC 2017前瞻:硬件细节已遭曝光,但苹果在软件方面的布局却始终慎重

    VRPinea
  • powershell:Join-Path连接多级子目录的方法

    我们知道Join-Path可以用来创建路径,比如 Join-Path 'C:\Program Files' WindowsPowerShell 会把C:\Pr...

    用户1148648
  • 授权首发:徐亦达老师精选论文集和课件下载

    徐亦达老师和他的团队精选了70篇论文,其中包括了非参贝叶斯算法的研究和应用,行列式点过程,3D计算机视觉,带约束下几何优化,非负矩阵分解,视频跟踪,GAN的文字...

    黄博的机器学习圈子
  • python3–函数

    老七Linux
  • 车牌识别

    车牌识别应用于停车场,各个小区,办公楼的出入口,高速公路的各个收费站,那么你赶紧行动把。

    算法发

扫码关注云+社区

领取腾讯云代金券