nuxt.js、koa2項目踩坑

一、在用vue寫項目時，寫組件必須寫上name屬性，且在引用組件時，組件名首字母大寫，且在模板結構中首字母小寫，必須是這樣寫纔可以。組件名首字母大寫，模板中用首字母與後面名字用-分隔都不可以。代碼如下：

組件：

<template>
  <div>
    <ul class="navlist">
      <li v-for="(item,idx) in navlist" :key="idx">
        <a :class="idx===0?'cur':''" :href="item.url">{{item.name}}</a>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'e-nav'
}

引用組件的父組件：

<el-col :span="19">
            <enav/>
          </el-col>



import Enav from '../components/index/header/nav'
export default {
  components: {
    Enav
  },
  data() {
    return {

    }
  }
}
</script>

二、在pages頁面組件中，如果需要更改引用的components中組件的樣式時，直接在頁面組件中的style標籤中寫是不起作用的。因爲nuxt.js先運行middleware。生命週期如下圖所示：

 

 

 

 

解決方法：是不引用公共的頭部的組件，在頁面組件中單獨寫頭部的dom結構，或者另外再建個組件，把搜索框去掉。問題得到解決，但是對於在頁面組件中不能更改引用的組件的樣式還是有點疑惑。。。。。

三、當部署到服務器上時，運行npm run build會出現Nuxt Fatal Error, Error: Cannot import module '@nuxt/core'這個錯誤，

解決辦法：重新把項目目錄刪除，從gitlab上拉取一份新的，重新npm install ,再運行竟然好了。我想應該是有些包沒安裝成功導致的。

參考鏈接：https://cmty.app/nuxt/nuxt.js/issues/c9236

四、寫nuxt.js項目時，用到的最多的就是組件，一般在頁面組件中引入components中的組件，然後通過props把數據傳遞到子組件中。例：

//頁面組件中引入Garousel這個子組件，通過：carousel-list這個自定義指令將carouselList數據傳遞到子組件
<div class="gardenia_carousel">
          <gcarousel :carousel-list="carouselList"/>
        </div>


components: {
    Gcarousel
  },
  async asyncData(context) {
    try {
      let { status, data } = await context.$axios.get(`/gardenia/menu?id=50`)
      let menu = data.menu.resources
      if (status === 200) {
        
        //輪播圖
        let paramsCarousel = {
          classifyOneId: menu[8].id,
          // classifyTwoId: menu[8].resources[0].id,
          limitSize: 3,
          orderType: 2,
          coType: 8
        }
        let carouselList = await context.$axios.post(`/gardenia/home`, paramsCarousel)
        return {
          menu,
          carouselList: carouselList.data.data
        }
      }
    } catch (err) {
      console.log("err:===", err)
    }
  },


//在Gcarousel組件中這樣寫：
<div id="carousel-example-generic" class="carousel slide gardenia_slider" data-ride="carousel">
      <div class="carousel-inner" role="listbox">
        <div
          class="item"
          v-for="(item,idx) in carouselList"
          :key="idx"
          :class="idx===0? 'active':''"
        >
          <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-7">
              <a :href="item.coLink" target="_blank">
                <img :src="item.coCoverImg" alt="banner">
              </a>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-5">
              <div class="carousel-caption">
                <h2 class="swiper_title">
                  <a :href="item.coLink" target="_blank">井岡山勝利會師</a>
                </h2>
                <p class="swiper_intro">
                  <a :href="item.coLink" target="_blank">{{item.coItdc}}</a>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- Controls -->
      <a
        class="left carousel-control"
        href="#carousel-example-generic"
        role="button"
        data-slide="prev"
      >
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a
        class="right carousel-control"
        href="#carousel-example-generic"
        role="button"
        data-slide="next"
      >
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>


<script>
export default {
  name: 'e-nav',
  props: { carouselList: Array },
  data() {
    return {
    }
  },
  created() {
  }
}
</script>