入手mpvue之一：快速搭建一个mpvue结构并新建一个组件后，小程序报错未正确调用page 或page[]未发现组件

背景：

  公司项目重构，要把之前用wepy做的小程序重新用mpvue来做，短期来说又是一次阵痛，又需要一个过渡期来适应新的框架，但长期来说还是值得的，因为以后要做多端适配的时候可以只用一套代码，微调下就行了，相对来说成本更低。

实战:

快速构建项目：

# 1. 先检查下 Node.js 是否安装成功
$ node -v
v8.9.0

$ npm -v
5.6.0

# 2. 由于众所周知的原因，可以考虑切换源为 taobao 源
$ npm set registry https://registry.npm.taobao.org/

# 3. 全局安装 vue-cli
# 一般是要 sudo 权限的
$ npm install --global vue-cli

# 4. 创建一个基于 mpvue-quickstart 模板的新项目
# 新手一路回车选择默认就可以了
$ vue init mpvue/mpvue-quickstart my-project

# 5. 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

安装好后，如果有报错就解决报错，把报错信息复制丢到百度，一般都有清晰的解读的，

如果有警告的话不用管，一般就是提示你有什么东西要升级，或者什么插件改名字了。

然后用微信开发者工具打开，会显示一个小demo，注意微信开发者工具只是用来做调试的，

我们需要用别的编辑器打开建好的项目。我习惯上是用webstorm。

那么我们现在要加上一些我们自己的业务了：

首先，我们要找到src根目录下的main.js，这个文件就类似于原生小程序里的最外层的app.vue，

我们可以在这里配置小程序的一些基本配置。

我们需要在小程序下方加一个tabbar，一般的项目都会用的上这个菜单栏的。

export default {
  // 这个字段走 app.json
  config: {
    // 页面前带有 ^ 符号的，会被编译成首页，其他页面可以选填，我们会自动把 webpack entry 里面的入口页面加进去
    pages: ['pages/logs/main', '^pages/index/main','pages/friends/main'],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    },
    tabBar: {
      color: "#8a8a8a",
      selectedColor: "#017cc0",
      backgroundColor: "#f8f8f8",
      list: [
        {
          pagePath: "pages/index/main",
          text: "首页",
          // "iconPath": "images/home-gray.png",
          // "selectedIconPath": "images/home-blue.png"
        },
        {
          pagePath: "pages/friends/main",
          text: "校友圈",
          // iconPath: "images/earth-gray.png",
          // selectedIconPath: "images/earth-blue.png"
        },
        {
          pagePath: "pages/logs/main",
          text: "我",
          // iconPath: "images/me-gray.png",
          // selectedIconPath: "images/me-blue.png"
        }
      ]
    }
  }
}

红色部分是我新加的，也就是说我需要新建一个friends组件,如下：在fiends组件里新建两个文件

建好以后我们，npm run dev，运行试一下效果，这时小程序那边报错：

这个原因是我们生成的fiiends/main.js里面是空的，我们需要在这个文件里面加入一些东西，

创建和挂载根实例。从而让整个应用都有路由功能：

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

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

这时我们的效果就出来了，并且小程序也不报错了

另外假如小程序报错是：

tabBar[1].pagePath "pages/friends/index" 需在 pages 数组中

这时我们就要看下是不是路径给配错了：

比如：

pagePath: "pages/friends/index",要改成

pagePath: "pages/friends/main"