基于mint-ui的移动应用开发案例二（项目搭建）

本节包含以下内容：

• 使用vue-cli脚手架搭建一个项目
• 项目的主界面搭建
• vue-router的使用

1.项目搭建

使用vue-cli的脚手架可以帮助我们快速的搭建一个基于webpack的vue项目，在命令行输入 vue  init  webpack '项目名称' ，可以快速的创建一个完整的工程。这里一路的敲回车保持默认就可以了。

其次我们进入项目根目录，在命令行输入 npm install   进行依赖的安装，如果速度慢的话可以使用cnpm安装。安装过程中遇到莫名其妙的错误可以将node_modules目录删除后重新npm install。

接着我们安装我们本项目需要用到的一些依赖，这里我一次性都安装了，也可以用到哪个安装哪个。要install的有：vuex，axios，mint-ui，echarts，css-loader，style-loader。（以上如果在使用vue-cli创建项目时根据提示安装过的话，不需要再次安装了）。这些依赖安装时是要添加到dependencies里面去的。

接着我们要配置一下我们的webpack.base.conf.js文件，将里面的eslint代码检查给注释掉，以为我们开发阶段要按照这种规则来编码的话，是很费事的一件事。

接下来在项目根目录下运行 npm run dev就可以运行项目了，运行成功的界面显示如下：

2.项目主界面搭建

首先，项目的结构目录如下，每个人风格不一样，根据项目组规定来就好了。

由上一节的演示图可以看到，主界面的布局由两部分组成，底部Tab和剩余的显示部分。所以这里我们就需要在App.vue中设置我们的页面，这要用到路由。
不过首先，我们先将底部的Tab抽取出来成为一个组件使用。代码如下：

<template>
  <div id="tab-bar">
    <mt-tabbar v-model="selected" v-show="isShow" fixed class="border-1px-top">
      <mt-tab-item id="main">
        <img :src="img1" slot="icon">首页
      </mt-tab-item>
      <mt-tab-item id="tool">
        <img :src="img3" slot="icon">应用中心
      </mt-tab-item>
      <mt-tab-item id="my">
        <img :src="img5" slot="icon">我的
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>
<style>
</style>
<script>
  export default {
    data(){
      return {
        selected: 'main',
        img1: "static/home_selected.png",
        img3: "static/tool.png",
        img5: "src/assets/logo.png"
      }
    },
    computed: {
      isShow: function () {
        return true;
      }
    },
    watch: {
      'selected': {
        handler(){
          if (this.selected == "main") {
            this.$router.push('/main');
            this.img1 = "static/home_selected.png"
          } else {
            this.img1 = "static/home.png"
          }
          if (this.selected == "tool") {
            this.$router.push('/tool');
            this.img3 = 'static/tool_selected.png'
          } else {
            this.img3 = 'static/tool.png'
          }
          if (this.selected == "my") {
            this.$router.push('/my')
            this.img5 = "static/user_selected.png";
          } else {
            this.img5 = "static/user.png";
          }
        }
      }
    }
  }
</script>

1.v-show的属性，是用来控制其是否显示的，因为我们的一些界面（比如备忘列表界面）是不需要显示底部tab的，所以这里就要将底部的tab隐藏
掉。这里先写死，后面会有用vuex来进行管理。
2.将selected作为观察者，是因为要处理其显示的改变和进行页面跳转，当某一个tab选中时，进行selected的icon显示。这些逻辑都是在watch里面处理的。
3.fixed是将tabbar固定在底部栏。

底部栏有了以后，我们就要将其作为主界面的一部分应用上去了。具体是修改项目的App.vue文件，代码如下：

<template>
  <div id="app">
    <div class="content-div">
      <!--<transition enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">-->
        <router-view/>
      <!--</transition>-->
    </div>
    <footer-bar class="footer"></footer-bar>
  </div>
</template>

<script>
  import Footer from './components/FooterBar.vue'
  export default {
    name: 'app',
    components: {
      'footer-bar': Footer
    },
    computed: {}
  }
</script>

<style scoped="">
  .content-div {
    margin-bottom: 55px;
  }
</style>

接下来就是编写三个tabbar对应的 路由出口界面，并且配置到路由对象中。（main.vue,my.vue,tool.vue）
以main.vue为例，其他类似：

<template>
  <div id="index">
    首页
  </div>
</template>
<style scoped>
  #index{
    display: flex;
    justify-content: center;
    margin-top: 100px;
  }
</style>
<script>
  export default{}
</script>

然后将这三个界面配置到router文件夹下的index.js中去：

import Vue from 'vue'
import Router from 'vue-router'
import Main from '../pages/main.vue'
import Tool from '../pages/tool.vue'
import My from '../pages/my.vue'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/", component: Main
    },
    {
      path: '/main', component: Main
    }, {
      path: '/tool', component: Tool
    }, {
      path: '/my', component: My
    }
  ]
})

接着我们修改项目的main.js文件，将路由和其他组件也都引入进来使用。

import Vue from 'vue'
import App from './App'
import router from './router'
import MintUI from 'mint-ui'
//import store from './store/index.js'状态管理的，目前还没用上
import echarts from 'echarts'

Vue.prototype.$echarts = echarts

Vue.use(MintUI);

/*Vue.config.productionTip = false;*/


new Vue({
  el: '#app',
  router,
  //store,
  template: '<App/>',
  components: {App}
});

这里我没有引入mint-ui的css样式，是因为我在index.html中以script标签形式引入了。index.html也做了一点改动，主要是去掉了边距：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="node_modules/mint-ui/lib/style.css">
    <title>a-vue-app-template</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        border: 0;
      }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

这时候我们项目的基本结构已经出来了，这时候在项目根路径下npm run dev可以看到如下效果:

2018-07-12更新：由于后续增加和改进的东西比较多，强烈建议参考github上最新的项目：

https://github.com/JerryYuanJ/a-vue-app-template

    如果你项目搭建中遇到问题，请提交issue或者及时与我联系，谢谢。