博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue——Nuxt 基础知识
阅读量:5248 次
发布时间:2019-06-14

本文共 2218 字,大约阅读时间需要 7 分钟。

vue.js 是单页面应用,但是对 seo 不友好,nuxt 是基于vue 开发的服务端渲染的框架,最后项目可以打包多个静态页面,解决了 seo 问题

过度动效

  • Nuxt.js 默认使用的过渡效果名称为 page

asyncData

  • asyncData 方法会在组件(仅限于页面组件)每次加载之前被调用,第一个参数是当前页面的 上下文对象,可以利用此方法从后台获取数据,Nuxt.js 会将 asyncData 返回的数据融合到 data 中

  • 不建议使用此方法,因为 created 也能够达到这样的效果,最关键的是下面会说到使用自定义插件的时候,asyncData 方法无法在上下文对象中拿到我们自己定义的属性

插件加载

  • 这里我们详细说下,如何将 axios 作为插件整合到 Vue 实例中去

  • 如果我们的项目是基于 JWT,或许我们需要客户每次发送请求的时候都附带上存储在本地的 Token,

  • 在项目的 plugins目录下新建文件夹和文件,/plugin/http/http.js,/plugin/http/index.js

  • /plugin/http/http.js,内容如下

    import axios from 'axios'export const http = axios.create({  baseURL: 'http://localhost:8888'})http.interceptors.request.use(function (config) {  //.....  config.headers['Authorization'] = 'token'  return config}, function (error) {  return Promise.reject(error)})// console.log(this.$store)http.interceptors.response.use(function (response) {  var code = response.data.code;  if (code === 403) {    //......  }  return response}, function (error) {  return Promise.reject(error)})const httpPlugin = {}httpPlugin.install = function (Vue, options) {  Vue.prototype.$http = http}export default httpPlugin;
  • /plugin/http/index.js,内容如下

    import Vue from 'vue'import httpPlugin from './http.js'Vue.use(httpPlugin)
  • nuxt.config.js 下添加配置

    module.exports = {  plugins: ['~/plugins/http/index.js']}
  • 使用的时候就无需再此引用 axios,关键是添加了 axios 拦截配置

middleware

  • 中间件允许您定义一个自定义函数运行在一个页面或一组页面渲染之前。

  • 每一个中间件应放置在 middleware 目录下,文件名的名称将成为中间件名称,例如 /middleware/check.js,将成为 check 中间件

  • 中间件接受上下文对象作为其第一个参数

    import axios from 'axios'export default function ({ route }) {  return axios.post('http://my-stats-api.com', {    url: route.fullPath  })}
  • nuxt.config.js,添加如下配置

    module.exports = {  router: {    middleware: 'check'  }  }
  • 中间件 check,除了刚进入网站的第一次无法被调用以外,会在路由每一次改变时被调用

no-ssr

  • 加载一些组件常常会出现如下提示,解决办法是用标签 no-ssr 进行包裹

    [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content.

项目打包

  • 推荐使用,npm run generate,最后会打包成多个静态页面

  • 打包之后点击页面,或许无法看到图片,不用担心,你的配置是没有错的,放到 live-server 中就能看到

  • 如果选择打包 选择 build 之后你又 npm run dev 进行开发,那么你将有可能出现以下问题:Cannot read property 'call' of undefine,解决办法:

  • npm run generate,对于静态页面的打包时无法打包动态路由的,例如 _id.vue,官方给的配置是有问题的,GitHub上的解决办法: /users?id=1 这样的形式

帮助文档

转载于:https://www.cnblogs.com/cnloop/p/9300383.html

你可能感兴趣的文章
html标签的嵌套规则
查看>>
[Source] Machine Learning Gathering/Surveys
查看>>
HTML <select> 标签
查看>>
类加载机制
查看>>
tju 1782. The jackpot
查看>>
HTML5与CSS3基础(五)
查看>>
WinDbg调试C#技巧,解决CPU过高、死锁、内存爆满
查看>>
linux脚本中有source相关命令时的注意事项
查看>>
css样式表中的样式覆盖顺序
查看>>
湖南多校对抗赛(2015.03.28) H SG Value
查看>>
REST Web 服务(二)----JAX-RS 介绍
查看>>
hdu1255扫描线计算覆盖两次面积
查看>>
hdu1565 用搜索代替枚举找可能状态或者轮廓线解(较优),参考poj2411
查看>>
bzoj3224 splay板子
查看>>
程序存储问题
查看>>
Mac版OBS设置详解
查看>>
优雅地书写回调——Promise
查看>>
android主流开源库
查看>>
AX 2009 Grid控件下多选行
查看>>
PHP的配置
查看>>