![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
nuxt
青崖林夕
脚踏实地,仰望星空!
展开
-
【11】Vuex 状态树
Vuex 状态树对于每个大项目来说,使用状态树 (store) 管理状态 (state) 十分有必要。这就是为什么 Nuxt.js 内核实现了Vuex。在Vue School 上观看关于Nuxt.js 和 Vuex的免费课程使用状态树Nuxt.js 会尝试找到应用根目录下的store目录,如果该目录存在,它将做以下的事情:引用vuex模块 将vuex模块 ...原创 2019-11-19 14:27:09 · 368 阅读 · 0 评论 -
【10】Nuxt.js 模块
模块模块是Nuxt.js扩展,可以扩展其核心功能并添加无限的集成。介绍在使用Nuxt开发应用程序时,您很快就会发现框架的核心功能还不够。 Nuxt可以使用配置选项和插件进行扩展,但是在多个项目中维护这些自定义是繁琐、重复和耗时的。 另一方面,开箱即用支持每个项目的需求将使Nuxt非常复杂且难以使用。这就是Nuxt提供更高阶模块系统的原因,可以轻松扩展核心。 模块只是在引导Nux...原创 2019-11-15 17:44:53 · 883 阅读 · 0 评论 -
【9】Nuxt.js 资源文件
插件Nuxt.js允许您在运行Vue.js应用程序之前执行js插件。这在您需要使用自己的库或第三方模块时特别有用。需要注意的是,在任何 Vue 组件的生命周期内, 只有beforeCreate和created这两个方法会在客户端和服务端被调用。其他生命周期函数仅在客户端被调用。使用第三方模块我们可以在应用中使用第三方模块,一个典型的例子是在客户端和服务端使用axio...原创 2019-11-15 17:44:36 · 199 阅读 · 0 评论 -
【8】Nuxt.js 资源文件
资源文件默认情况下 Nuxt 使用 vue-loader、file-loader 以及 url-loader 这几个 Webpack 加载器来处理文件的加载和引用。对于不需要通过 Webpack 处理的静态资源文件,可以放置在static目录中。Webpack 构建默认情况下,vue-loader自动使用css-loader和Vue模板编译器来编译处理vue文件中的样式和模...原创 2019-11-15 17:44:29 · 457 阅读 · 0 评论 -
【7】Nuxt.js 异步数据
Nuxt.js 扩展了 Vue.js,增加了一个叫asyncData的方法,使得我们可以在设置组件的数据之前能异步获取或处理数据。asyncData 方法asyncData方法会在组件(限于页面组件)每次加载之前被调用。它可以在服务端或路由更新之前被调用。 在这个方法被调用的时候,第一个参数被设定为当前页面的上下文对象,你可以利用asyncData方法来获取数据,Nuxt.js ...原创 2019-11-15 17:44:21 · 643 阅读 · 0 评论 -
【6】Nuxt.js 视图
视图本章节的内容阐述了如何在 Nuxt.js 应用中为指定的路由配置数据和视图,包括应用模板、页面、布局和HTML头部等内容。模板你可以定制化 Nuxt.js 默认的应用模板。定制化默认的 html 模板,只需要在应用根目录下创建一个app.html的文件。默认模板为:<!DOCTYPE html><html {{ HTML_ATTRS...原创 2019-11-15 17:44:12 · 364 阅读 · 0 评论 -
【5】Nuxt.js 路由
路由Nuxt.js 依据pages目录结构自动生成vue-router模块的路由配置。要在页面之间使用路由,我们建议使用<nuxt-link>标签。例如:<template> <nuxt-link to="/">首页</nuxt-link></template>基础路由假设pages的目录...原创 2019-11-15 17:44:05 · 621 阅读 · 0 评论 -
【4】Nuxt.js 配置
配置Nuxt.js 默认的配置涵盖了大部分使用情形,可通过 nuxt.config.js 来覆盖默认的配置。buildNuxt.js 允许你在自动生成的vendor.bundle.js文件中添加一些模块,以减少应用 bundle 的体积。如果你的应用依赖第三方模块,这个配置项是十分实用的。关于 build 配置项的详细文档css该配置项用于定义应用的全局(所有页面均...原创 2019-11-15 17:43:58 · 293 阅读 · 0 评论 -
【3】项目目录结构
目录结构Nuxt.js 的默认应用目录架构提供了良好的代码分层结构,适用于开发或大或小的应用。 当然,你也可以根据自己的偏好组织应用代码。观看有关Vue School上Nuxt.js目录结构的免费课程目录资源目录资源目录assets用于组织未编译的静态资源如LESS、SASS或JavaScript。关于 assets 目录的更多信息组件目录组...原创 2019-11-14 10:12:07 · 142 阅读 · 0 评论 -
【2】安装
安装Nuxt.js 十分简单易用。一个简单的项目只需将nuxt添加为依赖组件即可。运行 create-nuxt-app为了快速入门,Nuxt.js团队创建了脚手架工具create-nuxt-app。确保安装了npx(npx在NPM版本5.2.0默认安装了):$ npx create-nuxt-app <项目名>或者用yarn :$ yarn c...原创 2019-11-14 10:12:01 · 204 阅读 · 0 评论 -
【1】介绍
关于 Nuxt.js2016 年 10 月 25 日,zeit.co背后的团队对外发布了Next.js,一个 React 的服务端渲染应用框架。几小时后,与 Next.js 异曲同工,一个基于Vue.js的服务端渲染应用框架应运而生,我们称之为:Nuxt.js。Nuxt.js 是什么?Nuxt.js 是一个基于 Vue.js 的通用应用框架。通过对客户端/服务端基础架构...原创 2019-11-14 10:11:54 · 156 阅读 · 0 评论 -
基于edusoho项目的nuxt项目启动失败,服务器502问题。
1、在edusoho目录下:拉取develop分支代码:git pull origin develop2、在edusoho/web/template/web/目录下:执行:npmrundev试试能不能访问:http://www.mysite.com,正常情况下,是可以访问到首页内容的了。然后,执行编译:npmrunbuild最后,看看pms进程是否正常。执行:pm2list...原创 2019-11-14 10:11:20 · 1710 阅读 · 0 评论