html版本的vue3模版
仅vue
js
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>vue3的html代码示例</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>
<body>
<div id="app">
{{title}}
<button @click="changeTitle">改变标题</button>
</div>
<script>
const { createApp, ref } = Vue;
createApp({
setup() {
const title = ref('你好');
const changeTitle = () => {
title.value = 'Hello World!';
};
return { title, changeTitle };
}
}).mount('#app');
</script>
</body>
</html>vue3+element-plus
js
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Vue3 + ElementPlus 示例</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 引入 Vue 3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<!-- 引入 Element Plus 样式 -->
<link rel="stylesheet" href="https://npm.webcache.cn/element-plus@2.11.4/dist/index.css">
<!-- 引入 Element Plus 组件库 -->
<script src="https://npm.webcache.cn/element-plus@2.11.4/dist/index.full.js"></script>
</head>
<body>
<div id="app">
<h1>{{ title }}</h1>
<el-button type="primary" @click="changeTitle">改变标题</el-button>
<el-input v-model="input" placeholder="请输入内容" style="width: 200px; margin-top: 10px;"></el-input>
<p>你输入的是：{{ input }}</p>
</div>
<script>
const { createApp, ref } = Vue;
createApp({
setup() {
const title = ref('你好，Element Plus！');
const input = ref('');
const changeTitle = () => {
title.value = 'Hello Element Plus!';
};
return {
title,
input,
changeTitle
};
}
})
.use(ElementPlus) // 使用 ElementPlus 插件
.mount('#app');
</script>
</body>
</html>vue3+vant
js
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Vue3 + Vant 示例</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Vue 3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<!-- Vant 样式 -->
<link rel="stylesheet" href="https://npm.webcache.cn/vant@4/lib/index.css">
<!-- Vant 脚本（自动注册全局组件） -->
<script src="https://npm.webcache.cn/vant@4/lib/vant.min.js"></script>
</head>
<body>
<div id="app">
<h1>{{ title }}</h1>
<!-- Vant 按钮 -->
<van-button type="primary" @click="changeTitle">改变标题</van-button>
<!-- Vant 输入框 -->
<van-field
v-model="input"
placeholder="请输入内容"
style="width: 200px; margin-top: 10px;"
/>
<p>你输入的是：{{ input }}</p>
</div>
<script>
const { createApp, ref } = Vue;
createApp({
setup() {
const title = ref('你好，Vant！');
const input = ref('');
const changeTitle = () => {
title.value = 'Hello Vant!';
};
return { title, input, changeTitle };
}
})
.use(vant) // 注册 Vant 全部组件
.mount('#app');
</script>
</body>
</html>