这两天腾了一会vue搭建多页面,基本框架算是出来了,在这里简单的记录下备忘。

简介 

首先我们得搞懂什么是多页面。我们都知道vue是典型的单页面应用,也就是只有一个入口文件(main.js和app.vue和index.html),所有的路由都是基于这个入口文件来跳转的,因此也可理解为这个入口页面的子页面吧。这样我们就好理解多了。因此可以这样理解,一个入口文件(main.js和app.vue和index.html)就一个单页面。其他的都是在这个单页面内的路由出口展示的子页面,也就是路由跳转只在这个单页面内的子页面之间进行跳转。我们平时所有的开发都是基于这个单页面进行开发的。那么多页面也好理解了,也就是多个入口(main.js和app.vue和index.html),这样就有了多个单页面,单页面之间只能用a标签跳转,因此可以不用路由,单页面之内如果有子页面跳转那么在使用路由进行跳转。这样我们在页面开发的时候就和平时开发一样的,只需要对多个单页面里面的子页面进行分别开发就行了,也就是等同于有了多套的main.js和app.vue和index.html。说了这么多,我们实际搭建起来

一、 先创建项目

vue create test

安装选项选择默认(路由和vuex后期再加上),然后保证项目能正常启动。文件目录如下:

结构不用多说大家都很熟悉了,项目的入口文件问mian.js,对应app.vue和index.html文件,

二、改造成多页面

根据之前我们介绍的,也就是我们要有多个入口文件,其实就是多复制几个main.js,app.vue,index.html而已,在此之前我们得先有个vue.config.js文件,也就是配置文件,在这里配置我们的多页面pages选项,具体配置我就不多说了,官网写的很详细了。我们就直接码代码。我的配置如下


let pageMethod = require('./src/util/getPages.js');
pages = pageMethod.pages();

module.exports = {
	lintOnSave: false, //禁用eslint
	productionSourceMap: false,
	pages,
	devServer: {
		index: 'page1.html', //默认启动serve 打开page1页面
		open: process.platform === 'darwin',
		host: '',
		port: 8088,
		https: false,
		hotOnly: false,
		
		before: app => {}
	},
	
}

这里我们引入一个getPages.js文件,这个是用来遍历我们的文件的,然后生pages配置需要的格式的数据然后配置使用的代码如下

const glob = require('glob')
let pages = {}
module.exports.pages = function () {
  glob.sync('./src/pages/*/*.js').forEach(filepath => {
    let fileList = filepath.split('/')
    let fileName = fileList[fileList.length - 2]
    pages[fileName] = {
      entry: `src/pages/${fileName}/${fileName}.js`,
      // 模板来源
      template: `src/pages/${fileName}/${fileName}.html`,
      // 在 dist/index.html 的输出
      filename: process.env.NODE_ENV === 'development' ? `${fileName}.html` : `${fileName}/${fileName}.html`,
      // 提取出来的通用 chunk 和 vendor chunk。
      chunks: ['chunk-vendors', 'chunk-common', fileName]
    }
  })
  return pages
}

从代码可以看出就是去遍历我们src下的pages文件夹下所有的入口文件(js和html和对应的vue)然后生成pages需要的格式进行配置,也就是我们所有的多页面都写在pages里面,如我们要两个多页面page1和page2那么就在pages里面新建两个文件夹page1和page2,然后吧对应的入口文件和html模板拷贝进去就行了,这里我们先直接拷贝main.js和app.vue和index.html在对其进行从命名成page1和page2内容不变。此时文件结构如下:

拷贝完成后app.vue和mian.js和index.html用不上了,直接删除,修改page1.js内容如下

import Vue from 'vue'
import App from './page1.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

也就是指改了下vue的引入,之前是引入了app.vue这里我们改成page1.vue做为入口

修改page1.vue内容如下:

<template>
  <div id="app">
    <h1>这里是page1</h1>
    HelloWorld组件:
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from '@/components/HelloWorld.vue'


export default {
  name: 'App',
  components: {
    HelloWorld,
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

改动也不大,也就是组件的引入路径改了一下。

对于page2同样的修改,只是把的名字和路径page1改成page2就行了

到此我们的页面就完成了改造,npm run serve 启动后可以看到如下界面

浏览器里面输入http://localhost:8088/page1 可进入我们的page1这个单页面,

http://localhost:8088/page2则进入page2这个单页面里面

 

三、后期开发

后期开发其实很简单,就和我们平常vue的单页面开发一样的,只不过我们有多个page,假设我们现在开发page2加入route和vuex也就是page2这个页面加入两个子页面(home和about)用路由跳转,很简单,在page里面和我们平时一样的开发就行了。

先安装路由和vuex这个不多说。

然后在page2.vue加入路由出口,并不在引入HelloWorld组件代码如下:

<template>
  <div id="app">
    <h1>这里是page2</h1>
    
    <router-link to="/page2/home">Home</router-link> |
    <router-link to="/page2/about">About</router-link>

     <router-view/>|
  </div>
</template>

<script>


export default {
  name: 'App',
  components: {
    
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

然后在page2.js中引入路由代码如下:

import Vue from 'vue'
import App from './page3.vue'
import router from './router'//新增部分



Vue.config.productionTip = false

new Vue({
  router,//新增部分
  render: h => h(App),
}).$mount('#app')

然后创建路由文件,结构如下

index.js代码如下:

import Vue from 'vue'
import VueRouter from 'vue-router'


Vue.use(VueRouter)

const routes = [
  {
    path: '/page2',
    redirect: '/page2/home',
  },
  {
    path: '/page2/home',
    name: 'home',
    component:  () => import( './../view/home/home.vue')
  },
  {
    path: '/page2/about',
    name: 'about',
    
    component: () => import( './../view/about/about.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

这里要注意,所有路由都要在前面加上page2,也就是我们的页面名称。

最后创建我们的新页面结构如下

home.vue代码如下:

<template>
  <div class="home">
    <h1>This is an home page</h1>
  </div>
</template>

<script>



export default {
  name: 'home',
  created(){

  }

}
</script>

about.vue一样的只是把This is an home page改成This is an home about,name属性改成about即可.

到此路由已经加完,输入http://localhost:8088/page2页面效果如下:

 

 下面我们在给page2加上vuex也很简单,安装vuex完毕后再page2里面加入store文件如下图:

在page2.js里面引入:

代码如下:

import Vue from 'vue'
import App from './page2.vue'
import router from './router'
import store from './store'//新增部分


Vue.config.productionTip = false

new Vue({
  router,
  store,//新增部分
  render: h => h(App),
}).$mount('#app')

 好了,这样就引入成功了,在home里面测试是否成功。在created里面添加代码如下

console.log(this.$store)

效果如下:

可以看到,vuex已经被打印出来,说明安装成功。到此我们配置了两个独立的页面,page1就一个简单的页面,page2则引入了路由和vuex。这样就实现了多个页面的不同需求。实现了多页面。打包后我们可以看到也给我们生成了多个独立的文件。

 

Logo

前往低代码交流专区

更多推荐