vue多页面入口配置

*index.html(主页\项目入口）,app.vue(根组件)，main.js(文件入口的配置)1.进行项目入口的配置在public下面，复制index.html修改文件名（里面内容可以不变）<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="

supper李

5005人浏览 · 2022-03-31 10:19:26

supper李 · 2022-03-31 10:19:26 发布

*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配置项含义：
在这里插入图片描述
然后就是在各个单页面中进行开发了。。。

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^