You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
2.1 KiB
100 lines
2.1 KiB
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>{{ title }}</title>
|
|
<script src="js/govue.js"></script>
|
|
<script src="js/vue.js"></script>
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
color: #888888;
|
|
}
|
|
|
|
.content {
|
|
text-align: center;
|
|
}
|
|
|
|
.content h1 {
|
|
font-size: 68px;
|
|
}
|
|
|
|
.content p {
|
|
font-size: 28px;
|
|
}
|
|
|
|
pre {
|
|
display: inline-block;
|
|
border-radius: 4px;
|
|
background: black;
|
|
color: white;
|
|
text-align: left;
|
|
padding: 20px;
|
|
width: 600px;
|
|
height: 300px;
|
|
overflow: auto;
|
|
}
|
|
|
|
pre::-webkit-scrollbar {
|
|
width: 0 !important
|
|
}
|
|
a{
|
|
text-decoration: none;
|
|
color: darkslategrey;
|
|
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!--gv-start-->
|
|
<div id="app">
|
|
<div class="content">
|
|
<govue-title></govue-title>
|
|
<p>{{desc}}</p>
|
|
<div>当前版本号:{{version}}</div>
|
|
<br>
|
|
<a href="javascript:" @click="click">点击 {{isShowCode?'隐藏':'显示'}}</a>
|
|
<div v-if="isShowCode">
|
|
<pre>{{code}}</pre>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!--gv-end-->
|
|
<script gv-src>
|
|
|
|
Vue.component('govue-title', {
|
|
template: '<h1 id="title">govue</h1>'
|
|
});
|
|
|
|
if (isBrowser) {
|
|
GoHtmlSrc = ""
|
|
}
|
|
var app = new Vue({
|
|
data: {
|
|
desc: "基础golang开发的一套vue服务端渲染方案",
|
|
version: "0",
|
|
code: GoHtmlSrc,
|
|
isShowCode: true
|
|
},
|
|
methods: {
|
|
click: function () {
|
|
this.isShowCode = !this.isShowCode
|
|
},
|
|
},
|
|
});
|
|
|
|
if (!isBrowser) {
|
|
console.log(GoHost + "/govue.version")
|
|
axios.get("http://" + GoHost + "/govue.version").then(function (data) {
|
|
app.version = data.data.version
|
|
})
|
|
}
|
|
|
|
GoVueMount(app, {
|
|
title: "govue"
|
|
}, "#app")
|
|
</script>
|
|
</body>
|
|
</html>
|