前言
本来设想的场景是：一个程序的后台管理模块，也有前端，不想开两个工程，看是不是直接把静态文件写在后端工程里。
试验了一下，只能玩玩，CSS样式加载解决不了。
代码
index.html
<html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/">首页</router-link>
<router-link to="/hello">hello1</router-link>
<router-link to="/hello2">hello2</router-link>
<router-link to="/editor">editor</router-link>
<router-view></router-view>
</div>
</body>
<script type="module" src="main.js"></script>
</html>
main.js
import index from "./views/index.js"
//import hello from "./views/hello.js"
//import hello2 from "./views/hello2.js"
//import editor from "./views/editor.js"
const hello = () => import('./views/hello.js')
const hello2 = () => import('./views/hello2.js')
const editor = () => import('./views/editor.js')
var routes = [
{ path: '/',component:index}, // 这个表示会默认渲染
{path:'/hello',component:hello},
{path:'/hello2',component:hello2},
{path:'/editor',component:editor},
];
var router = new VueRouter({
routes: routes
})
new Vue({
router,
el: '#app',
data: function(){
return{
socket:null,
}
},
created: function () {
this.socket=3;
},
})
页面组件 hello.js,其它也类似
var hello = Vue.component("hello", {
data: function () {
return {
}
},
template: `<div>
<div id="div1">
<div>测试文字</div>
</div>
</div>`,
});
export default hello
