Nuxt入门

准备开始

• 本章要给大家带来的内容是相关Vue中的组件以及一系列常用属性。
• 本章合适人群囊括了除已有开发经验人员以外的小白新手，从how、why、what三个角度来让大家理解并使用该技术…

nuxt(SSR Server Site Render)

---

• 
• 前言：nuxt 前端路由沿用了history模式，通过pushState 更改url，进而局部渲染组件
• 而首屏刷新的时候，通过后端计算并模板渲染，再将html相应给客户端，一定程度解决了首屏白屏的问题

整体预览

• vue前端渲染照旧(history)
• 后端渲染补充
  • asyncData(context): 函数需要return {} ； 该数据会与组件内的data结合，在后端渲染组件前被调用
  • fetch(context): 在组件被创建前调用，用来同步Vuex内store数据
  • context属性
    • 

便捷使用axios

• Install

  $ npm i -S @nuxtjs/axios @nuxtjs/proxy
  

  Nuxt.config.js

  {
    modules: [
      '@nuxtjs/axios',
      '@nuxtjs/proxy'
    ],
    proxy: [
      ['/api/dog', { target: 'https://dog.ceo/', pathRewrite: { '^/api/dog': '/api/breeds/image/random' } }]
    ]
  }
  

  Use Axios

  // 服务端
  async asyncData({ app }) {
    const ip = await app.$axios.$get('http://icanhazip.com')
    return { ip }
  }
  // 客户端
  created() {
  	this.$axios.get('url');
  }
  

关于部署

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oSrtvHrk-1578387019108)(assets/1530797943839.png)]

• 1. npm run build
  2. cd .nuxt/dist
  3. 配置package.json文件 scripts ,添加一项 start-spa: "nuxt start --spa"
  4. 服务端渲染: npm run start(run可以省略)
  5. 单页应用: npm run start-spa

写再最后

为了帮助大家让学习变得轻松、高效，给大家免费分享一大批资料，帮助大家在成为全栈工程师，乃至架构师的路上披荆斩棘。在这里给大家推荐一个前端全栈学习交流圈：??1018453829.欢迎大家进群交流讨论，学习交流，共同进步。

有些人对学习充满激情，但是缺少方向，而在浩瀚的知识海洋中看似无边无际，此时最重要的是要知道哪些技术需要重点掌握，避免做无用功，将有限的精力及状态发挥到最大化。

最后祝福所有遇到瓶颈且不知道怎么办的前端程序员们，祝大家在往后的工作与面试中一切顺利。