<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>index</title>
</head>
<body>
<!-- <h3>this is node -> Vue test</h3> -->
<div id='app' style='color:red; font-size:20px; font-weight:bold;'>app node start...</div>
<template id="my-app">
<!--<div v-html='info'></div>
<Home @op="add">home vue</Home>
<h5 style="color:oranged">{{number}}</h5>
<About>this is About</About>
<test></test>-->
<div class="flex flex-wrap gap-4 item-center">
<el-select
v-model="value"
placeholder="Select"
size="large"
style="width: 240px"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</div>
<br/>
<!--避免使用单标签，组件按照双标签规范用； js代码相对位置导入后可以直接使用 -->
<p>before i18n label</p>
<div v-t="'messages.username'"></div>
{{$t('messages.login')}}
<p>after i18n label</p>
<label @click="changelang('zh')">中文</label>
<label @click="changelang('en')">english</label>
<!--<input type="button" text="中文" @click="changelang('zh')"/>
<input type="button" text="english" @click="changelang('en')"/>-->
<p>
<router-link to="/home">首页</router-link>
<router-link to="/test">test</router-link>
<router-link to="/about">关于</router-link>
</p>
<router-view></router-view>
</template>
<template style="width:100%; backgroud-color:oranged;">
<Home @op="add">home vue</Home>
<h2>{{number}}</h2>
</template>
<script defer src="bundle.js"></script></body>
</html>