|
|
@@ -0,0 +1,58 @@
|
|
|
+<!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>
|
|
|
+
|
|
|
+
|
|
|
+
|
