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。這樣就實現了多個頁面的不同需求。實現了多頁面。打包後我們可以看到也給我們生成了多個獨立的文件。