vue cli3.0搭建一个多页面全过程

这两天腾了一会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。这样就实现了多个页面的不同需求。实现了多页面。打包后我们可以看到也给我们生成了多个独立的文件。