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,安装即是
    解决一些错误，不出之外就能够跑起来了