开启掘金成长之旅！这是我参与「掘金日新计划·2月更文挑战」的第12天，点击查看活动详情

创建项目

npx create-nuxt-app <项目名>

之后会进行一系列的项目配置选择，类似于SPA、SSR；UI库；axios；测试库之类的。

之后运行下面命令，跑起来项目

$ cd <project-name>
$ npm run dev

项目目录结构

在SPA项目里

不做赘述了，跟一般vue的SPA项目结构差不多。

在SSR项目里

pages 用于存放应用的路由及视图。该目录下所有的vue文件自动生成对应的路由
components 用于存放应用的 Vue.js 组件。此组件不像页面组件有asyncData 方法
plugins 用于存放那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件
store 用于存放应用的 Vuex 状态树；在该目录下创建一个 index.js 可激活这些配置
nuxt.config.js Nuxt.js 项目个性化配置
package.json 包管理文件

其中的项目个性化配置参考配置 - NuxtJS | Nuxt.js 中文网所述。

路由

页面之间实现路由跳转的时候使用

<nuxt-link to="/">首页</nuxt-link>

基本路由

动态路由

当文件名或者路径名的名称之前加上_的时候就实现了动态路由配置

路由嵌套

有区别于普通SPA的路由配置使用children实现嵌套。nuxtjs使用了重名文件+重名文件夹来实现嵌套

过渡特效

该特效依靠vue的transition组件来完成的。我们可以在组件中进行配置

export default {
  // 可以是字符
  transition: ''  //表示设置了transition的name属性，，默认值是page
  // 或对象
  transition: {}  //可以配置许多transition暴露出来的参数
  // 或函数
  transition (to, from) {}
}

首先，创建一个所有路由共用的 CSS 文件，然后添加相关的样式

.page-enter-active,
.page-leave-active {
  transition: opacity 0.5s;
}
.page-enter,
.page-leave-active {
  opacity: 0;
}

之后把该文件配置到nuxt配置文件里

module.exports = {
  css: ['assets/main.css']
}

中间件

和express框架的中间件含义一样，它运行在全局或者单个页面渲染之前。

中间件的固定放置目录是 middleware ，并且文件名就成了中间件名。同时中间件的context作为第一个参数：

export default function (context) {
  context.userAgent = process.server
    ? context.req.headers['user-agent']
    : navigator.userAgent
}

中间件执行流程顺序：

nuxt.config.js
匹配布局
匹配页面

中间件可以异步执行,也可以全局使用和局部使用

//   nuxt.config.js中（全局使用）
module.exports = {
  router: {
    middleware: 'stats'
  }
}

//  page中（局部使用）

export default {
  middleware: 'stats'
}

未完待续……