calendar　|--dist　build生成的目錄　|--doc  展示圖片　|--src　　　|--assets 資源　　　|--components　　　　　|--calendar  日期組件　　　　　|--dateScroll 滾動的子組件　　　|--css　　　|store  vuex目錄　　　　　|--modules　　　　　　　|--calendar  　　　　　|--mutation   組件的一些狀態　　　　　|--store　　　|App.vue  入口　　　|main.js

  <template>   <div id="app">    <p @click = "setDate">點擊設置日期</p>     <!--顯示返回的日期-->    <p>{{date}}</p>     <!--組件-->    <com-calendar :style = "calendar" :startTime = "start" :endTime="end"></com-calendar>      <!--遮罩-->    <div v-show = "mark" class="mark" @touchmove.stop.prevent ="" @touchstart.stop.prevent ="" @touchend.stop.prevent =""></div>   </div>  </template>  <script>   require('./css/style.scss');  import calendar from './components/calendar';  export default {   name: 'app',   data () {    return {     //選擇日期的開始返回，默認是1900 - 2050      start:1950,      end:2030    }   },   components:{    comCalendar:calendar   },   methods:{    setDate:function () {     //觸發日期組件     this.$store.dispatch('calendarStatus',true);    }   },    computed:{     //遮罩狀態     mark:function () {      return this.$store.getters.markStatus     },     //組件狀態     calendar:function () {      return this.$store.getters.getCalendarStatus?{ display:'block'}:{ display:'none'};     },     //返回的日期     date:function () {      return this.$store.getters.getCalendarDate;     }    }  }  </script>

# install dependenciesnpm install# serve with hot reload at localhost:8081npm run dev# build for production with minificationnpm run build