1.创建项目
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 mpvue-quickstart 模板的新项目
$ vue init mpvue/mpvue-quickstart my-project
# 安装依赖
$ cd my-project
$ npm install
# 启动构建
$ npm run dev
此时，可以看到新建了一个dist文件夹（新的模板可能是dist/wx），该目录就是生成的小程序相关代码。这时，只需要启动微信开发者工具，创建小程序项目，并调试即可。
2.mpvue-entry
集中式页面配置，自动生成各页面的入口文件，优化目录结构，支持新增页面热更新
此处有两种使用方式：
方式一： 直接使用基于mpvue-entry的模板
vue init F-loat/mpvue-quickstart my-project
方式二：手动安装mpvue-entry并修改相关的webpack打包代码
# 安装mpvue-entry
npm i mpvue-entry -D
const MpvueEntry = require('mpvue-entry')
module.exports = {
entry: MpvueEntry.getEntry({
pages: 'src/router/index.js',
dist: 'dist/wx/' // 注意!!!!此处的配置应与congig/index.js中的build.assetsRoot保持一致
}),
...
plugins: [
new MpvueEntry(),
...
]
}
// 官方模板生成的项目请务必去除以下配置
module.exports = {
plugins: [
new CopyWebpackPlugin([{
from: '**/*.json',
to: ''
}], {
context: 'src/'
}),
...
]
}
在src目录创建router文件夹并新建index.js
// index.js
module.exports = {
pages: [
{
path: '/pages/home/index',
config: {
usingComponents: {}
}
},
...
],
window: {
navigationBarBackgroundColor: '#ffffff',
navigationBarTextStyle: 'black',
backgroundTextStyle: 'light',
navigationBarTitleText: 'WeChat'
},
tabBar: {
custom: true,
color: '#999',
backgroundColor: '#ffffff',
selectedColor: '#0A2463',
borderStyle: 'white',
list: [
{
text: '首页',
pagePath: 'pages/home/index',
iconPath: 'static/tabs/[email protected]',
selectedIconPath: 'static/tabs/[email protected]'
},
...
],
position: 'bottom'
}
}
3.mpvue-router-patch
在 mpvue 中使用 vue-router 兼容的路由写法
# 安装
npm i mpvue-router-patch -S
// main.js
import Vue from 'vue'
import MpvueRouterPatch from 'mpvue-router-patch'
Vue.use(MpvueRouterPatch)
// 新建`src/router`文件夹
src
├─router
├─routes.js // 页面配置，同时用于mpvue-entry的配置
├─components.js // 页面对应的组件（component）
├─index.js // 整个vue-router的配置
......
// webpack.base.conf.js
// 修改mpvue-entry的配置
module.exports = {
entry: MpvueEntry.getEntry({
pages: 'src/router/routes.js', // 与vue-router共用路由配置
dist: 'dist/wx/'
}),
........
}
至此，我们可以在项目中使用 this.$router和this.$route对象的方法和属性了，具体支持哪些方法和属性,mpvue-router-patch
4.flyio
Fly.js 是一个基于 promise 的，轻量且强大的Javascript http 网络库。目前Fly.js支持的平台包括：Node.js 、微信小程序 、Weex 、React Native 、Quick App 和浏览器。
// 安装
npm install flyio -S
// 创建接口相关的目录src/api，方便接口统一管理
// 因我们的程序需要访问不同的业务接口，这些业务接口基础地址、请求格式、返回格式各有区别
//故创建了不同的业务接口模块，如若接口单一、标准，这里的多个接口模块是不需要的
src
├─api
├─index.js // fly对象创建和统一配置
├─branch.js // 不同的业务接口模块
├─order.js
├─其他业务接口模块
......
// src/api/index.js
// 注意：小程序需要使用的是flyio/dist/npm/wx；h5需要使用的是flyio/dist/npm/fly
import Fly from 'flyio/dist/npm/wx';
/**
* 创建一个默认配置的请求实例
* 对不同的接口提供者发起请求时，在对应的业务接口文件中进行具体的配置即可
*/
export default function () {
return new Fly();
}
// src/api/branch.js
import createHttp from './index';
let api = createHttp();
api.config.baseURL = 'https://your/api/base/path/'; // 注意：小程序只支持https、wss协议
api.interceptors.response.use(
(response) => {
return response.data;
},
(err) => {
return Promise.resolve(err);
}
)
const getBranchList = function () {
return api.get('/branch.json');
}
export {
getBranchList
}
5.状态管理
# 安装 vuex，使用mpvue模板创建项目时已选了vuex的，此处可省略
npm install vuex --save
# 安装vuex-persistedstate，使vuex状态持久化
npm install vuex-persistedstate --save
// 创建src/store文件夹
src
├─store
├─index.js // 组装模块并导出store的地方
├─mudule.const.js // 业务常量定义在这里，这样就可以在template、script中同时使用了
├─其他需要分割的模块文件
......
// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate' // state数据持久化
import appConst from './module.const'
Vue.use(Vuex)
export default new Vuex.Store({
plugins: [
createPersistedState({
paths: [ // 需要被持久化的state
'token'
],
storage: window.sessionStorage // 持久化存储方式
})
],
state: {
token: '',
counter: 0
},
getters: {},
mutations: {},
actions: {},
modules: {
appConst
}
})
// src/store/module.const.js
// vuex模块：常量管理
export default {
state: {
ORDER_STATUS_PAID: 'paid'
}
}
// src/main.js
import store from './store/index'
const app = new Vue({
store,
...App
})
6.vant weapp
step 1 安装vant weapp组件
# 安装vant weapp
cd your/path/to/dist
npm init
npm i vant-weapp -S --production
注意：此处安装vant weapp尽量使用npm安装，不要用cnpm安装。因为cnpm安装会在node_modules目录中生成[email protected]@vant-weapp目录，这样去进行第二步的构建npm时，会在miniprogram_npm目录中生成对应的[email protected]@vant-weapp目录，组件声明需要写成这样
"usingComponents": {
"van-button": "/miniprogram_npm/[email protected]@vant-weapp/button/index"
}
无疑，这样后期如果需要组件升级的话会是个大麻烦。
step 2 微信开发者工具构建npm
点击开发者工具中的菜单栏：工具 --> 构建 npm
勾选“使用 npm 模块”选项：设置-项目设置
step 3. 使用vant weapp组件
// app.json或页面json文件中
"usingComponents": {
"van-button": "/miniprogram_npm/vant-weapp/button/index"
}
// vue中直接使用
<div class="demo-container">
<div class="demo-title">按钮</div>
<div class="demo-row">
<label><van-button type="default">默认按钮</van-button></label>
<label><van-button type="primary">主要按钮</van-button></label>
</div>
<div class="demo-row">
<label><van-button type="warning">警告按钮</van-button></label>
<label><van-button type="danger">危险按钮</van-button></label>
</div>
</div
注意： 需要修改忽略文件，设置dist/wx/package.json文件为不忽略文件
#.gitignore
dist/wx/*
!dist/wx/package.json