Nuxt.js 简介

Nuxt.js 是一个基于 Vue.js 的服务端渲染应用框架，它可以帮我们轻松的实现同构应用：

  • 通过对 客户端/服务端 基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染；
  • 目标是创建一个灵活的应用框架，可以基于它初始化新项目的基础结构代码，或者在已有 Node.js 项目中使用 Nuxt.js；
  • Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置；
  • 除此之外，还提供了一种命令 nuxt generate，为基于 Vue.js 的应用提供生成对应的静态站点的功能，相信这个命令所提供的功能，是向开发集成各种微服务（Microservices）的 Web 应用迈开的新一步；
  • 作为框架 Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等非常实用的功能；

Nuxt.js 特性

  1. 基于 Vue.js：Vue、Vue Router、Vuex、Vue SSR；

  2. 自动代码分层

  3. 服务端渲染

  4. 强大的路由功能，支持异步数据

  5. 静态文件服务

  6. ES2015+ 语法支持

  7. 打包和压缩 JS 和 CSS

  8. HTML 头部标签管理

  9. 本地开发支持热加载

  10. 集成 ESLint

  11. 支持各种样式预处理器： SASS、LESS、Stylus 等等

  12. 支持 HTTP/2

创建 Nuxt 项目

  1. 初始化 Nuxt 项目

    npm init nuxt-app nuxt-demo

  2. components 下的组件使用时会自动引入

  3. pages 下的 .vue 文件会根据名称自动生成路由

  4. npm run start 启动服务

打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. Nuxt.js 简介
  2. 2. Nuxt.js 特性
  3. 3. 创建 Nuxt 项目