wpvue初始化2

【注意事项】
由于mpvue也在不断的开发演进，大家在不同时间段使用的时候，可能会遇到和文中的做法不一样的地方。请关注文章的评论区中大家的讨论，寻找解决方案，或者及时查阅官方文档，避免陷入版本更新的坑里哦。

1. 删除初始化自动创建的页面

删掉 src/components 、 src/pages 、 src/utils 三个目录下的所有代码文件

2. 文件重置

2.1 先把小程序重置为一个没有页面的初始状态，将 src/App.vue 文件中的内容重置成：

<script>
  export default {}
</script>

<style>
.appPage {
  position: fixed;
  width: 100%;
  height: 100%;
}
</style>

2.2 将 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()

export default {
  config: {
    pages: []
  }
}

2.2 重置 src/app.json

app.json 是小程序的全局配置文件，其包含了小程序的页面文件路径配置、窗口的全局样式信息、底部选项卡式菜单栏的配置，以及一些小程序网络超时的配置等等。app.json 重置如下：

{
  "pages": [],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "echarts test",
    "navigationBarTextStyle": "black"
  }
}

3. 新建页面

一个独立的页面，在wpvue框架中需要包含三个部分，这三个部分和原生框架的对应关系如下：

• *.vue文件 -> wxml + wxss
• *.js文件 -> js
• *.json文件 -> json

3.1 新建文件夹

echartTest

3.2 新建页面vue文件 echartTest/echartTest.vue

<template>
    <div class="appPage"></div>
</template>

<script>
export default {
  data () {
    return {}
  },

  methods: {},

  created () {

  },

  watch: {},

  components: {}
}
</script>

<style>

</style>

3.3 新建 echartTest/main.js文件

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

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

3.4 新建 echartTest/main.json文件

{
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "echarts test",
  "navigationBarTextStyle": "black"
}

完成之后，编译即会产生原有的结构：