<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<script type="module" src="./main.js"></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
index.html
global.css
main.js
App.vue
HelloBicool.vue
package.json
body {
background-color: #fefefe;
}
import { createApp } from 'vue'
import './global.css'
import App from './App.vue'
createApp(App).mount('#app')
console.log(["Hello 笔.COOL 控制台"])
<script setup>
import HelloBicool from './HelloBicool.vue'
import { ref } from "vue"
const title = ref("Hello 笔.COOL");
const descr = ref("一笔一划，绘就人生；一码一境，酷创未来。");
</script>
<template>
<div class="container">
<HelloBicool :title="title" :descr="descr" />
<!-- vue logo -->
<a href="https://vuejs.org/" target="_blank">
<svg class="logo" viewBox="0 0 128 128" width="24" height="24" data-v-97365a3e="">
<path fill="#42b883" d="M78.8,10L64,35.4L49.2,10H0l64,110l64-110C128,10,78.8,10,78.8,10z" data-v-97365a3e="">
</path>
<path fill="#35495e" d="M78.8,10L64,35.4L49.2,10H25.6L64,76l38.4-66H78.8z" data-v-97365a3e=""></path>
</svg>
</a>
</div>
</template>
<style lang="scss" scoped>
$bg: #f0f2f5;
.container {
background: $bg;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.logo {
height: 40px;
width: 40px;
margin-top: 20px;
}
</style>
<script setup>
defineProps({
title: String,
descr: String,
})
</script>
<template>
<h1>{{ title }}</h1>
<p><i>{{ descr }}</i></p>
</template>
<style lang="scss" scoped>
h1 {
color: #333;
text-align: center;
}
p {
color: #666;
text-align: center;
}
</style>
{
"dependencies": {
"vue": "3.5.13"
}
}
预览
预览
控制台
清空