随笔分类 - Nuxt
学习和记录
摘要：Nuxt.js 内核实现了 Vuex状态树，使用状态树 (store) 可以管理状态 (state) 。 （1）Vuex状态树 Nuxt.js 会尝试找到应用根目录下的 store 目录，如果该目录存在，它将做以下的事情： 引用 vuex 模块。 将 vuex 模块加到 vendors 构建配置中去
阅读全文
摘要：一、端对端测试 ava 是一个很强大的 JavaScript 测试框架，结合 jsdom，可以轻松地给 nuxt 应用进行端对端测试。需要三步骤就可以完成端对端测试： （1）添加 ava 和 jsdom 作为项目的开发依赖：npm install --save-dev ava jsdom （2）在
阅读全文
摘要：一、命令 （1）常用命令 命令 描述 nuxt 启动一个热加载的Web服务器（开发模式） localhost:3000。 nuxt build 利用webpack编译应用，压缩JS和CSS资源（发布用）。 nuxt start 以生产模式启动一个Web服务器 (需要先执行nuxt build)。 n
阅读全文
摘要：一、模块 模块是Nuxt.js扩展，可以扩展其核心功能并添加无限的集成。模块只是在引导Nuxt时按顺序调用的函数。框架在加载之前等待每个模块完成。 （1）模块几乎可以自定义Nuxt的任何地方。 （2）Nuxt模块可以合并到npm包中。 （3）模块只是简单的功能，它们可以打包为npm模块或直接包含在项
阅读全文
摘要：Nuxt.js允许在运行Vue.js应用程序之前执行js插件，而nuxt.config.js文件中可以通过plugins属性来配置插件，并且将需要的插件可以放置在plugins目录下。 （1）客户端使用的插件 如果只想要插件在客户端使用的话，那么通过可通过nuxt.config.js文件的plugi
阅读全文
摘要：在Nuxt.js中静态资源文件分为两类，一类是需要webpack处理的，另外一类是不需要webpack处理的。它们的存放目录是不一样的，下面简单梳理一下。 （1）assets 目录 如果静态资源文件需要webpack加载器做构建编译处理的，那么就需要放置在assets目录中。 file-loader
阅读全文
摘要：Nuxt.js 扩展了 Vue.js，增加了一个叫 asyncData 的方法，使得我们可以在设置组件的数据之前能异步获取或处理数据。asyncData方法会在组件（限于页面组件）每次加载之前被调用。它可以在服务端或路由更新之前被调用。 在这个方法被调用的时候，第一个参数被设定为当前页面的上下文对象
阅读全文
摘要：视图的整体布局图如下所示： 备注：此图来源 （1）模板 在项目根目录下创建一个app.html文件，可以定制化默认的html模板。 在app.html文件中内容如下： <!-- 这是我简单修改的 --> <!DOCTYPE html> <html {{ HTML_ATTRS }}> <head {{
阅读全文
摘要：Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。 （1）基础路由 （2）动态路由 在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。Nuxt.js 可以在动态路由组件中定义参数校验方法。说明：genera
阅读全文
摘要：Nuxt.js 默认的配置涵盖了大部分使用情形，可通过 nuxt.config.js 来覆盖默认的配置，下面介绍一下nuxt.config.js文件中相关配置项。 （1）build Nuxt.js 允许你在自动生成的 vendor.bundle.js 文件中添加一些模块，以减少应用 bundle 的
阅读全文
摘要：Nuxt.js 的默认应用目录架构提供了良好的代码分层结构，适用于开发或大或小的应用。 （1）asserts 该目录是资源目录，用于组织未编译的静态资源，如：LESS、SASS、JS （2）components 该目录是组件目录，用于组织应用的Vue.js组件。Nuxt.js 不会扩展增强该目录下
阅读全文
摘要：在利用NuxtJS框架进行服务端渲染应用程序开发时，我们可以借助NuxtJS的脚手架工具create-nuxt-app进行快速搭建工程环境，下面将详细说明工程搭建过程： （1）安装NodeJS 这里不做讲解了，只要npm的版本不低于5.2.0版本即可。 （2）registry配置 若公司内网提供了类
阅读全文
摘要：Nuxt.js 是一个基于 Vue.js 的通用应用框架，它关注的是应用的 UI渲染。Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置。此外，nuxt generate命令为基于 Vue.js 的应用提供生成对应的静态站点的功能。 （1）NuxtJS介绍 Nuxt.js
阅读全文
