such a web page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="example-2">
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
</div>
<script>
var data = { counter: 0 }
Vue.component("simple-counter", {
template: "<button v-on:click="counter += 1">{{ counter }}</button>",
// data Vue
//
data: function () {
return data
}
});
new Vue({
el: "-sharpexample-2"
})
</script>
</body>
</html>
in router
func init() {
beego.Router("/arcTest.html", &controllers.ArcTestController{}, "*:Arc")
}
in controller
func (c *ArcTestController) Arc() {
c.TplName = "arcTest.html"
}
there is no problem running the html page alone
put it in the beego framework
bee run
[E] [template.go:174] parse template err: arcTest.html template: arcTest.html:20: function "counter" no
t defined
[W] [beego.go:97] template: arcTest.html:20: function "counter" not defined
panic: template: arcTest.html:20: function "counter" not defined
counter can not be used, delete and compile successfully, but clearly defined this example is copied on the vue official website, why beego is compiled but, resulting in the whole project can not run, there is no god knows how to solve, kneel to beg.