# 初始化项目
vue init mpvue/mpvue-quickstart myproject
cd myproject
# 安装依赖
yarn
# 开发时构建
npm dev
# 打包构建
npm build
# 指定平台的开发时构建(微信、百度、头条、支付宝)
npm dev:wx
npm dev:swan
npm dev:tt
npm dev:my
# 指定平台的打包构建
npm build:wx
npm build:swan
npm build:tt
npm build:my
# 生成 bundle 分析报告
npm run build --report
我们需要用到vant-weapp开源项目中vant UI组件,所以要将vant-weapp下载下来,下来后将其项目下的dist文件全部都copy到我们需要用到原项目中(就是我们开始初始化的项目),为了方便管理,可以在根目录下的static下新建一个vant用于存放UI组件文件;
git clone https://github.com/youzan/vant-weapp.git
我们只需要在我们需要使用组件的页面的配置json文件中引入我们需要的组件即可 比如:index.json
{
// 页面配置,即 page.json 的内容
navigationBarTitleText: '首页',
'usingComponents': {
'van-search': '/static/vant/search/index',
'van-row': '/static/vant/row/index',
'van-col': '/static/vant/col/index',
'van-tab': '/static/vant/tab/index',
'van-tabs': '/static/vant/tabs/index',
'van-cell': '/static/vant/cell/index',
'van-cell-group': '/static/vant/cell-group/index',
'van-radio': '/static/vant/radio/index',
'van-radio-group': '/static/vant/radio-group/index',
'van-field': '/static/vant/field/index',
'van-button': '/static/vant/button/index',
'van-card': '/static/vant/card/index',
'van-popup': '/static/vant/popup/index',
'van-icon': '/static/vant/icon/index',
'van-panel': '/static/vant/panel/index',
'van-action-sheet': '/static/vant/cell-group/index',
'van-switch-cell': '/static/vant/switch-cell/index',
'van-area': '/static/vant/area/index',
'van-dialog': '/static/vant/dialog/index'
}
}
配置vuex 1、目录结构
│ ├── store //状态管理 vuex配置目录
│ │ └── actions.js //actions异步修改状态
│ │ └── getters.js //getters计算过滤操作
│ │ └── mutation-types.js //mutations 类型
│ │ └── mutations.js //修改状态
│ │ └── index.js //我们组装模块并导出 store 的地方
│ │ └── state.js //数据源定义
---------------------
2、main.js中引入store, 并绑定到Vue构造函数的原型上,这样在每个vue的组件都可以通过this.$store访问store对象。
import store from './store/index'
Vue.prototype.$store = store
3、定义初始变量store/state.js
const state = {
userInfo: null
}
export default state
4、mutation类型 方便检测错误和书写,一般写方法
export const USER_INFO = 'USER_INFO'
5、store/mutations.js 写处理方法
import * as types from './mutations-types'
const matations = {
/**
* state:当前状态树
* v: 提交matations时传的参数
*/
[types.USER_INFO] (state, v) {
state.userInfo = v
}
}
export default matations
6、store/index.js 汇总配置,使用vuex-persistedstate,使vuex状态持久化(缓存到本地)
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex)
export default new Vuex.Store({
state,
mutations,
plugins: [
// 使用vuex-persistedstate,使vuex状态持久化(缓存到本地)
createPersistedState({
storage: {
getItem: key => wx.getStorageSync(key),
setItem: (key, value) => wx.setStorageSync(key, value),
removeItem: key => {}
}
})
]
})