vue App項目首頁

本文轉載自查看原文 2018-09-27 00:48 707

1. 下載

npm i mint-ui -S

2. 引入

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

3. mt-header的編寫

注意：從官網直接復制的代碼存在一個bug ，頭部的左右兩側存在間隙

為解決這個問題 ，我們使用
fixed 就好了







4.使用輪播圖的時候，注意將<!DOCTYPE html> 去掉
5.在使用輪播圖后 我們可以將  fixed  去掉了

6.   axios  的使用

Vue.prototype.$axios = Axios;
Axios.defaults.baseURL = 'https://www.sinya.online/api/';

　　請求數據：

created() {
    this.$axios.get('getlunbo')
      .then(res=>{
        console.log(res);
        this.imgs=res.data.message;
      })
      .catch(err=>console.log(err));
  }

　　用 v-for 循環將圖呈現出來

y<mt-swipe :auto="4000">
        <mt-swipe-item v-for="(item,index)  in imgs"  :key="index">
                 <img  :src="item.img" >
        </mt-swipe-item>
   </mt-swipe>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue2.0：（三）、項目開始，首頁入門（main.js，App.vue,importfrom） vue項目打包之后首頁白屏的問題 vue-router中，require代替import解決vue項目首頁加載時間過久的問題將vue項目打包成移動端app 通過cordova將vue項目打包成app 使用HBuilderX將vue項目打包成app 用HBuilderX 打包 vue 項目為 App 的步驟基於Vue的項目打包為移動端app Vue + ElementUI的電商管理系統實例26 項目優化-首頁內容定制 web項目中設置首頁

vue App項目 首頁

免責聲明！

vue App項目首頁