mpvue小程序轉H5

前提：mpvue小程序使用fly做爲http請求
轉換後的目錄結構以下：

├─build
├─config
├─src
│ ├─components
│ ├─pages
│ ├─store
│ ├─router
│ ├─App.vue
│ └─main.js
├─static
├─.babelrc
├─.editorconfig
├─.eslintignore
├─.eslintrc.js
├─.gitignore
├─.postcssrc.js
├─index.html
├─package.json
└─README.md

修改配置文件

• 用vue-cli腳手架初始化一個項目

  vue init webpack my-project

• 將mpvue小程序中src文件夾和static文件夾拷貝到my-project中，覆蓋my-project原來的文件夾

• 修改main.js文件

  刪除關於小程序相關配置

  // 小程序中使用
      var Fly=require("flyio/dist/npm/wx") 
      // web中使用
      var Fly=require("flyio/dist/npm/fly") 
      // 指定掛載元素
      new Vue({
        el: '#app',
        template: '<App/>',
        components: { App }
      })

• 修改APP.vue

  刪除關於小程序的相關配置，添加以下代碼

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

配置路由

• 配置相關路由

  import Vue from 'vue'
  import Router from 'vue-router'
  
  Vue.use(Router)
  const getPage = name => {
    return resolve => require([`../pages/${name}/index.vue`], resolve)
  }
  
  export default new Router({
    routes: [
      {
        path: '/',
        name: 'index',
        component: getPage('index')
      }
    ]
  })

• 修改main.js

  將路由掛載到根組件

  import router from './router'
  new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: { App }
  })

安裝依賴

cnpm install

列表項目

cnpm run dev
    運行中應該會出現一些錯誤，會提示安裝flyio,安裝即是
    解決一些錯誤，不出之外就能夠跑起來了