vue-cli 创建多页面的过程
- 在 public 文件夹下面 添加子页面 并且 绑定vue的 根节点
<!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>Document</title>
</head>
<body>
<!-- 绑定一下 vue的根节点 -->
<div id="login"></div>
</body>
</html>
- 在src文件夹下面添加pages文件夹
-
在 pages 文件夹下面添加
components 文件夹
views 文件夹
相同问价名的 xxx.js (这里我创建的是login.js)
相同文件名(但是首字母大写)的 Xxx.vue 文件 (这里我创建的是 Login.vue)
-
login.js 的 配置
引入 vue
引入 对应的根组件 (Login.vue)
引入 router
引入 store
import Vue from 'vue'
import Login from './Login.vue'
import router from "@/router";
import store from "@/store";
Vue.config.productionTip = false
// 将根组件 挂在到 根节点上
new Vue({
router,
store,
render:h=>h(Login)
}).$mount('#login')
- 去 vue.config.js 配置路径(这里重点注意路径)
//这里是 配置多文件的路劲
pages:{
index:{
entry:'./src/main.js',
template: './public/index.html',
title:'首页'
},
login:{
entry:'./src/pages/login.js',
template:'./public/login.html',
title:'登录'
}
}
- 在 index.html 页面中设置 a 链接跳转
