Vue3快速上手 （学习笔记）

---

前言

Vue3项目基本创建

---

一、创建Vue3项目 （Vite）

vite 是新一代前端构建工具，官网地址：https://vitejs.cn，vite的优势如下：

• 轻量快速的热重载（HMR），能实现极速的服务启动。
• 对 TypeScript、JSX、CSS 等支持开箱即用。
• 真正的按需编译，不再等待整个应用编译完成。
• 

二、App组件的编写

代码如下（示例）：

App.vue

<template>
  <div class="app">
    <h1>{{ name }}</h1>
  </div>
</template>

<script lang="ts" setup>
	 import {ref} from 'vue'
	 const name = ref('张三')
	 console.log(name.value)
</script>

<style>
  .app {
    background-color: #ddd;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
  }
</style>

---