mpVue 小程序开发笔记

新建项目需要安装命令行工具vue-cli

# 全局安装 vue-cli

$ npm install --global vue-cli

# 创建一个基于 mpvue-quickstart 模板的新项目

$ vue init mpvue/mpvue-quickstart my-project

# 安装依赖$ cd my-project

$ npm install

# 启动构建

$ npm run dev

目录结构

目录结构

目录结构
dist/:项目编译后文件
src/:mpVue代码

添加导航栏
在src/main文件下

export default {
    window:{
        ......
    },
    ......
    // 在这里加入以下代码
}

tabBar: {
color:'#666666',
  selectedColor:'#000000',
  borderStyle:'white',
  backgroundColor:'#f8f9fb',
  list: [
    {text:'榜单',
     pagePath:'pages/index/main',
     iconPath:'static/image/book.png',
     selectedIconPath:'static/image/book.png'},
    {text:'搜索',
      pagePath:'pages/list/main',
      iconPath:'static/image/book.png',
      selectedIconPath:'static/image/book.png' },
    {text:'我的',
      pagePath:'pages/counter/main',
      iconPath:'static/image/book.png',
      selectedIconPath:'static/image/book.png'   }
     ]
}

效果如图

导航栏