详解Nuxt.js 实战集锦

npm create nuxt-app <project-name>

// SSR方式：
// 1、nuxtServerInit 方法

actions: {
  async nuxtServerInit({commit},{req,app}) {
    let {data: {province, city}} = await axios.get('/aa/bb')
    commit('home/setPosition',{province: '', city: ''})
  }
}

// 2、middleware 属性

middleware: async (ctx) => {
  let {data: {province, city}} = await axios.get('/aa/bb')
}

// NO-SSR
vue 组件 mounted 函数发送请求

<script>
export default {
 layout: 'plusBuy',
 ...
}
</script>

// 如果layout文件中建立了一个单独的文件，则在使用中也要指定
<script>
export default {
 layout: 'plusBuy/plusBuy',
 ...
}
</script>

"config": {
  "nuxt": {
    "host": "0.0.0.0",
    "port": 3000
  }
}

modules: ['@nuxtjs/axios'], // 不需要加入@nuxtjs/proxy

axios: {
  proxy: true
},
proxy: {
  '/wlfrontend': { // 请求到 /wlfrontend 代理到请求 http://10.102.140.38:7001/wlfrontend
    target: 'http://10.102.140.38:7001',
    changeOrigin: true // 如果接口跨域，需要进行这个参数配置
  },
  '/scenery': { // 将'localhost:8080/scenery/xxx'代理到'https://m.ly.com/scenery/xxx'
    target: 'https://m.ly.com', // 代理地址
    changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
    secure: false // 默认情况下，不接受运行在 HTTPS 上，且使用了无效证书的后端服务器。如果你想要接受，只要设置 secure: false
  }
}

async asyncData ({ query, store, req }) {
  if (!process.server) return
}

async fetch({ store, params }){
  if (!process.server) return
}

created(){
  if (!process.server) return
},

<template>
  <div class="plusBuy">
    <nuxt keep-alive />
  </div>
</template>

router: {
  prefetchLinks: false, // 全局禁用所有链接上的预取
}
render: {
  resourceHints: false, // 添加prefetch和preload，以加快初始化页面加载时间。如果有许多页面和路由，可禁用此项
},

export default {
  // 方式一：
  head: {
    script: [
      { type: 'text/javascript', src: 'https://js.40017.cn/cn/min/"htmlcode">

// 1. 在子页面父元素加
<template>
  <div class="plus" ref="mainPage"></div>
</template>

// 2. 样式设置100%滚动
.plus {
  height: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling : touch;
}

// 3. 再添加滚动事件
function scrollEvent() {
  var that = this;
  let dom = this.$refs.mainPage;

  dom.onscroll = function() {
    let wh = dom.scrollTop;
    // 页面上滑，出现
    wh > 100 "htmlcode">

computed: {
  ...mapState('plusBuy', {
    nickName: state => state.nickName
  })
}

...mapMutations('plusBuy', {
  setCityId: 'setCityId' // 将 `this.setCityId()` 映射为 `this.$store.commit('setCityId')`
})

...mapActions('plusBuy', {
  login: 'login' // 将 `this.login()` 映射为 `this.$store.dispatch('login')`
})


9、asyncData不可以调用this，如果有好多个异步或数据进行处理，如何优化asyncData()


// 可以使用类
class A {
  aatest(aa){
    console.log(aa)
  }
}

// 调用方法
async asyncData ({ query, store, req }) {
  var test = new A();
  test.aatest(123);
}


10、如何获取cookie


// 服务端获取cookie
b_getToken(req = {},c_name){
  if (req.headers && req.headers.cookie) {
    var req_Cookies = req.headers.cookie.split("; ")
    let tokens = ''
    req_Cookies.forEach(v => {
      if (v.indexOf(c_name + "=")>=0) {
        tokens = v
      }
    })
    return tokens.split('=')[1]
  } else {
    return ''
  }
}

// 客户端获取cookie
getCookie: function(c_name) {
  if (document.cookie.length > 0) {
    //先查询cookie是否为空，为空就return ""
    let c_start = document.cookie.indexOf(c_name + "=") || ''; //通过String对象的indexOf()来检查这个cookie是否存在，不存在就为 -1
    if (c_start != -1) {
      c_start = c_start + c_name.length + 1; //最后这个+1其实就是表示"="号啦，这样就获取到了cookie值的开始位置
      let c_end = document.cookie.indexOf(";", c_start); // 为了得到值的结束位置。因为需要考虑是否是最后一项，所以通过";"号是否存在来判断
      if (c_end == -1) {
        c_end = document.cookie.length;
      }
      return unescape(document.cookie.substring(c_start, c_end)); 
    }
  }
  return "";
},

// 调用
let token = '';
if(process.server){
  token = serverUtilsFn.b_getToken(req,'17uCNRefId');
  console.log('server:' + token)
}else {
  token = utilsFn.getCookie('17uCNRefId');
  console.log('client:' + token)
}


11、axios数据处理问题，重复问题


import axios from 'axios';
import requestCheck from './requestCheck';

// 确保使用 axios.create创建实例后再使用。否则多次刷新页面请求服务器，服务端渲染会重复添加拦截器，导致数据处理错误
const myaxios = axios.create()

// axios.defaults.baseURL = "http://localhost:3000/"

myaxios.interceptors.request.use(config => {
  let req = {...config };
  req.url = req.method.toLocaleLowerCase() == 'post' "htmlcode">

/* 全局过渡动效设置 - 淡出 (fade) 效果*/

.page-enter-active,
.page-leave-active {
  transition: opacity .5s;
}

.page-enter,
.page-leave-active {
  opacity: 0;
}

/* 局部过渡动效设置 - 淡出 (fade) 效果*/

.test-enter-active,
.test-leave-active {
  transition: opacity .5s;
}

.test-enter,
.test-leave-active {
  opacity: 0;
}

// 在要使用的组件页面中
export default {
  transition: 'test',
}


14、如何使用插件


// 1. 安装插件
yarn add swiper -D

// 2. 引入
<script>
import Swiper from 'swiper'
</script>

// 3. 引入样式
<style lang="less" scoped>
  @import "../../node_modules/swiper/css/swiper.css";
</style>


15、如何在组件中使用异步数据
如果组件不是和路由绑定的页面组件，原则上是不可以使用异步数据的。因为 Nuxt.js 仅仅扩展增强了页面组件的data方法，使得其可以支持异步数据处理。
对于非页面组件，有两种方式可以实现数据的异步获取：

  
在组件的mounted方法里面实现异步获取数据的逻辑，之后设置组件的数据，限制是：不支持服务端渲染。
  
在页面组件的asyncData或fetch方法中进行API调用，并将数据作为props传递给子组件。服务器渲染工作正常。缺点：asyncData或页面提取可能不太可读，因为它正在加载其他组件的数据。

总之，使用哪种方法取决于你的应用是否需要支持子组件的服务端渲染。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

        

            
上一篇：Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
            
下一篇：javascript的delete运算符知识点总结