A Mpvue project
# 安装依赖（注意查看package.json里面模块的安装版本号）
npm install
# 小程序运行
npm run dev
# H5运行
npm run devH5
# 小程序打包（打包到dist目录)
npm run build
# H5打包（打包到distH5目录)
npm run buildH5
博客详细说明 https://blog.csdn.net/Aimee1608/article/details/81084553
这个项目是一个mpvue 的demo, 没有具体的业务实现方法，只有简单的页面切换，还有常用的一些方法封装，总体提供分开打包开发的思路
github源码 => https://github.com/Aimee1608/mpvuedemo
需要看详细版有项目内容的，可以看这篇文章，有详细说明 https://blog.csdn.net/aimee1608/article/details/80757077
.
├── 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<template>
<div class="container">
<!-- 图片引用的两种方式 -->
<img class="girl" :src="imgSrc +'static/img/girl.png'" alt="">
<img class="logo" src="../../assets/logo.png" alt="">
<card :text="motto"></card>
<form class="form-container">
<input type="text" class="form-control" v-model="motto" placeholder="v-model" />
<input type="text" class="form-control" v-model.lazy="motto" placeholder="v-model.lazy" />
</form>
<!-- 路由跳转 -->
<a @click="gotoGame('pages/counter/main')" class="counter">去往Vuex示例页面</a>
<a @click="gotoGame('pages/logs/main')" class="counter">去往logs页面</a>
</div>
</template>
<script>
// 组件引用
import card from '@/components/card'
export default {
data () {
return {
motto: 'Hello World'
}
},
components: {
card
},
methods: {
gotoGame (path) {
this.reLaunchPageTo(this.router + path)
}
}
}
</script>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
}
})小程序store 直接挂在 Vue原型上
Vue.prototype.$store = storeH5vue 还是和之前一样
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
store
})