nuxt.js快速入门

2019-11-10 本文已影响0人 uns3t

nuxtjs目录结构

其目录结构包含了一个项目开发中通用的东西

assets 存放静态资源

componets 存放vue组件，这类组件类似于react中的无状态组件，可复用的用于构建页面内容，但不具有nuxtjs提供的特性

layouts 存放布局组件，但我感觉实际编写代码时作用不大?

middleware 存放中间件，有express或者koa开发经验的话，应该很容易理解

pages 类似于spa中的views文件夹，是整个项目中最重要的内容，值得一提的是，nuxtjs会根据pages的结构自动生成router

plugins 用于存放插件的配置文件，以elementui为例

import Vue from 'vue'
import Element from 'element-ui'
import locale from 'element-ui/lib/locale/lang/en'

Vue.use(Element, { locale })

这里用Vue.use()全局注册了elementui，后面需要按需引入的时候，还得修改

static 存放静态文件，文件夹中的内容会被映射的根目录下，并且不会被webpack编译处理

store 和vuex相关，存放spa单页应用中的vuex配置

nuxt.config.js 是nuxtjs的配置文件，可以配置项目的入口文件，类似于koa中的/bin/www

值得一提的是 ~ 可以代表根目录，不用再编写../../之类繁琐的路径url

nuxt.config.js

export default {
  mode: 'universal',   //选择单页模式还是多页模式
  /*
  ** Headers of the page
  */
//由于项目没有html文件，这里可以直接指定title,以及其他配置
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS
  */
  css: [
    'element-ui/lib/theme-chalk/index.css'
  ],//全局引入css文件
  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
    '@/plugins/element-ui'
  ],
  /*
  ** Nuxt.js dev-modules
  */
  buildModules: [
  ],
  /*
  ** Nuxt.js modules
  */
  modules: [
  ],
  /*
  ** Build configuration
  */  /
  build: {
    transpile: [/^element-ui/],
    /*
    ** You can extend webpack config here
    */
    extend (config, ctx) {
    }
  }
}

其实配置文件还是比较通俗易懂的，其他的配置要看文档的api辽

路由

基础路由

是由nuxtjs自动根据pages的结构生成的

动态路由

给vue文件或者文件夹添加_ 即可。对于动态路由可以添加路由校验，如果不满足要求，那么返回错误页面

嵌套路由

在vue文件的同名文件夹中编写vue页面即可

pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue

中间件

在middleware文件夹中添加js文件，其将会在下一个页面跳转之前执行，其接收的参数是ctx。

中间件执行流程顺序：

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

也就是说，应该在nuxt.config.js layout或者pages中添加middleware之后，中间件才会被执行

类似于这样

//vue文件中
export default {
  middleware: 'stats'  //中间件名
}

//nuxt.config.js中
module.exports = {
  router: {
    middleware: 'stats'
  }
}

视图

官网的图应该很清晰的展现了nuxtjs视图

创建app.html

可以修改ie的条件表达式等，中小型项目其实没有必要改

//默认模板
<!DOCTYPE html>
<html {{ HTML_ATTRS }}>
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>


//修改后的模板
<!DOCTYPE html>
<!--[if IE 9]><html lang="en-US" class="lt-ie9 ie9" {{ HTML_ATTRS }}><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html {{ HTML_ATTRS }}><!--<![endif]-->
  <head {{ HEAD_ATTRS }}>
    {{ HEAD }}
  </head>
  <body {{ BODY_ATTRS }}>
    {{ APP }}
  </body>
</html>

布局

即通过修改layout/default.vue可以修改页面的布局

类似于spa中的app.vue的作用

<template>
  <div>
    <div>我的博客导航栏在这里</div>
    <nuxt/>
  </div>
</template>

可以在默认布局中添加header之类的东西

但是如果使用自定义layout，必须在pages中指定

<template>
<!-- Your template -->
</template>
<script>
export default {
  layout: 'blog'
  // page component definitions
}
</script>

pages

这是nuxtjs中最主要的内容

<template>
  <h1 class="red">Hello {{ name }}!</h1>
</template>

<script>
export default {
  asyncData (context) {
    // called every time before loading the component
    return { name: 'World' }
  },
  fetch () {
    // The fetch method is used to fill the store before rendering the page
  },
  head () {
    // Set Meta Tags for this Page
  },
  // and more functionality to discover
  ...
}
</script>

<style>
.red {
  color: red;
}
</style>

一些不同于传统vue的特殊项

属性名	描述
asyncData	最重要的一个键, 支持异步数据处理，另外该方法的第一个参数为当前页面组件的上下文对象。
fetch	与 `asyncData` 方法类似，用于在渲染页面之前获取数据填充应用的状态树（store）。不同的是 `fetch` 方法不会设置组件的数据。详情请参考关于fetch方法的文档。
head	配置当前页面的 Meta 标签, 详情参考页面头部配置API。
layout	指定当前页面使用的布局（`layouts` 根目录下的布局文件）。详情请参考关于布局的文档。
loading	如果设置为`false`，则阻止页面自动调用`this.$nuxt.$loading.finish()`和`this.$nuxt.$loading.start()`,您可以手动控制它,请看例子,仅适用于在nuxt.config.js中设置`loading`的情况下。请参考API配置 `loading` 文档。
transition	指定页面切换的过渡动效, 详情请参考页面过渡动效。
scrollToTop	布尔值，默认: `false`。用于判定渲染页面前是否需要将当前页面滚动至顶部。这个配置用于嵌套路由的应用场景。
validate	校验方法用于校验动态路由的参数。
middleware	指定页面的中间件，中间件会在页面渲染之前被调用，请参考路由中间件。

asyncData

这是nuxtjs扩展的方法，其在pages中，其实可以理解为一个特殊的生命周期，在return时，会自动把数据合并到data中，其作用类似于我们在created中利用axios获取到数据后初始化data。并且在服务器端使用nuxtjs时，asyncData可以获得res、req参数，类似express的中间件

区分assets和static

两者的区别主要是，assets中的文件会被webpack编译构建，static中的文件会被挂载到根目录，那么一些seo优化的内容就可以放到static中，方便搜索引擎爬取。而css之类的要放在assets中，方便别名之类的被编译