1、在webpack中配置vue元件頁面的解析

• 執行cnpm i vue -S將vue安裝為執行依賴；
• 執行cnpm i vue-loader vue-template-compiler -D將解析轉換vue的包安裝為開發依賴；
• 執行cnpm i style-loader css-loader -D將解析轉換CSS的包安裝為開發依賴，因為.vue檔案中會寫CSS樣式；
• 在webpack.config.js中，新增如下module規則：

module: {
    rules: [
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
      { test: /\.vue$/, use: 'vue-loader' }
    ]
  }
 

2、專案搭建

首先建立App.vue寫出專案的結構，在main.js中匯入vue，渲染出頁面

import Vue from 'vue'
// 匯入app根元件
import app from './App.vue'

var vm = new Vue({
    el:'#app',
    render:c => c(app),  //在普通頁面中使用render函式渲染元件
    router  //1.4掛載路由物件到例項上
})

補充： 在使用webpack構建的Vue專案中使用模板物件？
在webpack.config.js中新增resolve屬性：

resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
 

3、在App.vue元件中寫出專案的框架

在App.vue中把專案的頂部、內容、底部等全部用路由寫出，在router.js中再配置對應的路由元件內容，對應的路由就可以顯示對應的元件內容

import VueRouter from 'vue-router'
import HomeContainer from './components/tabbar/HomeContainer.vue'
import MemberContainer from './components/tabbar/MemberContainer.vue'
var router = new VueRouter({
    routes:[
        {path:'/',redirect:'/home'},
        {path:'/home',component:HomeContainer},
        {path:'/member',component:MemberContainer},
    ],
    linkActiveClass:'mui-active' //覆蓋預設的路由高亮的類router-link-exact-active
})
 

4、專案結束

專案完成後，將dist檔案刪除，使用webpack重新打包，這時候會新生成dist資料夾下有index.html和bundle.js檔案。

1) 將專案託管到Apache並啟用Gzip壓縮（使用的phpstudy）

要讓apache支援gzip功能，要用到deflate_Module和headers_Module。開啟apache的配置檔案httpd.conf，大約在105行左右，找到以下兩行內容：（這兩行不是連續在一起的）

#LoadModule deflate_module modules/mod_deflate.so
#LoadModule headers_module modules/mod_headers.so

然後將其前面的“#”註釋刪掉，表示開啟gzip壓縮功能。開啟以後還需要進行相關配置。在httpd.conf檔案的最後新增以下內容即可：

<IfModule deflate_module>
    #必須的，就像一個開關一樣，告訴apache對傳輸到瀏覽器的內容進行壓縮
    SetOutputFilter DEFLATE
    DeflateCompressionLevel 9
</IfModule>

最少需要加上以上內容，才可以生gzip功能生效。由於沒有做其它的額外配置，所以其它相關的配置均使用Apache的預設設定。這裡說一下引數“DeflateCompressionLevel”，它表示壓縮級別，值從1到9，值越大表示壓縮的越厲害。

2) 使用ngrok將本機對映為一個外網的Web伺服器

注意：由於預設使用的美國的伺服器進行中間轉接，所以訪問速度炒雞慢，訪問時可啟用FQ軟體，提高網頁開啟速度！