概述
在Vue3中,一个组件就是一个.vue
文件。
在本小节中,我们来开发第一个Vue3组件。这个组件的功能非常的简单,只需要在浏览器上输出一个固定的字符串”欢迎跟着Python私教一起学Vue3“即可。
实现步骤
第一步:新增src/components/D服务器托管网emo.vue,并填写如下内容
template>
h1>欢迎跟着Python私教一起学Vue3h1>
template>
第二步:在src/App.vue中引入该组件
script setup>
import Demo from "./components/Demo.vue"
script>
第三步:在模板中进行使用
template>
h1>Vite5+Vue3h1>
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 + Vuetitle>
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
import Demo from "./components/Demo.vue"
Vite5+Vue3
src/components/Demo.vue
欢迎跟着Python私教一起学Vue3
启动方式
yarn
yarn dev
浏览器访问:http://localhost:5173/
服务器托管,北京服务器托服务器托管网管,服务器租用 http://www.fwqtg.net
在 PyCharm 中编写 Vue 项目,你可以按照以下步骤进行: 1. **安装 Vue.js 插件**:在 PyCharm 中,选服务器托管网择 `File -> Settings… -> Plugins`,搜索 Vue 并点击安装,安装后重启…