【Vue3】从零开始编写项目

【Vue3】从零开始编写项目

  • 背景
  • 简介
  • 开发环境
  • 开发步骤及源码
  • 总结

背景

随着年龄的增长,很多曾经烂熟于心的技术原理已被岁月摩擦得愈发模糊起来,技术出身的人总是很难放下一些执念,遂将这些知识整理成文,以纪念曾经努力学习奋斗的日子。本文内容并非完全原创,大多是参考其他文章资料整理所得,感谢每位技术人的开源精神。

简介

本文介绍如何从零开始编写 Vue3 项目,目的是弄清 Vue3 项目的基本组成及原理。

开发环境

分类名称版本
操作系统WindowsWindows 11
IDEVisual Studio Code1.91.1

开发步骤及源码

1> 创建 Vue3 工程,参考:【Vue3】工程创建及目录说明。

2> 清空 src 目录下所有文件。

3> 在 src 目录下创建 Vue 根组件 App.vue

<!-- 组件结构 -->
<template><div class="app">Hello, Vue3</div>
</template><script lang="ts">
export default {// 组件名name: 'App'
}
</script><!-- 组件样式 -->
<style>
.app {background-color: cadetblue;border-radius: 5px;color: white;padding: 20px;
}
</style>

一个 Vue 组件包含三类一级标签:

  • <template>:定义组件结构,类似于前端 HTML。
  • <script>:定义组件行为,此处只暴露了组件名称 App
  • <style>:定义组件样式,即 CSS。

4> 在 src 目录下创建应用入口文件 main.ts,负责初始化 Vue 应用并将其挂载到 DOM 上。

// 引入 createApp 用于创建应用
import { createApp } from 'vue'
// 引入 App 根组件
import App from './App.vue'// 创建应用并挂载到DOM(index.html)
createApp(App).mount('#app')

注意:Vue 根组件所挂载的DOM定义在 index.html 文件中。
index.html
index.html 只做了两件事:

  • 定义 Vue 根组件挂载的 DOM(默认为 app)。
  • 引入应用入口文件 main.ts
  1. 执行命令 npm run dev 启动应用。
    Vue3

总结

从零开始创建一个最简单的 Vue3 项目需要编写三个文件:

  • index.html:通过命令创建项目后自动生成,无需修改,此文件只做了两件事,一是定义 Vue 根组件挂载的 DOM,二是引入应用入口文件 main.ts
  • App.vue:定义 Vue 根组件,包括定义组件的结构、行为和样式;
  • main.ts:应用入口文件,通过 Vue 提供的 createApp 方法创建应用,然后通过 mount 方法挂载到 DOM 上。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/49327.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

阶梯-度小满春招算法方向第1批

问题的题面是典型的最长上升子序列问题。求方案数属动态规划问题&#xff0c;可推出以a[i]为最大节点的上升子序列方案数公式 dp[i]{dp[j] , 1<j<i-1&&f[j]1f[i]} &#xff08;f为最大上升子序列&#xff09;。 并且这个方案总数不会超过n&#xff0c;因此也…

C2W1.Assignment.Autocorrect.Part2

理论课&#xff1a;C2W1.Auto-correct 文章目录 3. Combining the edits3.1 Exercise 8.Edit one letter3.2 Exercise 9.Edit two letters3.3 Exercise 10.suggest spelling suggestions 4. Minimum Edit Distance4.1 Dynamic ProgrammingExercise 11Test All-in-one 5. Backt…

javaScrip的学习(一)

目录 引言 一、java和JavaScript的联系 二、js中的弹出框 1.alert弹出框 2.confirm带确认取消的按钮弹框 3.prompt带有提示信息且带有输入框的弹框 4.输出到网页中 ​三、js引入方式 1. 放在script标签中 2.放在外部js文件中 四、执行顺序 五、书写规范 1. 语句结…

python爬虫基础——Webbot库介绍

本文档面向对自动化网页交互、数据抓取和网络自动化任务感兴趣的Python开发者。无论你是初学者还是有经验的开发者&#xff0c;Webbot库都能为你的自动化项目提供强大的支持。 Webbot库概述 Webbot是一个专为Python设计的库&#xff0c;用于简化网页自动化任务。它基于Seleniu…

Hi3751V560_SELinux

Hi3751V560_SELinux setenforce Enforcing setenforce Permissive(或“setenforce 0”) getenforce V560:demo本身的: [ 13.765161] type=1400 audit(1628821512.905:4): avc: denied { read } for pid=1926 comm="system_server" name="ifindex" d…

CCRC-DCO数据合规入表正式落地!全流程操作指南来啦!(业内专家总结)

数据合规已绝非大企业专属&#xff01; 随着《网络安全法》《数据安全法》《个人信息保护法》相继落地&#xff0c;只要企业涉及用户的各种信息&#xff0c;哪怕是中小企业也会面临数据合规的监管&#xff0c;从而产生相关的法律需求。 小到APP对个人信息数据的采集&#xff0c…

【深入C++】map和set的使用

文章目录 C 中的容器分类1. 顺序容器2. 关联容器3. 无序容器4. 容器适配器5. 字符串容器6. 特殊容器 set1.构造函数2.迭代器3.容量相关的成员函数4.修改器类的成员函数5.容器相关操作的成员函数 multiset1.equal_range map1.初始化相关的函数2.迭代器3.容量相关的成员函数4.访问…

AVL树的理解和实现[C++]

文章目录 AVL树AVL树的规则或原理 AVL树的实现1.节点的定义2.功能和接口等的实现默认构造函数&#xff0c;析构函数拷贝构造函数插入搜索打印函数检查是否为平衡树&#xff0c;检查平衡因子旋转 AVL树 AVL树&#xff0c;全称Adelson-Velsky和Landis树&#xff0c;是一种自平衡…

Java IO模型深入解析:BIO、NIO与AIO

Java IO模型深入解析&#xff1a;BIO、NIO与AIO 一. 前言 在Java编程中&#xff0c;IO&#xff08;Input/Output&#xff09;操作是不可或缺的一部分&#xff0c;它涉及到文件读写、网络通信等方面。Java提供了多种类和API来支持这些操作。本文将从IO的基础知识讲起&#xff…

智慧职校就业管理:开启校园招聘会新模式

在智慧职校的就业管理系统中&#xff0c;校园招聘会的出现&#xff0c;为学生们提供了一个展示自我、探寻职业道路的舞台&#xff0c;同时也为企业搭建了一座直面未来之星的桥梁。这一功能&#xff0c;凭借其独特的优势与前沿的技术&#xff0c;正在重新定义校园与职场之间的过…

【JVM基础06】——组成-直接内存详解

目录 1- 引言&#xff1a;直接内存概述1-1 直接内存是什么&#xff1f;直接内存的定义(What)1-2 为什么用直接内存&#xff1f;Java程序对直接内存的使用 (Why) 2- ⭐核心&#xff1a;详解直接内存(How)2-1 文件拷贝案例介绍对比常规 IO(BIO) 和 NIO常规 IO 的操作流程NIO 的操…

LeetCode 热题 HOT 100 (009/100)【宇宙最简单版】

【图论】No. 0207 课程表【中等】&#x1f449;力扣对应题目指路 希望对你有帮助呀&#xff01;&#xff01;&#x1f49c;&#x1f49c; 如有更好理解的思路&#xff0c;欢迎大家留言补充 ~ 一起加油叭 &#x1f4a6; 欢迎关注、订阅专栏 【力扣详解】谢谢你的支持&#xff01…

小公司怎么申请企业邮箱?

小公司申请企业邮箱需要考虑哪些因素&#xff1f;小公司选择企业邮箱需考虑成本、功能、安全、支持等因素。小公司怎么申请企业邮箱呢&#xff1f;注册企业邮箱需填写企业信息、选择套餐并添加用户。 一、小公司申请企业邮箱考虑的因素 1、成本效益分析 预算规划&#xff1a…

Try ubuntu core (by quqi99)

作者&#xff1a;张华 发表于&#xff1a;2024-07-20 版权声明&#xff1a;可以任意转载&#xff0c;转载时请务必以超链接形式标明文章原始出处和作者信息及本版权声明(http://blog.csdn.net/quqi99) try ubuntu core on qemu #ovmf is to ensure compatibility with the re…

matlab--legend利用for循环添加图例

第一种方法 %% 第一种方法 R 1:4; THETA1 atand(R./1.8); legend_name {}; for i 1:4THETA atand(R(i)./1.8);intTheta floor(THETA);R_THERA 1.8 - (R(i)./tand(intTheta-10:intTheta10));R_THERA1 1.8 - (R(i)/tand(intTheta));plot(R_THERA);grid on;hold onlegend…

领夹麦克风哪个品牌好,电脑麦克风哪个品牌好,热门麦克风推荐

​在信息快速传播的时代&#xff0c;直播和视频创作成为了表达与交流的重要方式。对于追求卓越声音品质的创作者而言&#xff0c;一款性能卓越的无线麦克风宛如一把利剑。接下来&#xff0c;我要为大家介绍几款备受好评的无线麦克风&#xff0c;这些都是我在实际使用中体验良好…

SpringBoot大模型流式接口

话不多说&#xff0c;直接上货 import cn.hutool.core.util.IdUtil; import com.alibaba.fastjson.JSONObject; import org.springframework.http.MediaType; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.Re…

人工智能(AI)在办公场所的广泛应用

人工智能&#xff08;AI&#xff09;在办公场所的广泛应用正逐步改变着我们的工作方式和效率。随着技术的进步&#xff0c;越来越多的公司和组织开始采用各种AI技术来优化工作流程、提升生产力&#xff0c;并提供更好的用户体验。以下是人工智能在办公方面的一些主要作用和影响…

LeetCode 125.验证回文串 C++写法

LeetCode 125.验证回文串 C写法 思路&#x1f914;&#xff1a; 我们不对字符串进行删除&#xff0c;这样效率太低了&#xff0c;所以可以左右开工&#xff0c;下标begin和end遇到不是字母数字字符的就跳过&#xff0c;当两边都是字母就进行比对&#xff0c;一样就继续往后走&a…

PCL 批量处理点云文件

系列文章目录 文章目录 系列文章目录前言一、PCL是什么&#xff1f;二、配置PCL环境三、使用步骤1.引入库2.主函数 总结 前言 点云处理时往往会需要对多个点云进行处理&#xff0c;比如在预处理&#xff0c;保存点云时。下面提供一个简单的点云批量转换例子&#xff0c;PCD文件…