nuxtJs入门使用笔记

系统管理员 2022-09-03 05:17 288阅读 0赞

# nuxtJs入门使用笔记 #

### 目录 ###

*  nuxtJs入门使用笔记
 *   *  部分优秀文章推荐
     *  生命周期
     *  区分环境 安装 \`cross-env\`
     *  引入外部资源
     *   *  局部引入和全局引入
         *  设置页面中SEO信息
     *  跨域反向代理处理
     *  nuxt路由理解文章
     *   *  动态路由
     *  监听页面滚动到底部事件
     *  设置meta SEO信息
     *  配置全局工具方法【在服务端可使用】
     *  注册全局指令-检测图片能否加载成功

--------------------

正文开始

## 部分优秀文章推荐 ##

[【超级详细的配置介绍】Nuxt爬坑 (juejin.cn)][Nuxt_ _juejin.cn]

[【配置 Meta| 使用vuex validate |部署|登录状态】Nuxt开发经验分享，让你踩少点坑][Meta_ _vuex validate _Nuxt]

[【入门-科普seo|ssr|spa】实现基于 Nuxt.js 的 SSR 应用 (juejin.cn)][-_seo_ssr_spa_ Nuxt.js _ SSR _ _juejin.cn]

[【入门-项目创建到配置】Nuxt项目搭建到Nuxt项目部署 - 简书 (jianshu.com)][-_Nuxt_Nuxt_ - _ _jianshu.com]

[【缓存|asyncData】——基于Nuxt.js项目的服务端性能优化与错误检测(容错处理) - 路饭网 (45fan.com)][asyncData_Nuxt.js_ - _ _45fan.com]

`路由相关`

[【路由权限】更友好的 Nuxt 路由权限控制 - 简书 (jianshu.com)][Nuxt _ - _ _jianshu.com]

[【全局路由守卫】宅码，Nuxt.js全局路由守卫 (zhaima.tech)][Nuxt.js_ _zhaima.tech]

## 生命周期 ##

![nuxt生命周期][nuxt]

## 区分环境 安装 `cross-env` ##

安装：`yarn add cross-env -D`

配置启动命令

// package.json
    "scripts": { 
        "dev": "cross-env _ENV=dev nuxt",
        "build:test": "cross-env _ENV=test nuxt build",
        "build:prod": "cross-env _ENV=prod nuxt build",
        "start": "nuxt start",
        "generate": "nuxt generate"
      }
    // nuxt.config.js
    export default{ 
        env: { 
        _ENV: process.env._ENV
      },
    }
    // 其它页面使用
    console.log(process.env._ENV)

## 引入外部资源 ##

### 局部引入和全局引入 ###

[外部资源 - NuxtJS | Nuxt.js 中文网][- NuxtJS _ Nuxt.js]

### 设置页面中SEO信息 ###

[SEO HTML 头部 - NuxtJS | Nuxt.js 中文网][SEO HTML _ - NuxtJS _ Nuxt.js]

## 跨域反向代理处理 ##

[如何发起跨域资源请求？ - NuxtJS | Nuxt.js 中文网][- NuxtJS _ Nuxt.js 1]

注意在开发环境中，asyncData中调用时，请求地址要写全路径

// plugins/axios.js 配置开发环境客户端请求是/api【跨域代理】
      $axios.defaults.baseURL = (process.env._ENV === 'dev' && process.client) ? '/api' : process.env.BASE_URL
    
    // package.json
    "scripts": { 
        "dev": "cross-env _ENV=dev BASE_URL=http://172.16.1.216:8500 nuxt",
        "build:test": "cross-env _ENV=test BASE_URL=/ nuxt build",
        "build:prod": "cross-env _ENV=prod BASE_URL=/ nuxt build",
        "start": "nuxt start",
        "generate": "nuxt generate",
        "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
        "precommit": "npm run lint"
      },

## nuxt路由理解文章 ##

[服务端预渲染之Nuxt（路由篇） - SegmentFault 思否][Nuxt_ - SegmentFault]

`nuxt-link`和`router-link`一样，nuxt以后会加入高级用法

### 动态路由 ###

如果想要在`Nuxt`中使用动态路由的话，需要在对应的路由下面添加一个`_参数名.vue`的文件，在`about`文件下面添加一个`_id.vue`

编译后为：`/about/:id`

在实际开发过程当中可能`params`可能会有多个参数 ,可以创建多层文件夹`about => _id=> _name.vue`，此种写法,name为非必填

编译后为：`/about/:id/:name`

## 监听页面滚动到底部事件 ##

//页面渲染完毕后，监听滚动事件
    mounted() { 
      window.addEventListener('scroll', this.handleScroll)
    },
     methods: { 
       //处理方法，在页面具体底部30像素的时候，触发事件
       handleScroll() { 
           const jrscrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollT
           let scrollBottom = document.body.clientHeight - window.innerHeight - jrscrollTop
           if (scrollBottom < 30) { 
             if (this.ScrollFirst) { 
               this.nextpage() //触发这个，下拉加载分页事件
             }
           }
         }
     },
     //记得在销毁当前页面的时候，也就是切换的时候，把监听去掉
     beforeDestroy() { 
       window.removeEventListener('scroll', this.handleScroll, fa
     }

## 设置meta SEO信息 ##

可以在 `nuxt.config.js` 中配置全局的meta信息, 添加`hid`标识，防止子页面覆盖父页面的meta信息， 如果子页面配置了 `title` ，则用的是子页面的`title`,如果没配置，就是用的是全局的 `title`, 添加了`hid`后 `meta`就会叠加。

// nuxt.config.js
    head: { 
        title: '领匠教育',
        meta: [
          {  charset: 'utf-8' },
          {  name: 'viewport', content: 'width=device-width, initial-scale=1' },
          {  hid: 'index-keywords', name: 'keywords', content: '会计培训机构,高级会计师考试培训,中级会计师培训,领匠教育,领匠,lingjiang,lj' },
          {  hid: 'index-description', name: 'description', content: '领匠教育是一家高端会计培训机构,包含高级会计师考试培训,中级会计师培训,初级会计师培训,CPA,CMA等培训，以领引行业潮流,匠心铸就品质的教学理念,并以陪伴式教学服务,得到考生广泛好评!' }
        ],
        link: [
          {  rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
        ]
      },

页面中配置

// index.vue
    export default{ 
        head() { 
            return { 
              title: this.headMeta.title,
              meta: [
                { hid: 'home-description', name: 'description', content: this.headMeta.description},
                { hid: 'home-keywords', name: 'keywords', content: this.headMeta.keywords},
              ]
            }
      	},
        asyncData(context){ 
            // 请求接口获取seo信息
            return { 
                headMeta: { 
                    title: '领匠教育',
                    keywords: '会计培训机构,高级会计师考试培训',
                    description: '领匠教育是一家高端会计培训机构'
                }
            }
        },
        data(){ 
        }
    }

## 配置全局工具方法【在服务端可使用】 ##

1.  `plugins/util.js` 中写入公共全局方法
    
        /** * 注册utils全局方法，服务端可使用 */
        const STATIC_URL = process.env._ENV === 'dev' ? 'http://图片域名地址/' : '/'
        const creatUtils = (ctx) => () => ({ 
          analysisImgUrl(url) { 
            // 分析图片地址 添加域名信息
            return /^http[s]?:\/\//.test(url) ? url : STATIC_URL + url
          }
        })
        export default (ctx, inject) => { 
          // 挂载到vue实例上面 (组件中使用：this.$utils asyncData中使用：context.$util)
          const utils = creatUtils(ctx)
          inject('utils', utils())
        }
2.  `nux.config.js` 中配置 `plugins`
    
        {  src: "~/plugins/util.js", ssr: true}

## 注册全局指令-检测图片能否加载成功 ##

// plugins/directive.js
    import Vue from "vue";
    
    /** * 全局注册自定义指令，用于判断当前图片是否能够加载成功，可以加载成功则赋值为img的src属性，否则使用默认图片 * 在网络慢的时候，加载图片多的时候，可以达到占位图的效果 * 使用方法：<img src="默认图片.png" v-real-img="真实图片.png"> */
    Vue.directive('real-img', async function (el, binding) { //指令名称为：real-img
      let imgURL = binding.value;//获取图片地址
      if (imgURL) { 
        let exist = await imageIsExist(imgURL);
        if (exist) { 
          el.setAttribute('src', imgURL);
        }
      }
    })
    
    /** * 检测图片是否存在 * @param url */
    let imageIsExist = function (url) { 
      return new Promise((resolve) => { 
        var img = new Image();
        img.onload = function () { 
          if (this.complete == true) { 
            resolve(true);
            img = null;
          }
        }
        img.onerror = function () { 
          resolve(false);
          img = null;
        }
        img.src = url;
      })
    }
    
    // 在nuxt.config.js 中配置
    {  src: "~/plugins/directive.js", ssr: false}
    
    // index.vue中使用
    <img src="图片占位地址.png"
    v-real-img="图片真实地址.png"
    alt="">

如果有全局导航和全局使用的数据，不会变的数据，需要服务端渲染，还想只请求一次，可以存放到`vuex`中进行保存，在 `store/index.js`中的 `actions`中的进行请求，`nuxtServerInit`方法会在页面加载之前执行

// store/index.js
    const actions = { 
      // 同步cookie和vuex
      async nuxtServerInit({ commit, dispatch }, { $api, $cookies }) { 
      const [navErr, navData] = await $api.getNavData()
      if (!navErr) { 
          // 提交存储导航数据
          dispatch('nav/handleNav', navData)
      }
      }
    }
    export default { 
      actions
    }

[Nuxt_ _juejin.cn]: https://juejin.cn/post/6844903833840123912
[Meta_ _vuex validate _Nuxt]: https://blog.csdn.net/sd19871122/article/details/97146315
[-_seo_ssr_spa_ Nuxt.js _ SSR _ _juejin.cn]: https://juejin.cn/post/6844903475847888903#heading-8
[-_Nuxt_Nuxt_ - _ _jianshu.com]: https://www.jianshu.com/p/bbe874c32f90
[asyncData_Nuxt.js_ - _ _45fan.com]: http://www.45fan.com/article.php?aid=19102303372797651141609509
[Nuxt _ - _ _jianshu.com]: https://www.jianshu.com/p/b2d9ff24f7a5
[Nuxt.js_ _zhaima.tech]: http://www.zhaima.tech/post/nuxt.js%E5%85%A8%E5%B1%80%E8%B7%AF%E7%94%B1%E5%AE%88%E5%8D%AB
[nuxt]: /images/20220829/fa69af2cbe2248c19ee3d391338cbee7.png
[- NuxtJS _ Nuxt.js]: https://www.nuxtjs.cn/faq/external-resources
[SEO HTML _ - NuxtJS _ Nuxt.js]: https://www.nuxtjs.cn/examples/seo-html-head
[- NuxtJS _ Nuxt.js 1]: https://www.nuxtjs.cn/faq/http-proxy
[Nuxt_ - SegmentFault]: https://segmentfault.com/a/1190000018784715