本文共 5081 字，大约阅读时间需要 16 分钟。

开始

这个项目是一个mpvue 的demo, 没有具体的业务实现方法，只有简单的页面切换，还有常用的一些方法封装，总体提供分开打包开发的思路

github源码 =>

需要看详细版有项目内容的，可以看这篇文章，有详细说明

目录结构

.├── README.md├── build                       小程序运行打包配置文件│   ├── build.js│   ├── check-versions.js│   ├── dev-client.js│   ├── dev-server.js│   ├── utils.js│   ├── vue-loader.conf.js│   ├── webpack.base.conf.js│   ├── webpack.dev.conf.js│   └── webpack.prod.conf.js├── buildH5                    H5运行打包配置文件│   ├── build.js│   ├── check-versions.js│   ├── dev-client.js│   ├── utils.js│   ├── vue-loader.conf.js│   ├── webpack.baseH5.conf.js│   ├── webpack.devH5.conf.js│   └── webpack.prodH5.conf.js├── config                   小程序运行打包配置文件         │   ├── dev.env.js│   ├── index.js│   └── prod.env.js├── configH5                H5运行打包配置文件│   ├── dev.env.js│   ├── index.js│   └── prod.env.js├── dist                    小程序打包生成的文件目录│   ├── app.js│   ├── app.json│   ├── app.wxss│   ├── components│   │   ├── card$79c1b934.wxml│   │   ├── counter$6c3d87bf.wxml│   │   ├── index$622cddd6.wxml│   │   ├── logs$31942962.wxml│   │   └── slots.wxml│   ├── copy-asset│   │   └── assets│   │       └── logo.png│   ├── pages│   │   ├── counter│   │   │   ├── main.js│   │   │   ├── main.wxml│   │   │   └── main.wxss│   │   ├── index│   │   │   ├── main.js│   │   │   ├── main.wxml│   │   │   └── main.wxss│   │   └── logs│   │       ├── main.js│   │       ├── main.json│   │       ├── main.wxml│   │       └── main.wxss│   └── static│       ├── css│       │   ├── app.wxss│       │   ├── pages│       │   │   ├── counter│       │   │   │   └── main.wxss│       │   │   ├── index│       │   │   │   └── main.wxss│       │   │   └── logs│       │   │       └── main.wxss│       │   └── vendor.wxss│       ├── img│       │   └── girl.png│       └── js│           ├── app.js│           ├── manifest.js│           ├── pages│           │   ├── counter│           │   │   └── main.js│           │   ├── index│           │   │   └── main.js│           │   └── logs│           │       └── main.js│           └── vendor.js├── distH5                          H5打包生成的文件目录│   ├── index.html│   └── static│       ├── css│       │   └── app.css│       ├── img│       │   ├── girl.png│       │   └── logo.png│       └── js│           ├── app.js│           ├── manifest.js│           └── vendor.js├── index.html                     入口index.html 页面├── package-lock.json├── package.json                   安装配置文件├── project.config.json├── src                             │   ├── App.vue                     小程序入口vue│   ├── AppH5.vue                   H5入口vue│   ├── api                         小程序和H5分别封装的方法│   │   ├── httpService.js│   │   └── wxService.js│   ├── assets                     静态资源文件│   │   └── logo.png│   ├── components                  组件│   │   └── card.vue│   ├── main.js                     小程序入口js│   ├── mainH5.js                   H5入口js│   ├── pages                       页面内容│   │   ├── counter│   │   │   ├── index.vue│   │   │   └── main.js│   │   ├── index│   │   │   ├── index.vue│   │   │   └── main.js│   │   └── logs│   │       ├── index.vue│   │       └── main.js│   ├── router                      H5路由│   │   └── index.js│   ├── store                       vuex存储│   │   └── index.js│   └── utils                       js封装方法│       └── index.js└── static                          静态资源文件    └── img        └── girl.png

简易说明

路由跳转

分别封装方法

H5 mainH5.js方法

Vue.mixin({  data () {    return {      service: '', // 服务      router: '/', // 路由路径      imgSrc: '' // 图片路径    }  },  methods: {      newroot () {          return  this.$route      },      navigatePageTo (url) {          this.$router.push(url)      },      reLaunchPageTo (url) {          this.$router.replace(url)      },      setStorageSync (name, data) {          sessionStorage.setItem(name, JSON.stringify(data))      },      getStorageSync (name) {          return JSON.parse(sessionStorage.getItem(name))      }  },  created () {      console.log('chrome')      this.service = httpService  }})

小程序main.js

Vue.mixin({  data() {    return {      service: '',      router: '/',      imgSrc: '/'    }  },  methods: {      newroot () {          return this.$root.$mp      },      navigatePageTo (url) {          wx.navigateTo({url: url})      },      reLaunchPageTo (url) {          wx.reLaunch({url: url})      },      setStorageSync (name, data) {          wx.setStorageSync(name, data)      },      getStorageSync (name) {          return wx.getStorageSync(name)      }  },  created() {      // console.log('wx')      this.service = wxService  }})

vuex 数据存储

小程序store 直接挂在 Vue原型上

Vue.prototype.$store = store

H5vue 还是和之前一样

new Vue({  el: '#app',  router,  components: { App },  template: '
   ',  store})

样式编译

如遇样式错乱，注意.postcssrc.js

module.exports = {  "plugins": {    // "postcss-mpvue-wxss": {}, // 打包成H5时注释此行    "postcss-import": {},    "postcss-url": {},   // to edit target browsers: use "browserslist" field in package.json    "autoprefixer": {}  }}

转载地址：http://kkhbb.baihongyu.com/