导语
在有些情况 vue 的单页面满足不了我们的开发的需要,例如有几个功能项目要独立,各自有各自的业务逻辑操作,该怎么实现呢? 别慌,看官请往下看
假设刚刚已经用vue-create创建了一个项目
1.在public文件夹下创建并修改 要挂载的 html 文件 ,例如我现在想要两个页面,如下
拿client.html 举例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="client"></div> //TODO: 挂载id
</body>
</html>
client 目录结构
依次贴出 client.vue代码
<template>
<div id="client">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "client"
};
</script>
<style scoped>
</style>
main.js 代码
import Vue from 'vue'
import Client from './client.vue'
import router from './router'
new Vue({
router,
render: h => h(Client)
}).$mount('#client')
router.js 代码
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{ path: '/', name: 'home', component: () => import('./pages/home/home.vue') }
]
export default new VueRouter({
routes: routes
})
homo.vue 代码
<template>
<div style="text-align:center;font-size:30px;">
我是用户前台页
</div>
</template>
<script>
export default {
name: "home",
methods: {
}
};
</script>
<style scoped>
</style>
2.配置的重点来了 在根目录下创建 vue.config.js
module.exports = {
pages: {
//TODO:详细配置 可去官网查看
client: 'src/modules/client/main.js',
management: 'src/modules/management/main.js'
}
}
3.最终效果
结语
到这里此次分享的也差不多了 ,关于 另一个图上的 另一个板块和client板块 差不太多 ,内部的功能代码根据自己实际项目添加吧. 老铁们再次再见 (前端界的一枚小学生)
