1.初始化一个 mpvue 项目
在终端输入以下命令
//创建一个基于 mpvue-quickstart 模板的新项目
vue init mpvue/mpvue-quickstart my-project
//进入my-project项目
cd my-project
//安装依赖
npm install
//运行小程序
npm run dev
2.运行并调试开发 mpvue
需安装微信微信开发者工具，才能看到小程序的运行界面。
选择 小程序项目并依次填好需要的信息：
项目目录：就是刚刚创建的项目目录（非 dist 目录）
AppID：没有的话可以点选体验“小程序”，只影响是否可以真机调试。
项目名称。
3.程序入口
学习过使用小程序原生框架开发的朋友都知道，一个小程序的入口应该包含这三个最重要的部分：
1）app.json
2）app.js
3）首页
有了这三个部分，才能成功运行起一个最简单的小程序。
app.json
app.json是小程序的全局配置文件，其包含了小程序的页面文件路径配置、窗口的全局样式信息、底部选项卡式菜单栏的配置，以及一些小程序网络超时的配置等等。在mpvue中我们应如下配置：
{
"pages": [
"pages/home/main",
"pages/list/main",
"pages/user/main"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "我的第一个小程序",
"navigationBarTextStyle": "black",
"disableScroll": true
},
"tabBar": {
"selectedColor": "#1296db",
"color": "#000",
"list": [
{
"pagePath": "pages/home/main",
"text": "首页",
"iconPath": "static/img/home.png",
"selectedIconPath": "static/img/home-select.png"
},
{
"pagePath": "pages/list/main",
"text": "列表",
"iconPath": "static/img/list.png",
"selectedIconPath": "static/img/my-select.png"
},
{
"pagePath": "pages/user/main",
"text": "我的",
"iconPath": "static/img/my.png",
"selectedIconPath": "static/img/my-select.png"
}
]
}
}
app.js
app.js中包含了小程序的各种原生生命周期方法，如onLaunch、onShow等等。而在mpvue中，它使用了一个简单的Vue组件App.vue来实现等价的功能。我们在这个App.vue组件中可以编写小程序的生命周期方法（通常使用Vue的生命周期方法，但也兼容原生的生命周期方法），也可以在其中加入小程序的全局样式（等价于原生方式下的app.wxss）：
<script>
/* 这部分相当于原生小程序的 app.js */
export default {
created () {
// 调用API从本地缓存中获取数据
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
console.log('app created and cache logs by setStorageSync')
}
}
</script>
<style>
/* 这部分相当于原生小程序的 app.wxss */
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
/* this rule will be remove */
* {
transition: width 2s;
-moz-transition: width 2s;
-webkit-transition: width 2s;
-o-transition: width 2s;
}
</style>
接着，这个App.vue组件被src/main.js引入并被设置了一个mpType的属性值，其值为app。这个值是为了与后面要讲的小程序页面组件所区分开来，因为小程序页面组件和这个App.vue组件的写法和引入方式是一致的，为了区分两者，需要设置mpType值。引入这个App.vue组件后，会用它作为参数来创建一个Vue的实例，并调用$mount()方法加载。下面是这个过程的关键代码行：
App.mpType = 'app'
const app = new Vue(App)
app.$mount()
首页、以及其他页面
每个小程序都需要至少有一个页面，第一个展示的页面被叫做首页。因为前面已经把所有的页面代码都删完了，所以我们现在要新建一个首页。在src/pages目录下，我们新建一个名为index的子目录（请遵循每个页面放入一个子目录的良好习惯），然后在该子目录下，新建2个文件：一个用于实现页面主体功能的index.vue组件，另一个则用于将这个页面组件生成Vue实例并加载的main.js。以后的每一个mpvue页面组件都会拥有这样的结构。
然后在main.js中编写如下代码，非常简单的一段代码，它的功能是引入index.vue并创建Vue实例：
import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()
接着，我们需要实现index.vue页面组件，它的写法是最典型的Vue组件写法。
<template>
<div class="login-container ">
<form class="login-form">
<input type="text" v-model="username" placeholder="请输入用户名" />
<input type="text" v-model="password" placeholder="请输入密码" />
<button @click="handleLogin">登录</button>
</form>
</div>
</template>
<script>
import { login } from '@/assets/js/server';
export default {
data() {
return {
username: "zhanghao",
password: "1234",
}
},
methods: {
handleLogin=() => {
login(`loginname=${this.username}&pwd=${this.password}`, data => {
if (data && '0' == data.retcode) {
}
})
}
}
}
</script>
