【Vue3】从零开始编写项目

【Vue3】从零开始编写项目

背景

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

简介

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

开发环境

分类 名称 版本
操作系统 Windows Windows 11
IDE Visual Studio Code 1.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 上。

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-20 16:28:29       141 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-20 16:28:29       154 阅读
  3. 在Django里面运行非项目文件

    2024-07-20 16:28:29       129 阅读
  4. Python语言-面向对象

    2024-07-20 16:28:29       141 阅读

热门阅读

  1. OpenWrt安装快速入门指南

    2024-07-20 16:28:29       35 阅读
  2. K8S私有云 服务器负载均衡器OpenELB

    2024-07-20 16:28:29       35 阅读
  3. 基于深度学习的天气预报

    2024-07-20 16:28:29       33 阅读
  4. 设计模式-建造者模式

    2024-07-20 16:28:29       31 阅读
  5. 基于 Gunicorn、Flask 和 Docker 的 Web 应用开发

    2024-07-20 16:28:29       35 阅读