小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 }})