手牵手系列之node+koa2+mpvue全栈（前端）

• Node.js 是一个开源与跨平台的 JavaScript 运行时环境。

http://nodejs.cn/learn

• mpvue （github 地址请参见）是一个使用 Vue.js 开发小程序的前端框架。框架基于 Vue.js 核心，mpvue 修改了 Vue.js 的 runtime 和 compiler 实现，使其可以运行在小程序环境中，从而为小程序开发引入了整套 Vue.js 开发体验。

http://mpvue.com/mpvue/quickstart.html

项目搭建

• 初始化一个 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@2.9

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

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

• 搭建小程序的开发环境

小程序自己有一个专门的微信开发者工具，最新版本下载地址。

这一步比较简单，按照提示一步步安装好就行，然后用微信扫描二维码登陆。 至此小程序的开发环境差不多完成。

• 导入小程序

执行npm run dev命令行，会在根目录中生成dist文件夹，导入即可。如图所示

开始编码

• 目录介绍

pages:页面目录（各个功能文件夹中分别新建index.vue、main.js、style.less等）
app.json:通常用于配置页面路由、底部导航（样式）、顶部标题（样式）等

pages

index.vue

<template>
  <div>首页</div>
</template>

main.js

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

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


===============================================================


app.json

{
  "pages": [
    "pages/index/main",
    "pages/logs/main",
    "pages/categroyList/main",
    "pages/my/main",
    "pages/cart/main",
    "pages/classify/main",
    "pages/topic/main"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "网易严选",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh": true
  },
  "tabBar": {
    "color": "#515151",
    "backgroundColor": "#fafafa",
    "selectedColor": "#d4237a",
    "borderStyle": "white",
    "list": [{
        "text": "首页",
        "pagePath": "pages/index/main",
        "iconPath": "static/tabs/home.png",
        "selectedIconPath": "static/tabs/home-active.png"
      },
      {
        "text": "专题",
        "pagePath": "pages/topic/main",
        "iconPath": "static/tabs/project.png",
        "selectedIconPath": "static/tabs/project-active.png"
      },
      {
        "text": "分类",
        "pagePath": "pages/classify/main",
        "iconPath": "static/tabs/classify.png",
        "selectedIconPath": "static/tabs/classify-active.png"
      },
      {
        "text": "购物车",
        "pagePath": "pages/cart/main",
        "iconPath": "static/tabs/shopCart.png",
        "selectedIconPath": "static/tabs/shopCart-active.png"
      },
      {
        "text": "我的",
        "pagePath": "pages/my/main",
        "iconPath": "static/tabs/my.png",
        "selectedIconPath": "static/tabs/my-active.png"
      }
    ],
    "items": [{
        "name": "首页",
        "pagePath": "pages/index/main",
        "icon": "static/tabs/home.png",
        "activeIcon": "static/tabs/home-active.png"
      },
      {
        "name": "专题",
        "pagePath": "pages/project/main",
        "icon": "static/tabs/project.png",
        "activeIcon": "static/tabs/project-active.png"
      },
      {
        "name": "分类",
        "pagePath": "pages/classify/main",
        "icon": "static/tabs/classify.png",
        "activeIcon": "static/tabs/classify-active.png"
      },
      {
        "name": "购物车",
        "pagePath": "pages/cart/main",
        "icon": "static/tabs/shopCart.png",
        "activeIcon": "static/tabs/shopCart-active.png"
      },
      {
        "name": "我的",
        "pagePath": "pages/my/main",
        "icon": "static/tabs/my.png",
        "activeIcon": "static/tabs/my-active.png"
      }
    ],
    "position": "bottom"
  },
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  }
}

• 配置mpvue支持less

1、 下载less到项目中
npm install less less-loader --save

2、 配置webpack.base.conf.js
{ test: /.less$/, loader: "style-loader!css-loader!less-loader", }

备注：TypeError: this.getOptions is not a function 通常是less-loader版本过高

1.npm uninstall less-loader
2.npm install less-loader@5.0.0