vue-cli vant組件應用， template應用

1、在index.js中引入vant組件

import { Button } from 'vant'
Vue.use(Button);

import { Cell, CellGroup } from 'vant';
Vue.use(Cell);
Vue.use(CellGroup);

import { Popup } from 'vant';
Vue.use(Popup);

2、template應用。（template標簽，我們都知道是用來寫 html 模板的，且內部必須只有一個根元素（div）（不然報錯））

<template>
    <div>  	 
      <template>
	      <van-button type="default">默認按鈕</van-button>
	      <van-button type="primary">主要按鈕</van-button>
	      <van-button type="info">信息按鈕</van-button>
	      <van-button type="warning">警告按鈕</van-button>
	      <van-button type="danger">危險按鈕</van-button>
      </template>
      <template>  
	      <van-cell-group>
		 	 <van-cell title="單元格" value="內容" />
		 	 <van-cell title="單元格" value="內容" label="描述信息" />
		  </van-cell-group>
	  </template>
	  <template> 
	  	  <van-cell is-link @click="showPopup">展示彈出層</van-cell>
		  <van-popup
			  v-model="show"
			  position="bottom"
			  :style="{ height: '20%' }"
			>
				這是一個彈出層內容
			</van-popup>
	 </template>
    </div>
</template>

<script>

export default {		   
  		name: 'HelloWorld',	   
	  data () {
	    return {	     
	      show: false
	    }
	  },
	  methods:{	  	  		
	  		showPopup() {
		      this.show = true;
		    }			  	  
	  }
}
</script>

<style scoped>
 h3 {
	  font-weight: normal;
	  color:blue;
	}
 a {
		color:#42b983;
	}
.van-cell__title{
	text-align:left

}
</style>

3.template可以for循環

<template>
    <div class="root">

        <template v-for="item,index in 5">
            <div>測試{{index}}</div>
        </template>

    </div>
</template>