Introduction:

In some cases, the single page of VUE can not meet the needs of our development, for example, there are several functional projects to be independent, each with their own business logic operation, how to achieve it? Don’t panic, please look down

Assume that you have just created a project with vue-create

1. Create and modify the HTML file to be mounted in the public folder, for example, I now want two pages, as follows

With the client. The HTML, for example

<! 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. The title % > < / title > The < / head > < body > < div id = "client" > < / div > / / TODO: mount id < / body > < / HTML >Copy the code

Client directory structure

Post the client.vue code in turn

<template>
  <div id="client">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "client"
};
</script>

<style scoped>
</style>

Copy the code

The main js code

import Vue from 'vue'
import Client from './client.vue'
import router from './router'

new Vue({
    router,
    render: h => h(Client)
}).$mount('#client')
Copy the code

The router. Js code


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
})
Copy the code

Homo. Vue code

<template> <div style="text-align:center; font-size:30px;" </div> </template> <script> export default {name: "home", methods: {}}; </script> <style scoped> </style>Copy the code

2. Create vue.config.js in the root directory

The module. Exports = {pages: {/ / TODO: detailed configuration To look at the client's official website:'src/modules/client/main.js',
          management: 'src/modules/management/main.js'}}Copy the code

3. End result

conclusion

Here the share is almost the same, about another plate on another diagram and the client plate is not too different, the internal function code according to their actual project to add it. See you guys again (a pupil of the front end)Copy the code