网站建设辶首选金手指十五,建设一个企业网站要多少钱,广州网站设计权威乐云践新,凡科官网app下载概述
在Vue3中#xff0c;一个组件就是一个.vue文件。
在本小节中#xff0c;我们来开发第一个Vue3组件。这个组件的功能非常的简单#xff0c;只需要在浏览器上输出一个固定的字符串”欢迎跟着Python私教一起学Vue3“即可。
实现步骤
第一步#xff1a;新增src/compon…概述
在Vue3中一个组件就是一个.vue文件。
在本小节中我们来开发第一个Vue3组件。这个组件的功能非常的简单只需要在浏览器上输出一个固定的字符串”欢迎跟着Python私教一起学Vue3“即可。
实现步骤
第一步新增src/components/Demo.vue并填写如下内容
templateh1欢迎跟着Python私教一起学Vue3/h1
/template第二步在src/App.vue中引入该组件
script setup
import Demo from ./components/Demo.vue
/script第三步在模板中进行使用
templateh1Vite5Vue3/h1div classcontainerDemo//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-vueexport default defineConfig({plugins: [vue()],
})index.html
!doctype html
html langenheadmeta charsetUTF-8 /link relicon typeimage/svgxml href/vite.svg /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titleVite Vue/title/headbodydiv idapp/divscript typemodule src/src/main.js/script/body
/htmlsrc/main.js
import { createApp } from vue
import App from ./App.vuecreateApp(App).mount(#app)src/App.vue
script setup
import Demo from ./components/Demo.vue
/script
templateh1Vite5Vue3/h1div classcontainerDemo//div
/templatesrc/components/Demo.vue
templateh1欢迎跟着Python私教一起学Vue3/h1
/template启动方式
yarn
yarn dev浏览器访问http://localhost:5173/
