- changed project style more silimar to vuejs 2.x template
- use vue file by vbuild
pip install pyvuejspython ./main.pyconfig update by Vue.use in main.py
- parameters
- host[str]: host url of server(default: "0.0.0.0")
- port[int]: port number of server(default: 47372)
- debug[bool]: flag of show bottle log(default: True)
- open_webbrowser[bool]: flag of open browser when start(default: True)
Vue.use(
VueConfig(
host = "0.0.0.0",
port = 47372,
debug = True,
open_webbrowser = True
)
)- for now, template, style, script blocks are supported
- more information on vbuild and vbuild python document
<!-- template block -->
<template>
<div>
<label>{{ count }}</label>
<div>
<button style="margin-right:10px;" v-on:click="up_count">up</button>
<button v-on:click="down_count">down</button>
</div>
</div>
</template>
<!-- style block -->
<style scoped>
button {
width: 80px;
}
</style>
<!-- script block -->
<script lang="python">
class Component:
def __init__(self):
self.count = 0
def up_count(self):
self.count += 1
def down_count(self):
if self.count > 0:
self.count -= 1
</script>just call name in other view
<template>
<div id="app">
<div id="nav">
<router-link to="/Home">Home</router-link> |
<router-link to="/About">About</router-link> |
<router-link to="/Counter">Counter</router-link>
</div>
<router-view/>
</div>
</template>define map class and map functions in each file of maps
- if debug option in config, functions can be reached by "GET" and "POST". else, "POST" only
from pyvuejs import VueMap
class Counter(VueMap):
count = 0
@VueMap.map
def get_count(self):
return self.count
@VueMap.map
def up_count(self):
self.count += 1
@VueMap.map
def down_count(self):
if self.count > 0:
self.count -= 1define route path and component in router.py
from pyvuejs import Vue, VueRouter
Vue.use(VueRouter([
{
"path": "/About",
"component": "About"
},
{
"path": "/Home",
"component": "Home"
},
{
"path": "/Counter",
"component": "Counter"
}
]))- routes
pyvuejs is MIT license