04 开发第一个组件

概述

在Vue3中,一个组件就是一个.vue文件。

在本小节中,我们来开发第一个Vue3组件。这个组件的功能非常的简单,只需要在浏览器上输出一个固定的字符串"欢迎跟着Python私教一起学Vue3"即可。

实现步骤

第一步:新增src/components/Demo.vue,并填写如下内容

html 复制代码
<template>
  <h1>欢迎跟着Python私教一起学Vue3</h1>
</template>

第二步:在src/App.vue中引入该组件

html 复制代码
<script setup>
import Demo from "./components/Demo.vue"
</script>

第三步:在模板中进行使用

html 复制代码
<template>
  <h1>Vite5+Vue3</h1>
  <div class="container">
    <Demo/>
  </div>
</template>

第四步:启动服务

bash 复制代码
yarn dev

第五步:浏览器访问 http://localhost:5173/

完整代码

package.json

json 复制代码
{
  "name": "hello",
  "private": true,
  "version": "0.1.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build"
  },
  "dependencies": {
    "vue": "^3.3.8"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.5.0",
    "vite": "^5.0.0"
  }
}

vite.config.js

js 复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
})

index.html

html 复制代码
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

src/main.js

js 复制代码
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

src/App.vue

vue 复制代码
<script setup>
import Demo from "./components/Demo.vue"
</script>
<template>
  <h1>Vite5+Vue3</h1>
  <div class="container">
    <Demo/>
  </div>
</template>

src/components/Demo.vue

vue 复制代码
<template>
  <h1>欢迎跟着Python私教一起学Vue3</h1>
</template>

启动方式

bash 复制代码
yarn
yarn dev

浏览器访问:http://localhost:5173/

相关推荐
lynn8570_blog11 分钟前
低端设备加载webp ANR
前端·算法
LKAI.31 分钟前
传统方式部署(RuoYi-Cloud)微服务
java·linux·前端·后端·微服务·node.js·ruoyi
刺客-Andy1 小时前
React 第七十节 Router中matchRoutes的使用详解及注意事项
前端·javascript·react.js
前端工作日常1 小时前
我对eslint的进一步学习
前端·eslint
禁止摆烂_才浅2 小时前
VsCode 概览尺、装订线、代码块高亮设置
前端·visual studio code
程序员猫哥2 小时前
vue跳转页面的几种方法(推荐)
前端
代码老y3 小时前
十年回望:Vue 与 React 的设计哲学、演进轨迹与生态博弈
前端·vue.js·react.js
一条上岸小咸鱼3 小时前
Kotlin 基本数据类型(五):Array
android·前端·kotlin
zzywxc7873 小时前
详细探讨AI在金融、医疗、教育和制造业四大领域的具体落地案例,并通过代码、流程图、Prompt示例和图表等方式展示这些应用的实际效果。
开发语言·javascript·人工智能·深度学习·金融·prompt·流程图
大明883 小时前
用 mouseover/mouseout 事件代理模拟 mouseenter/mouseleave
前端·javascript