nuxt.js、koa2项目踩坑

一、在用vue写项目时，写组件必须写上name属性，且在引用组件时，组件名首字母大写，且在模板结构中首字母小写，必须是这样写才可以。组件名首字母大写，模板中用首字母与后面名字用-分隔都不可以。代码如下：

组件：

二、在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数据传递到子组件

          
        


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组件中这样写：

      

        

          

            

              
                
              
            
            

              

                

                  井冈山胜利会师
                
                

                  {{item.coItdc}}
                
              
            
          
        
      
      
      
        
        Previous
      
      
        
        Next