阅读 124

[开发随手记]使用Nuxt的心得体验

前言

最近在做前端学习工作,记录下在这过程中一些产出。内容不一定纯技术,大概都是自己在其中遇到的问题和一些思考并做下笔记希望对前端开发有所启发和新的认识。

项目结构

初始化构建nuxt项目它并生产了必要通用文件目录,常见的例如:pages(路由路径自动关联)、plugins(插件功能配置)、layouts(定义公用布局,似slot概念)、store(全局数据管理Redux)。nuxt清楚的将项目中各种必备功能点以目录形式分开,对于开发者只需按照nuxt规范将对应功能写在对应目录下,nuxt框架会自动映射。

案例

  1. 关于路由跳转,项目页面写在pages目录中,例如在pages下创建settings目录,about_system.vue页面。当我需要跳转到该页面的时候。我的路由只需要这么写:
:to="{path:'/settings/about_system'}"
复制代码

自动关联到about_system.vue页面。

  1. 再者就是Vuex,同样项目的状态树写在store目录中,例如在store目录下创建gankio目录,index.js文件定义初始化数据
export const state = () => ({
    android: {
        page: 1,
        datas: []
    },
    ios: {
        page: 1,
        datas: []
    },
    girls: {
        page: 1,
        datas: []
    }
})
复制代码

当需要获取android的数据时,只需要编写一下代码并能实现:

this.$store.state.gankio.android.datas
复制代码

学习使用nuxt框架最大的感受就是目录映射关系带来的方便和快捷,让整体开发井然有序,项目目录和结构更清晰。对于阅读别人写的项目代码我也觉得很清楚容易上手。

require和import

require和import是模块化开发产物,平日开发中个人认为都是引用作用。确实两者都是对外部资源的引用,实际中不同之处在于require是运行时调用,import是编译时调用;import必须在文件开头引用,而require可以随时引用。

案例

  1. nuxt开发中当进行以下方式引用时出现的问题,同样是字符串但第一钟方式可以第二种却不行。大概是require("~/assets/wallpaper/" + ...)会去遍历~/assets/wallpaper/路径下的文件所有能够找到对应文件,而直接传入字符串变量是不允许的。
第一钟可以 
const wallpaperSeleted = 'wallpaper3.jpeg';
      require("~/assets/wallpaper/" + wallpaperSeleted);
这样也可以
const wallpaperSeleted = 'wallpaper/wallpaper3.jpeg';
      require("~/assets/" + wallpaperSeleted);      
第二种不可以
      const wallpaperSeleted = '~/assets/wallpaper/wallpaper3.jpeg';
      require(wallpaperSeleted);
复制代码

SSR

服务器渲染,在服务端将Vue页面进行渲染生成html文件传递到浏览器。传统SPA应用将bundle.js从服务端获取在客户端解析再挂载到dom,而SSR就是将html直接传递到浏览器,增加首屏加载时间。

案例

  1. 开发中遇到的问题,开启SSR后正式环境下,页面初始化报错:DOMException:Failed to execute 'appendChild' on 'Node':This node type does not support this method.可能由于SSR渲染机制问题导致dom节点发生变化前后对比出现问题而报错(细节原因有待分析),另外如果使用v-show代替v-if是否就不会报错呢?
 <router-link v-if="this.$route.query.info == 'true'" to="/edit/" >{{$t('edit.url')}}</router-link>
复制代码

在外层加上no-ssr表示不在服务端渲染之后就不再报错了。这样在预加载的过程中返回的DOM没有对应该标签的状态。

 <no-ssr>
    <router-link v-if="this.$route.query.info == 'true'" to="/edit/" >{{$t('edit.url')}}</router-link>
 </no-ssr>
复制代码