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>