Site Overlay

Nuxt有哪些不寻常路|坑

前言

最近写了一个项目 在众多框架中 纠结用哪一种,用vue,react吧?不支持CEO。

用jquery吧?太慢,而且不是主流。最后还是决定用 NUXT

既然框架决定了,那就开整呗。 可我往往没想到的是,vue那一套不能直接照用,有一些需要舍去,有一些需要改写。就这样步入了NUXT的坑,一步一步不能抽离出来。

NUXT 不像其他 SPA页面,官网是一定要去看好几遍的。多看几遍你就懂了。

Nuxt.js 的默认应用目录架构提供了良好的代码分层结构,适用于开发或大或小的应用。 当然,你也可以根据自己的偏好组织应用代码。

Nuxt的目录结构
这个是我的文件目录结构

红色字是nuxt给你生成的 黄色字是我自己定义的

里面最重要的一个文件是 nuxt.config.js 这个文件可以说是命根子的存在。也可以说是大心脏。

它的执行力大于nuxt里面的config 也就是说 你在nuxt.config 里面的操作会覆盖原有的config

如何在PM2里面实现图片默认图展示呢?
import Vue from 'vue'
//全局注册自定义指令,用于判断当前图片是否能够加载成功
//可以加载成功则赋值为img的src属性,否则使用默认图片

//指令名称为:loadImg  load-img
const loadImg =  async (el, binding)=>{
  let imgURL = binding.value;//获取图片地址
  if (imgURL) {
      let exist = await imageIsExist(imgURL);
      if (exist) {
          el.setAttribute('src', imgURL);
      } 
  }
};

/**
 * 检测图片是否存在
 * @param url
 */
const imageIsExist = (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;
    })
}
Vue.directive('load-img', loadImg); // 注册到vue实例去 用法v-load-img 或者 :load-img

 <img v-load-img="item.image" src="/image/image.png"/> 
 <img :load-img="item.image" src="/image/image.png"/> 

 其中src是默认图
如何用PM2运行nuxt呢

我们知道平时pm2执行node都是用 pm2 start xxx.js文件

可你仔细观察 就会发现 nuxt文件目录下没有一个入口文件是暴露出来的

右边是正常的node程序,一般来说都以app.js、main.js、index.js为名的入口文件

那没有入口文件,pm2 怎么执行?

在nuxt程序的目录下新建一个文件,名称可以是尽量避开其他文件名(以免冲突)

可以叫nuxt.main.js 、nuxt-main.js 等等 自由发挥

说点什么

cat1.gif doge1.gif doge2.gif 吃瓜群众.gif 哈哈.gif 微笑.gif 捂脸.gif 爷跪了.gif 示爱.png 奥特曼.png 拒绝.png 快哭了.png 鄙视.png 闭嘴.png 舔舌.png 尴尬.png 无聊.png 打脸.png 敲击.png 狗头.png 肥皂.png 口罩.png 鼓掌.png 哈哈大小.png 害羞.png 流汗.png 微笑.png 无语.png 生气.png 流口水.png 调皮.png 嘻嘻.png 可怜.png 霸气.png 困.png 傲气.png 哭泣.png 猫头.png 男亲亲.png 发怒.png 骂人.png 女亲亲.png 势利眼.png 亲亲.png 发呆.png 生病.png 草泥马.png 遗憾.png 倒霉.png 睡觉.png 思考.png 迎合.png 偷笑.png 呕吐.png 挖鼻.png 认错.png 坏笑.png 胖达.png 龇牙.png 嘘.png 阴险.png 疑问.png 左哼哼.png 晕.png 抓狂.png 猪头.png 右哼哼.png 给力.png 互粉.png 囧.png 萌.png 点赞.png 喜.png 爱你.png 心动.png 心碎.png 握拳.png 大拇指.png 胜利.png 握手.png 太阳.png 月亮.png 下雨.png 鲜花.png 多云.png 阴天.png 相机.png 音乐.png 时钟.png 合照.png
avatar
  Subscribe  
提醒