mpvue 开发教程

1.安装node npm vue-cli(npm install vue-cli -g)
2.创建mpvue小程序项目

vue init mpvue xxx 或者 vue init mpvue-quickstart xxx
	cd xxx
	npm install
	npm run dev

3.微信小程序开发工具打开项目中的dist 文件,需要注册一个小程序 需要填写appid

4.微信小程序的开发工具预览打包发布的功能；实际写代码还是vscode里面；自动编辑到dist文件里面；
5.【提醒】记得在微信开发者工具的菜单》设置 》编辑设置 中，将“保存时自动编译小程序”勾选上，这样当mpvue的代码自动编译完成后，模拟器才会自动刷新界面

6.自动生成的代码结构如图所示：

firstapp
		├── package.json
		├── project.config.json       
		├── static            
		├── src
		│    ├── components
		│    ├── pages
		│    ├── utils
		│    ├── App.vue
		│    └── main.js
		├── config
		│   ├── index.js
		│   ├── dev.env.js
		│   └── prod.env.js
		└── build	

	里面的文件和vue工程一样；说一下project.config.json;
	project.config.json文件是用于管理微信开发者工具的小程序项目的配置文件，其中记录了小程序的appid、代码主目录、以及编译选项等等信息，在微信开发者工具中导入小程序项目的时候主要是通过该配置文件读取和写入配置信息。

7.在每个页面都有一个对应的main.js的文件

import Vue from 'vue'
		import App from './index'

		const app = new Vue(App)
		app.$mount()
		这个文件的内容不需要修改如果想要配置页面头部的样式可以新建文件在同级下文件main.json如下代码：
		{
		   "enablePullDownRefresh": true,
		   "navigationBarTitleText": "文章列表页面"
		}

8.mpvue 组件的封装数据传值都是按照vue

9.在mpvue工程内可以使用微信小程需的原生组件,请求接口也可以使用wx.request();生命收起也可以使用

<template>
		  <div class="swiper-box">
			<swiper class='swiper'
					autoplay='true'
					:interval='swiper.interval'
					:indicator-dots='swiper.indicatorDots'
					:indicator-color='swiper.indicatorColor'
					:indicator-active-color='swiper.indicatorActiveColor'
					:circular='swiper.circular'
					:previous-margin='swiper.previousMargin'
					:next-margin='swiper.nextMargin'>
			  <block v-for='(item,index) in listImg' :key='index'>
				<swiper-item class='swiper-item'>
				  <img :src="item" alt="">
				</swiper-item>
			  </block>
			</swiper>
		  </div>
		</template>

10.关于数据共享vuex的使用；
先在src目录下新建一个stores目录，接着在stores目录下新建一个名为global-store.js的文件

import Vue from 'vue'
	import Vuex from 'vuex';
	
	Vue.use(Vuex);
	
	export default new Vuex.Store({
	  state: {
	    count: 0
	  },
	  mutations: {
	    increment: (state) => {
	      state.count += 1
	    },
	    decrement: (state) => {
	      state.count -= 1
	    }
	  }
	});
	使用vuex:
	<template>
	  <div class="container btns">
	    <button class="calbtn" @click="hanleDecrement">-</button>
	    <span class="calnum">{{count}}</span>
	    <button class="calbtn" @click="hanleIncrement">+</button>
	  </div>
	</template>
	
	<script>
	import globalStore from "../../stores/global-store";
	
	export default {
	  computed: {
	    count() {
	      return globalStore.state.count;
	    }
	  },
	
	  methods: {
	    hanleIncrement() {
	      globalStore.commit("increment");
	    },
	
	    hanleDecrement() {
	      globalStore.commit("decrement");
	    }
	  }
	};
	</script>
	
	<style scoped>
	.btns {
	  display: flex;
	  align-items: center;
	}
	.calnum {
	  color: red;
	  font-size: 32px;
	}
	</style>

11.mpvue中正确的引用小程序的自定义组件
通过npm 下载 npm i iview-weapp
下载完成后，到它的目录中寻找名为dist的目录，这里面存放的就是iView Weapp原生小程序自定义组件代码
你可以将上面提到的整个dist目录复制到你的mpvue工程下的static目录下（记得一定要是static目录，否则这些代码会被mpv ue编译器错误的进行处理），然后给这个dist目录改个名字，比如叫iview
要在src/pages/index/index.vue中使用iView中的i-button组件，那么就先要在src/pages/index/main.json（如果 没有该文件，则新建一个）中进行如下配置

{
  "usingComponents": {
    "i-button": "../../static/iview/button/index"
  }
}