vue.js javascript 前端 04 开发第一个组件

概述

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

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

实现步骤

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

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

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

第四步：启动服务

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

src/main.js

import { createApp } from 'vue'

import App from './App.vue'

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

src/App.vue

src/components/Demo.vue

启动方式

yarn

yarn dev

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

推荐链接