Nuxt.js

简介

Nuxt.js 是一个基于Vue.js的通用应用框架。

通过对客户端/服务端基础架构的抽象组织，Nuxt.js 主要关注的是应用的 UI 渲染。

Nuxt.js 预设了利用Vue.js开发服务端渲染的应用所需要的各种配置。

作为框架，Nuxt.js 为 客户端/服务端 这种典型的应用架构模式提供了许多有用的特性，例如异步数据加载、中间件支持、布局支持等。
官网
中文官网
github

特点

• 容易构建
  Nuxt.js集成了以下组件/框架，用于开发完整而强大的 Web 应用：

  • Vue 2
  • Vue-Router
  • Vuex (当配置了Vuex 状态树配置项时才会引入)
  • Vue 服务器端渲染 (排除使用mode: 'spa')
  • Vue-Meta

• 结构清晰

  项目目录

  项目目录
  ├─asserts           资源目录 包含未编译的资源，如LESS、SASS或JavaScript。
  ├─components        组件目录 包含vue组件
  ├─layouts           布局目录 页面的模版文件，相当于vuecli的public
  ├─middleware        中间件
  ├─node_modules
  ├─pages             视图目录 视图页面，相当于vuecli的views
  ├─plugins           插件目录 包含在挂载根Vue.js应用程序之前需要运行的Javascript插件。
  ├─static            静态目录 不需要编译，通过`/`即可访问
  ├─store             Vuex文件
  ├─ ...
  ├─nuxt.config.js    nuxtjs配置文件
  └─package.json      包管理配置文件
  

• 路由简单
  只需将单个文件Vue组件放入pages文件夹，Nuxt便会自动以零配置生成路由

• 配置简单
  vue标准项目中没有标准的方法可以一起配置所有东西。
  Nuxt可以编辑nuxt.config.js文件并修改框架的任何内容，覆盖任何智能默认值或预配置

• SEO
  Vue应用属于CSR应用在客户端进行渲染不适合SEO，Nuxt已预先配置为在服务器上生成应用程序，以及根据路由添加与SEO相关的标签

• 初次加载
  Nuxt使用全局或静态方式渲染应用，预渲染的HTML会使页面在浏览器加载更快。而且通过自动分割代码，只会加载实现路由功能所需的JavaScript

• 便于修改
  使用Vue很难更改框架的底层，Nuxt提供了一个更高阶的模块系统，可以轻松自定义Nuxt的各个方面

流程图

start

• 构建项目
  使用命令行工具:
  yarn

  yarn create nuxt-app <project-name>
  

  npm

  npm init nuxt-app <project-name>
  

  注:创建项目过程中会让你进行一些选择，根据需求选择即可

• 开始项目
  通过 npm 或 Yarn 运行项目
  npm

  cd <project-name>
  npm run dev
  

  yarn

  cd <project-name>
  yarn dev
  

  http://localhost:3000

• 更多配置

• more
  Nuxt.js 提供了一系列常用的命令, 用于开发或发布部署。

  命令列表

发布部署

Nuxt.js 提供了两种发布部署应用的方式：服务端渲染应用部署 和 静态应用部署

• 服务端渲染应用部署
  部署 Nuxt.js 服务端渲染的应用不能直接使用 nuxt 命令，而应该先进行编译构建，然后再启动 Nuxt 服务，可通过以下两个命令来完成:
  nuxt

  nuxt build
  nuxt start
  

  npm

  npm run build
  npm run start
  

  yarn

  yarn build
  yarn start
  

  注:build命令会生成.nuxt/文件夹
• 静态应用部署
  Nuxt.js 可依据路由配置将应用静态化，可以将应用部署至任何一个静态站点主机服务商:
  nuxt

  nuxt generate
  

  npm

  npm run generate
  

  yarn

  yarn generate
  

  注:generate命令会生成dist/文件夹

注:全静态站点