基於Vue的WebApp項目開發（三）

 實現根組件通用的頭部和底部樣式

明白由webpack搭建起來的Vue項目的執行流程，那麼就能夠知道實現這個須要只要在根組件和入口文件上作「手腳」便可

<!--之後項目的根組件-->
<template>
  <div>
    <!--利用mint-ui中的header組件實現整個系統的頭部-->
    <mt-header fixed title="歡迎來到鋒商城"></mt-header>

    <!--路由佔位符-->
    <router-view></router-view>

    <!--利用mui中的tabbar組件實現系統的底部-->
    <nav class="mui-bar mui-bar-tab">
      <a class="mui-tab-item mui-active" href="#tabbar">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首頁</span>
      </a>
      <a class="mui-tab-item" href="#tabbar-with-chat">
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">會員</span>
      </a>
      <a class="mui-tab-item" href="#tabbar-with-contact">
        <span class="mui-icon mui-icon-locked"><span class="mui-badge">0</span></span>
        <span class="mui-tab-label">購物車</span>
      </a>
      <a class="mui-tab-item" href="#tabbar-with-map">
        <span class="mui-icon mui-icon-search"></span>
        <span class="mui-tab-label">搜索</span>
      </a>
    </nav>
  </div>
</template>

<script>
  //負責導出.vue這個組件對象，它本質上是一個Vue對象
  // 因此Vue中該定義的元素均可以使用
  export default {
    data() {
      return {

      }
    },
    methods: {

    },
    created() {

    }
  }
</script>

<style scoped>
  /* 當前頁面的CSS樣式寫到這裏，其中scoped表示這個裏面
      寫的CSS代碼知識在當前組件頁面上有效，不會影響到其餘組件頁面
     * */
</style>

View Code

//導入vue核心包
import Vue from 'vue';

//導入App.vue的vue對象
import App from './App.vue';

//導入vue-router
import vueRouter from 'vue-router';
//將vueRouter對象綁定到Vue對象上
Vue.use(vueRouter);

//導入路由規則對應的組件對象
import login from './components/account/login.vue';

//定義路由規則
var router1 = new vueRouter({
  routes: [{
      path: '/login',
      component: login
    }
  ]
});

//導入mint-ui的css文件
import 'mint-ui/lib/style.min.css';
//導入mint-ui組件對象
import mintui from 'mint-ui';
//在Vue中全局使用mintui
Vue.use(mintui);

//註冊mui的css樣式
import '../statics/mui/css/mui.css';

//導入一個當前系統的全局基本樣式
import '../statics/css/site.css';

//利用Vue對象進行解析渲染
new Vue({
  el: '#app',
  //使用路由對象實例
  router: router1,
  render: c => c(App)
})

View Code

 

實現根組件底部的按鈕激活時樣式設定

有一個很重要的點：就是在切換路由的時候咱們可以激活該路由（router-link）某個class，下面請看詳細開發步驟

步驟一：修改App.vue文件

<!--之後項目的根組件-->
<template>
  <div>
    <!--利用mint-ui中的header組件實現整個系統的頭部-->
    <mt-header fixed title="歡迎來到鋒商城"></mt-header>

    <!--路由佔位符-->
    <router-view></router-view>

    <!--利用mui中的tabbar組件實現系統的底部-->
    <nav class="mui-bar mui-bar-tab">
      <router-link class="mui-tab-item" to="/home">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首頁</span>
      </router-link>
      <router-link class="mui-tab-item" to="/user">
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">會員</span>
      </router-link>
      <router-link class="mui-tab-item" to="/shopcar">
        <span class="mui-icon mui-icon-locked"><span class="mui-badge">0</span></span>
        <span class="mui-tab-label">購物車</span>
      </router-link>
      <router-link class="mui-tab-item" to="/search">
        <span class="mui-icon mui-icon-search"></span>
        <span class="mui-tab-label">搜索</span>
      </router-link>
    </nav>
  </div>
</template>

<script>
  //負責導出.vue這個組件對象，它本質上是一個Vue對象
  // 因此Vue中該定義的元素均可以使用
  export default {
    data() {
      return {

      }
    },
    methods: {

    },
    created() {

    }
  }
</script>

<style scoped>
  /* 當前頁面的CSS樣式寫到這裏，其中scoped表示這個裏面
      寫的CSS代碼知識在當前組件頁面上有效，不會影響到其餘組件頁面
     * */
</style>

View Code

步驟二：建立car.vue和Home.vue組件用做測試（之後這兩個組件仍是很是重要的）

<template>
  <div id="tml">
    <h3>購物車</h3>
  </div>
</template>

<script>
  export default {

  }
</script>

<style>

</style>

View Code

<template>
  <div id="tml">
    <h3>首頁</h3>
  </div>
</template>

<script>
  export default {

  }
</script>

<style>

</style>

View Code

步驟三：建立全局樣式，爲了組件頭部和腳部內容不在根組件App.vue被遮擋（根組件的頭部和腳部都爲固定佈局，脫離了文檔流）

body {
  background: #fff;
}

#tml {
  margin-top: 40px;
  margin-bottom: 50px;
}

View Code

步驟四：配置入口文件main.js（核心代碼在這）

//導入vue核心包
import Vue from 'vue';

//導入App.vue的vue對象
import App from './App.vue';

//導入vue-router
import vueRouter from 'vue-router';
//將vueRouter對象綁定到Vue對象上
Vue.use(vueRouter);

//導入路由規則對應的組件對象
import home from './components/Home.vue';
import shopcar from './components/shopcar/car.vue';

//定義路由規則
var router1 = new vueRouter({
    //改變路由激活時的class名稱
    linkActiveClass:'mui-active',  
  routes:[
      {path:'/home',component:home},
      {path:'/shopcar',component:shopcar}
  ]
});

//導入mint-ui的css文件
import 'mint-ui/lib/style.min.css';
//導入mint-ui組件對象
import mintui from 'mint-ui';
//在Vue中全局使用mintui
Vue.use(mintui);

//註冊mui的css樣式
import '../statics/mui/css/mui.css';

//導入一個當前系統的全局基本樣式
import '../statics/css/site.css';

//利用Vue對象進行解析渲染
new Vue({
  el: '#app',
  //使用路由對象實例
  router: router1,
  render: c => c(App)
})

View Code

 

使用vue-resource實現首頁輪播圖

vue-resource是Vue的一個插件，用來異步獲取相關的資源。關於它的具體用法能夠看這篇博文，現在比較推崇的是axios。不過該項目使用的仍是vue-resource，下面請看開發步驟

步驟一：安裝vue-resource

步驟二：建立一個json文件，存儲相關的數據

homeslide.json

{
  "status": 0,
  "message": [
    {
      "url": "",
      "img": "../../statics/img/home/home01.jpg"
    }, {
      "url": "",
      "img": "../../statics/img/home/home02.jpg"
    }, {
      "url": "",
      "img": "../../statics/img/home/home03.jpg"
    }
  ]
}

View Code

步驟三：配置入口文件main.js

//導入vue核心包
import Vue from 'vue';

//導入vue-router
import vueRouter from 'vue-router';
//將vueRouter對象綁定到Vue對象上
Vue.use(vueRouter);

//將vue-resource在vue中綁定，自動在vue對象實例上注入一個$http對象就可使用ajax方法了
import vueResource from 'vue-resource';
Vue.use(vueResource);

//導入App.vue的vue對象
import App from './App.vue';

//導入路由規則對應的組件對象
import home from './components/Home.vue';
import shopcar from './components/shopcar/car.vue';

//定義路由規則
var router1 = new vueRouter({
  //改變路由激活時的class名稱
  linkActiveClass: 'mui-active',
  routes: [{
      path: '/',
      component: home
    },
    {
      path: '/home',
      component: home
    },
    {
      path: '/shopcar',
      component: shopcar
    }
  ]
});

//導入mint-ui的css文件
import 'mint-ui/lib/style.min.css';
//導入mint-ui組件對象
import mintui from 'mint-ui';
//在Vue中全局使用mintui
Vue.use(mintui);

//註冊mui的css樣式
import '../statics/mui/css/mui.css';

//導入一個當前系統的全局基本樣式
import '../statics/css/site.css';

//利用Vue對象進行解析渲染
new Vue({
  el: '#app',
  //使用路由對象實例
  router: router1,
  render: c => c(App)
})

View Code

步驟四：修改Home.vue文件

<template>
  <div id="tml">
    <!--mint-ui輪播圖-->
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="item in list">
        <img :src="item.img">
      </mt-swipe-item>
    </mt-swipe>
  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    data() {
      return {
        list: []
      }
    },
    created() {
      //當頁面中的data和methods對象都建立完畢之後，就會自動調用created
      this.getimgs();
    },
    methods: {
      getimgs() {
        //實現輪播組件中國的數據請求
        // 1.0肯定url
        var url = '../../statics/json/homeslide.json'
        // 2.0調用$http.get()
        this.$http.get(url).then(function(response) {
          var data = response.body;
          //錯誤處理
          if(data.status != 0) {
            Toast(data.message);
            return;
          }
          //若是服務器返回數據正常，則賦值給list
          this.list = data.message;
        })
      }
    }
  }
</script>

<style>
  .mint-swipe {
    height: 300px;
  }
  
  .mint-swipe-item {
    width: 100%;
    height: 300px;
  }
  
  .mint-swipe-item img {
    width: 100%;
  }
</style>

View Code

項目結構圖：

 

實現首頁導航區域九宮格圖標

步驟一：將MUI的九宮格圖標樣式導入進Home.vue

<template>
  <div id="tml">
    <!--mint-ui輪播圖-->
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="item in list">
        <img :src="item.img">
      </mt-swipe-item>
    </mt-swipe>

    <!--使用MUI的九宮格-->
    <div class="mui-content">
      <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon mui-icon-home"></span>
            <div class="mui-media-body">新聞資訊</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon mui-icon-email"></span>
            <div class="mui-media-body">圖片分享</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon mui-icon-chatbubble"></span>
            <div class="mui-media-body">商品購買</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon mui-icon-location"></span>
            <div class="mui-media-body">留言反饋</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon mui-icon-search"></span>
            <div class="mui-media-body">視頻專區</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon mui-icon-phone"></span>
            <div class="mui-media-body">聯繫咱們</div>
          </a>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    data() {
      return {
        list: []
      }
    },
    created() {
      //當頁面中的data和methods對象都建立完畢之後，就會自動調用created
      this.getimgs();
    },
    methods: {
      getimgs() {
        //實現輪播組件中國的數據請求
        // 1.0肯定url
        var url = '../../statics/json/homeslide.json'
        // 2.0調用$http.get()
        this.$http.get(url).then(function (response) {
          var data = response.body;
          //錯誤處理
          if (data.status != 0) {
            Toast(data.message);
            return;
          }
          //若是服務器返回數據正常，則賦值給list
          this.list = data.message;
        })
      }
    }
  }
</script>

<style scoped>
  /*重寫輪播圖樣式*/ 
  .mint-swipe {
    height: 300px;
  }
  .mint-swipe-item {
    width: 100%;
    height: 300px;
  }
  .mint-swipe-item img {
    width: 100%;
  }
  /*重寫九宮格樣式*/ 
  .mui-content,
  .mui-content ul li a {
    background: #fff;
  }
</style>
</style>

View Code

步驟二：改變九宮格圖標樣式，首先得先準備好相關的圖片資源，而後修改Home.vue中九宮格的背景圖片

Home.vue

<template>
  <div id="tml">
    <!--mint-ui輪播圖-->
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="item in list">
        <img :src="item.img">
      </mt-swipe-item>
    </mt-swipe>

    <!--使用MUI的九宮格-->
    <div class="mui-content">
      <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon mui-icon-home"></span>
            <div class="mui-media-body">新聞資訊</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon mui-icon-email"></span>
            <div class="mui-media-body">圖片分享</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon mui-icon-chatbubble"></span>
            <div class="mui-media-body">商品購買</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon mui-icon-location"></span>
            <div class="mui-media-body">留言反饋</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon mui-icon-search"></span>
            <div class="mui-media-body">視頻專區</div>
          </a>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <a href="#">
            <span class="mui-icon mui-icon-phone"></span>
            <div class="mui-media-body">聯繫咱們</div>
          </a>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    data() {
      return {
        list: []
      }
    },
    created() {
      //當頁面中的data和methods對象都建立完畢之後，就會自動調用created
      this.getimgs();
    },
    methods: {
      getimgs() {
        //實現輪播組件中國的數據請求
        // 1.0肯定url
        var url = '../../statics/json/homeslide.json'
        // 2.0調用$http.get()
        this.$http.get(url).then(function (response) {
          var data = response.body;
          //錯誤處理
          if (data.status != 0) {
            Toast(data.message);
            return;
          }
          //若是服務器返回數據正常，則賦值給list
          this.list = data.message;
        })
      }
    }
  }
</script>

<style scoped>
  /*重寫輪播圖樣式*/
  
  .mint-swipe {
    height: 310px;
  }
  .mint-swipe-item {
    width: 100%;
    height: 300px;
  }
  .mint-swipe-item img {
    width: 100%;
    height: 80%;
  }
  /*重寫九宮格樣式*/
  
  .mui-content,
  .mui-content ul li a {
    background: #fff;
  }
  /*改變九宮格圖標樣式*/
  
  .mui-grid-9 .mui-icon-home:before,
  .mui-grid-9 .mui-icon-email:before,
  .mui-grid-9 .mui-icon-chatbubble:before,
  .mui-grid-9 .mui-icon-location:before,
  .mui-grid-9 .mui-icon-search:before,
  .mui-grid-9 .mui-icon-phone:before {
    content: '';
    display: inline-block;
    width: 50px;
    height: 50px;
    background-repeat: round;
  }
  .mui-grid-9 .mui-icon-home:before {
    background-image: url(../../statics/imgs/Hgrid/1.png);
  }
  .mui-grid-9 .mui-icon-email:before {
    background-image: url(../../statics/imgs/Hgrid/2.png);
  }
  .mui-grid-9 .mui-icon-chatbubble:before {
    background-image: url(../../statics/imgs/Hgrid/3.png);
  }
  .mui-grid-9 .mui-icon-location:before {
    background-image: url(../../statics/imgs/Hgrid/4.png);
  }
  .mui-grid-9 .mui-icon-search:before {
    background-image: url(../../statics/imgs/Hgrid/5.png);
  }
  .mui-grid-9 .mui-icon-phone:before {
    background-image: url(../../statics/imgs/Hgrid/6.png);
  }
</style>
</style>

View Code

步驟三：添加路由（將Home.vue中a標籤換成router-link，href換成to）

<template>
  <div id="tml">
    <!--mint-ui輪播圖-->
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="item in list">
        <img :src="item.img">
      </mt-swipe-item>
    </mt-swipe>

    <!--使用MUI的九宮格-->
    <div class="mui-content">
      <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/news/newlist">
            <span class="mui-icon mui-icon-home"></span>
            <div class="mui-media-body">新聞資訊</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/photo/photolist">
            <span class="mui-icon mui-icon-email"></span>
            <div class="mui-media-body">圖片分享</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/goods/goodslist">
            <span class="mui-icon mui-icon-chatbubble"></span>
            <div class="mui-media-body">商品購買</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/feedback">
            <span class="mui-icon mui-icon-location"></span>
            <div class="mui-media-body">留言反饋</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/vide">
            <span class="mui-icon mui-icon-search"></span>
            <div class="mui-media-body">視頻專區</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/callme">
            <span class="mui-icon mui-icon-phone"></span>
            <div class="mui-media-body">聯繫咱們</div>
          </router-link>
        </li>
      </ul>
    </div>

  </div>
</template>

<script>
  import { Toast } from 'mint-ui';
  export default {
    data() {
      return {
        list: []
      }
    },
    created() {
      //當頁面中的data和methods對象都建立完畢之後，就會自動調用created
      this.getimgs();
    },
    methods: {
      getimgs() {
        //實現輪播組件中國的數據請求
        // 1.0肯定url
        var url = '../../statics/json/homeslide.json'
        // 2.0調用$http.get()
        this.$http.get(url).then(function (response) {
          var data = response.body;
          //錯誤處理
          if (data.status != 0) {
            Toast(data.message);
            return;
          }
          //若是服務器返回數據正常，則賦值給list
          this.list = data.message;
        })
      }
    }
  }
</script>

<style scoped>
  /*重寫輪播圖樣式*/
  
  .mint-swipe {
    height: 310px;
  }
  .mint-swipe-item {
    width: 100%;
    height: 300px;
  }
  .mint-swipe-item img {
    width: 100%;
    height: 80%;
  }
  /*重寫九宮格樣式*/
  
  .mui-content,
  .mui-content ul li a {
    background: #fff;
  }
  /*改變九宮格圖標樣式*/
  
  .mui-grid-9 .mui-icon-home:before,
  .mui-grid-9 .mui-icon-email:before,
  .mui-grid-9 .mui-icon-chatbubble:before,
  .mui-grid-9 .mui-icon-location:before,
  .mui-grid-9 .mui-icon-search:before,
  .mui-grid-9 .mui-icon-phone:before {
    content: '';
    display: inline-block;
    width: 50px;
    height: 50px;
    background-repeat: round;
  }
  .mui-grid-9 .mui-icon-home:before {
    background-image: url(../../statics/imgs/Hgrid/1.png);
  }
  .mui-grid-9 .mui-icon-email:before {
    background-image: url(../../statics/imgs/Hgrid/2.png);
  }
  .mui-grid-9 .mui-icon-chatbubble:before {
    background-image: url(../../statics/imgs/Hgrid/3.png);
  }
  .mui-grid-9 .mui-icon-location:before {
    background-image: url(../../statics/imgs/Hgrid/4.png);
  }
  .mui-grid-9 .mui-icon-search:before {
    background-image: url(../../statics/imgs/Hgrid/5.png);
  }
  .mui-grid-9 .mui-icon-phone:before {
    background-image: url(../../statics/imgs/Hgrid/6.png);
  }
</style>
</style>

View Code