*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 = falsenew 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配置项含义：
然后就是在各个单页面中进行开发了。。。
