NuxtJS基础

NuxtJS介绍

Nuxt.js是什么

• 一个基于Vue.js生态的第三方开源服务端渲染应用框架
• 它可以帮我们轻松的使用Vue.js技术栈构建同构应用
• Nuxt.js 预设了利用 Vue.js 开发服务端渲染的应用所需要的各种配置
• 官网：https://zh.nuxtjs.org/
• GitHub 仓库：https://github.com/nuxt/nuxt.js

Nuxt.js 框架是如何运作的

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

• Vue.js
• Vue Router
• Vuex
• Vue Server Renderer
  压缩并 gzip 后，总代码大小为：57kb （如果使用了 Vuex 特性的话为 60kb）。
  另外，Nuxt.js 使用 Webpack 和 vue-loader 、 babel-loader 来处理代码的自动化构建工作（如打包、
  代码分层、压缩等等）。

特性

• 基于 Vue.js
  Vue、Vue Router、Vuex、Vue SSR
• 自动代码分层
• 服务端渲染
• 强大的路由功能，支持异步数据
• 静态文件服务
• ES2015+ 语法支持
• 打包和压缩 JS 和 CSS
• HTML 头部标签管理
• 本地开发支持热加载
• 集成 ESLint
• 支持各种样式预处理器： SASS、LESS、 Stylus 等等
• 支持 HTTP/2 推送

NuxtJS基本使用

Nuxt.js使用方式

• 初始项目
• 已有的Node.js服务端项目
  • 直接把Nuxt当做一个中间件集成到Node Web Server中
• 现有的Vue.js项目
  • 非常熟悉Nuxt.js
  • 至少百分之10的代码改动

初始化Nuxt.js应用的方式

官方文档：https://zh.nuxtjs.org/docs/2.x/get-started/installation/

• 方式一：使用create-nuxt-app
• 方式二：手动创建

Nuxt 路由

Nuxt.js 依据 pages 目录结构自动生成 vue-router 模块的路由配置。

基础路由

假设 pages的目录结构如下：

pages/
--| user/
-----| index.vue
-----| one.vue
--| index.vue

那么，Nuxt.js 自动生成的路由配置如下：

router: {
   
	routes: [
	 {
   
	  name: 'index',
	  path: '/',
	  component: 'pages/index.vue'
	 },
	 {
   
	  name: 'user',
	  path: '/user',
	  component: 'pages/user/index.vue'
	 },
	 {
   
	  name: 'user-one',
	  path: '/user/one',
	  component: 'pages/user/one.vue'
	 }
	]
}

路由导航

一般有三种方式：

• a 标签
  它会刷新整个页面，走服务端渲染，不要使用。

  <a href="/">首页</a>
  

• nuxt-link组件