mpVue记录2——写一个小demo

1.删掉src文件夹下，components & pages & utils下的所有文件，在pages下创建index文件夹，添加index.vue & main.js文件，目录结构如下

捕获.PNG

2.在src下的app.json中写入(配置小程序的app.json)

{
  "pages": [
    "pages/index/main"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "第一个小程序",
    "navigationBarTextStyle": "black"
  }
}

3.在src下的App.vue中写入（配置onload）

<script>
/* 这部分相当于原生小程序的 app.js */
export default {
  created () {
    console.log('miniapp created!!!')
  }
}
</script>

<style>
/* 这部分相当于原生小程序的 app.wxss */
.container {
  background-color: #cccccc;
}
</style>

4.在src下的main.js中写入（配置模块，创建实例）

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

Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue(App)
app.$mount()

至此，初始值配置完毕，下面写入页面

5.在src下的pages下的index.vue中写入

<template>
  <div class="container" @click="clickHandle">
    <div class="message">{{msg}}</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello'
    }
  },

  methods: {
    clickHandle () {
      this.msg = 'Clicked!!!!!!'
    }
  }
}
</script>

<style scoped>
.message {
  color: red;
  padding: 10px;
  text-align: center;
}
</style>

main.js中写入

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

const app = new Vue(App)
app.$mount()

export default {
  config: {
    // 注意，页面级可配置属性相当于只是`src/main.js`中配置里的`window`部分
    'navigationBarTitleText': '文章列表页面'
  }
}

运行 npm run build，可以在微信开发者工具中同步效果