最經常的使用的是利用mui做底部的導航欄 利用mint-ui可以製作輪播圖，頭部標籤等

  這裡要注意的是：mint-ui一定要記得匯入樣式  在寫輪播圖的時候高度一定要記得寫出來 預設是沒有高度的

    mui:要把相應的lib包複製到相應的路徑下

//匯入mint-ui 這個是按需匯入mint-ui
import { Header,Swipe, SwipeItem } from 'mint-ui';
import "mint-ui/lib/style.css"  //引入檔案的樣式 可以設定輪播圖的樣式為橫向的 輪播圖記得寫高
Vue.component(Header.name, Header);
Vue.component(Swipe.name, Swipe); //輪播圖
Vue.component(SwipeItem.name, SwipeItem);



//進行匯入miui  記得把 lib複製到目錄中去
import './lib/MUI/css/mui.css'
import './lib/MUI/css/icons-extra.css'
 

assets放的是圖片類的資源

components放的是一些小的元件

App.vue放的是專案中放的是專案最原始的頁面

以 .vue結尾的稱為單檔案元件

路由就是根據網址的不同返回不同的內容給使用者 router-view顯示的是當前路由地址對應的內容

@表示src這個目錄

在一個組建當中要申明對一個子元件的引用的時候：

  1.首先要進行匯入

  2.然後在進行註冊到頁面中去

  3.然後在template裡面進行展示

<template>
    //這裡面進行展示就好啦
    <div>
        <home-header></home-header>
        <home-swier></home-swier>
        <home-icons></home-icons>
    </div>
</template>
<script>
//這邊要宣告對子元件的引用 
    // 首先先進行匯入
    import HomeHeader from './component1/Header';
    import HomeSwier from './component1/Swier';
    import HomeIcons from './component1/Icons';
    //然後在進行註冊到home中去
    //最後在template裡面進行展示元件<home-header></home-header><home-swier></home-swier><home-icons></home-icons>
export default {
    name:'home',
    components: {
        HomeHeader,
        HomeSwier,
        HomeIcons
    }
}
 

父元件向子元件傳值的詳細步驟：

  1.首先使用axios傳送ajax請求得到資料 具體程式碼如下：

//首先定義一個生命週期函式 一旦掛載頁面就會立即執行
mounted () {
    this.getHomeInfo();
}
//然後在methods裡面進行定義相應的方法
methods: {
    getHomeInfo() {
        axios.get('api/index.json').then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc(res){ //這邊是接收後端傳遞過來的資料
        res=res.data
        if(res.ret&&res.data){ //判斷是否有值 是否正確
            this.swiperList=res.data.swiperList; //得到資料
        }
    }
}
 

   這裡要注意的是vue-cli腳手架工具提供了一個配置後臺代理的功能

   需要我們自己配置一個 vue.config.js的檔案 這個是webpack自己提供的我們只需要使用即可

//下面是進行配置方向代理的結構非常重要
module.exports = {
    devServer: {
      proxy: {
          'api': { //如果請求路徑是以api開頭的話 改下面的配置
              target: 'http://localhost:8080/', //轉發埠
              ws: true, // 是否啟用websockets
              changOrigin: true, //開啟代理：在本地會建立一個虛擬服務端，然後傳送請求的資料，並同時接收請求的資料，這樣服務端和服務端進行資料的互動就不會有跨域問題
              pathRewrite: {
                  '^/api' : '/mock'//所有的請求路徑要是以 /api開頭的話就會被轉發到 /mock目錄下
              }
          }
      }
    }
  }

  2.得到相應的json資料之後，定義一個用來存放資料的空陣列 有點像java裡面定義一個空的陣列啊 字串什麼的 swiperList:[] 字串的話：city:'';

//在data裡面進行定義一個用來存放資料的空陣列 到時候通過data裡面的資料 傳遞到子元件裡面進行展示
data () {
    return {
        wriperList:[], //定義一個用來存放資料的空陣列
    }
}

  3.然後在展示的template裡面對相應繫結相應的屬性 因為父元件向子元件傳值都是靠繫結屬性來實現的 父元件向子元件進行傳值 通過屬性來進行 引號裡面的值就是data裡面的 :是用來繫結屬性的

  <home-swier :swiperList="swiperList"></home-swier>

  4.然後在子元件裡面進行接收父親傳遞過來的資料 最後使用v-for=""迴圈展示在頁面上

//接收父親傳遞過來的資料
props: {
    swiperList:Array; //設定傳遞過來的資料型別是Array型別
}
//然後在頁面上迴圈展示就好了
<template>
    <div>
        <mt-swipe :auto="3000">
            <mt-swipe-item 
            v-for="item of swiperList" :key="item.id">
                <img :src="item.imgUrl" alt="">
            </mt-swipe-item>
        </mt-swipe>
    </div>
</template>

怎麼定義一個新的元件並且點選相應的位置跳轉到這個路由頁面呢？？？

  1.首先現在router.js裡面進行定義一個相應的路由連線 這樣只要router-link匹配上就可以了

//@表示src下面的路徑 進行匯入路由
import City from '@/components/city/City' //@表示src資料夾下面
Vue.use(Router)


//設定相應的路由
export default new Router({
  routes: [
    {
      path: '/', //這個是根路徑
      name: 'home',
      component: Home
    },
    {
      path: '/citys',  //path匹配得到的路徑 展示對應的component元件 要與相應的 router-link to="/citys" 相匹配就行了
      name: 'City',
      component: City
    },  
  ]
})

2.在要跳轉的位置用router-link標籤包起來

<template>
    <div>
        <div class="header">
            <input type="text" placeholder="輸入城市/景點/遊玩主題">
            <div class="search"></div>
            <router-link to="/citys">  <!--點選這邊就會跳轉到上面的citys路由介面-->
            <div class="header-right" v-for="item of city" :key="item.id">
                    <span>{{item.name}}</span>
                    <img src="@/images/sanjiao.png" alt="">
            </div>
            </router-link>
        </div>
    </div>
</template>

完畢

還要注意的是 如果在template裡面某段程式碼不能執行 

  v-if="list.length"   //如果長度為0的話是不會執行的但是儘量不要在template裡面進行邏輯的處理

  可以使用具算屬性：

  computed: {showSwiper () {return this.length}}   上面就可以在直接寫成 v-if="showSwiper" 就行了