美文网首页nuxt.js基础入门教程
nuxt入门教程(八)常用写法

nuxt入门教程(八)常用写法

作者: 党云龙 | 来源:发表于2019-11-01 11:11 被阅读0次

有话说在前面


如果你会用vuecli,那么对于nuxt项目来说大部分常规操作都是一模一样的,不过还是有几个坑需要注意一下。

如何修改head


nuxt本身支持一个head方法,放到跟生命周期同级即可。

head () {
      return {
        title: this.title,
        meta: [{
          hid: 'description',
          name: 'description',
          content: '党云龙个人博客,免费分享前端开发技术。',
        }]
      }
    },

如何加载图片


页面中加载

<!--加载图片-->
<!--<img src="~/assets/image.png">-->

css中加载

background:url("~assets/banner.svg")

组件传值


组件和传值方式跟vuecli一模一样。

父组件 ,这里注意路径的写法

import com from '~/components/comTest.vue'

子组件的写法也跟vuecli一模一样

写法类似vuecli

相关文章

网友评论

    本文标题:nuxt入门教程(八)常用写法

    本文链接:https://www.haomeiwen.com/subject/vorfbctx.html