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,装置就是
    处理一些毛病,不出之外就能够跑起来了


    原文作者:停停儿
    原文地址: https://segmentfault.com/a/1190000015552319
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞