04 开发第一个组件
概述
在Vue3中，一个组件就是一个.vue文件。
在本小节中，我们来开发第一个Vue3组件。这个组件的功能非常的简单，只需要在浏览器上输出一个固定的字符串”欢迎跟着Python私教一起学Vue3“即可。
实现步骤
第一步：新增src/components/Demo.vue，并填写如下内容
<template><h1>欢迎跟着Python私教一起学Vue3</h1>
</template>
第二步：在src/App.vue中引入该组件
<script setup>
import Demo from "./components/Demo.vue"
</script>
第三步：在模板中进行使用
<template><h1>Vite5+Vue3</h1><div class="container"><Demo/></div>
</template>
第四步：启动服务
yarn dev
第五步：浏览器访问 http://localhost:5173/
完整代码
package.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
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],
})
index.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
import { createApp } from 'vue'
import App from './App.vue'createApp(App).mount('#app')
src/App.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
<template><h1>欢迎跟着Python私教一起学Vue3</h1>
</template>
启动方式
yarn
yarn dev
浏览器访问：http://localhost:5173/