vue+node.js+webpack開發微信公衆號功能填坑——組件按需引入

　　

初次開發微信公衆號，總體框架是經理搭建，小嘍嘍只是實現部分功能，總體頁面效果

整個頁面使用兩個組件：佈局 FlexBox,搜索框 Search，demo文檔 http://vue.ydui.org/docs/#/quickstart

app.vue

<template>

    <div id="powerrank">

        <yd-flexbox>

            <yd-flexbox-item><span style="font-size: 16px;">測試數據</span></yd-flexbox-item>

        </yd-flexbox>

        <yd-flexbox>

           <yd-flexbox-item>

               <div id="search">
                          <yd-search cancel-text v-model="value"></yd-search>
              </div>

           </yd-flexbox-item>

        </yd-flexbox>

       <yd-flexbox>

            <yd-flexbox-item>能耗排行</yd-flexbox-item>

            <yd-flexbox-item>房間號</yd-flexbox-item>

            <yd-flexbox-item>能耗程度</yd-flexbox-item>

        </yd-flexbox>

       <div id="data">

           <yd-flexbox>

                <yd-flexbox-item>測試</yd-flexbox-item>

                <yd-flexbox-item>測試</yd-flexbox-item>

                <yd-flexbox-item>測試</yd-flexbox-item>

           </yd-flexbox>

       </div>

    </div>

</template>

<script>
　　export default {
　　　　name: 'Powerrank',
　　　　data(){
　　　　　　return{
　　　　　　　　value: '',//對應全部按鈕的v-model，不寫會報錯
　　　　　　}
　　　　}
         }

</script>

<style>

    #powerrank{

      

    }

    .yd-flexbox {

       height:0.8rem;

       background-color: #4695e0;

       color: white;

       font-size: 14px;

       text-align: center;

    }

   

    #search{

       height:50%;

       width:80%;

       background-color: white;

       margin:auto;

       color: #4695e0;

    }

   

    #data .yd-flexbox{

       height:0.5rem;

       color: black;

       background-color: #f4f4f4;

    }

   

    #data .yd-flexbox:nth-child(2n){//奇數行，偶數行顏色不同

       background-color: #ffffff;

    }

</style>

 

index.html

 

main.js

import Vue from 'vue';

import {FlexBox, FlexBoxItem} from 'vue-ydui/dist/lib.rem/flexbox';

import {Search} from 'vue-ydui/dist/lib.rem/search';

import Powerrank from './App';

import 'vue-ydui/dist/ydui.base.css';

 /**

yd-flexbox,yd-flexbox-item,yd-search對應vue中的

 

剛開始不知道寫啥，後來就蒙上了，尬。。。。。。

*/

Vue.component('yd-flexbox', FlexBox);

Vue.component('yd-flexbox-item', FlexBoxItem);

 Vue.component('yd-search', Search);

 

/* eslint-disable no-new */

new Vue({

  el: '#powerrank',

  components: { Powerrank },

  template: '<Powerrank/>'

});

 效果圖