vue多页面入口配置
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
*index.html(主页\项目入口),app.vue(根组件),main.js(文件入口的配置)
1.进行项目入口的配置
在public下面,复制index.html修改文件名(里面内容可以不变)
<!DOCTYPE html>
<html lang="">
<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">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
2、进行跟组件和文件入口的配置
入口文件代码:
main.js:
import Vue from 'vue'
import App from './teacher.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
// store,
render: h => h(App)
}).$mount('#app')
根组件代码
teacher.vue:
<template>
<div id="app">
<!-- 这个是教师界面 -->
<!-- <div id="nav"> -->
<router-link to="/">Home</router-link> |
<router-link to="/other">other</router-link>
<router-view/>
</div>
</template>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
3.vue.config.js配置
let page = {
index: {
entry: 'src/pages/index/main.js',
template: 'public/index.html',
filename: 'index.html',
},
teacher: {
entry: 'src/pages/teacher/main.js',
template: 'public/teacher.html',
filename: 'teacher.html',
},
student: {
entry: 'src/pages/student/main.js',
template: 'public/student.html',
filename: 'student.html',
}
}
module.exports = {
pages: page
}
webpack配置项含义:
然后就是在各个单页面中进行开发了。。。
GitHub 加速计划 / vu / vue
207.54 K
33.66 K
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:2 个月前 )
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 4 个月前
e428d891
Updated Browser Compatibility reference. The previous currently returns HTTP 404. 5 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)