小demo

下载pug依赖包：

npm install pug pug-loader pug-filters -D

运行时出现一下错误：npm install –save !!vue-style-loader!css-loader
执行：

$ npm install --save-dev sass-loader style-loader css-loader

出现：Module build failed: Error: Cannot find module ‘node-sass’
执行：

cnpm install node-sass@latest

出现一下：
- Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.
vue只能有一个根标签，如果我们想要添加一个新的标签最好在外层给它包裹起来，这样就可以解决以上错误。

使用的饿了么提供的Mint ui做的 还是比较简单的 主要是熟悉下各个组件组件之间的通信。

项目目录以及代码片：

App.vue:

<template lang="html">
  <div id="app">
    <!-- <router-view/> -->
    <Top/>
    <Bot/>
  </div>
</template>

<script>
import Top from './components/top'
import Bot from './components/bot'

export default {
  components: {
    Top,
    Bot
  },
  name: 'app'
}
</script>

top.vue:

import { MessageBox, Button, Toast, Header, Swipe, SwipeItem } from 'mint-ui'

// Vue.component(Header.name, Header)

export default {
  data () {
    return {
      message: ''
    }
  },
  methods: {
    toast () {
      Toast({
        message: ,
        duration: 1000
      })
    },
    mesbox () {
      MessageBox({
        title: ,
        message: ,
        showConfirmButton: true,
        confirmButtonText: '快点'
      })
    }
  },
  component: {
    Header,
    Swipe,
    SwipeItem,
    Button,
    MessageBox
  }
}

bot.vue:

import { Spinner, Button, Popup } from 'mint-ui'

export default {
  data () {
    return {
      mess: '',
      popupVisible: false
    }
  },
  methods: {
    dosom: function () {
      this.popupVisible = true
    }
  },
  component: {
    Popup,
    Button,
    Spinner
  }
}

main.js:

import Vue from 'vue'
import App from './App'
import router from './router'
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'

Vue.use(MintUI)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})