概述，因为小程序平台原因(比如不能操作DOM，BOM)，所以还不能完全实现vue的功能。
官方资料
quickstart demo项目目录详解
默认已经熟悉使用webpack开发vue项目，这里只讲src部分。同时需要了解部分小程序开发的知识。
1. mpvue项目和微信小程序的映射关系
主要关系可以在
bulid/webpack.base.conf.js中推断出来。
main.js导出的config字段 编译为小程序的*.json文件，*.vue文件的template部分编译为*.wxml,script部分编译为*.js,style部分编译为*.wxss。src/main.js和src/App.vue会被编译为小程序的app.js、app.json、app.wxss。src/pages下的每个文件夹都对应了小程序的一个页面。每个页面都有以上的映射关系。不会递归遍历。src/components是公共组件部分，可以使用vue的组件重用机制。因为添加页面会改变
bulid/webpack.base.conf.js中的entry配置，所以需要重启webpack(ctrl + c,npm run dev)才能生效支持微信小程序原生组件，事件处理方式需要改为vue方式。
下拉刷新和上拉加载事件
pages/custom-page/index.vue
<template>
<div class="wrapper">
CustomPage
</div>
</template>
<script>
export default {
name: 'CustomPage',
methods: {
},
onReachBottom() {
console.log('searchScrollLower')
},
onPullDownRefresh() {
console.log('PullDownRefresh');
}
}
</script>
pages/custom-page/main.js
import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()
export default {
config: {
navigationBarTitleText: '自定义组件',
enablePullDownRefresh: true
}
}
Vuex的使用
使用示例
可以自定义一个Vue插件，把vuex store 挂在到
$store，在src/main.js里import一下就行了。这样就可以在不同的页面直接使用this.$store获取同一个store对象了。
- store.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './states'
import mutations from './mutations'
import remind from '../pages/remind/store'
Vue.use(Vuex)
const debug = process.env.NODE_ENV !== 'production'
Vue.use({
install(Vue, options) {
Vue.prototype.$store = new Vuex.Store({
state,
mutations,
// 使用了vuex的模块化。
modules: {
remind
},
strict: debug
// plugins: debug ? [createLogger()] : []
})
}
})
src/pages/remind/store.js
// initial state
const state = {
test1: 'test1'
}
// getters
const getters = {
}
// actions
const actions = {
}
// mutations
const mutations = {
test1nn(state, nv) {
state.test1 = nv || 'test1nn'
}
}
export default {
namespaced: true,
state,
getters,
actions,
mutations
}
src/main.js
import './store'
