Nuxt.js教程

4,703 阅读6分钟
原文链接: mp.weixin.qq.com

本文适用于已经会 Vue.js 和Vue router基本使用的前端工程师阅读,以实例介绍Nuxt.js的基础使用。

Nuxt.js 是一个基于 Vue.js 的轻量级应用框架,可用来创建服务端渲染 (SSR) 应用,也可充当静态站点引擎生成静态站点应用,具有优雅的代码结构分层和热加载等特性。

今天我们一起从零开始学习Nuxt的使用,本文提到的示例项目源码(下文简称 源码)请看文末。


一、项目初始化

首先,我们可以使用脚手架工具  create-nuxt-app 创建第一个Nuxt项目。

在控制台使用命令:

$ npx create-nuxt-app nuxt-demo

或者:

$ yarn create nuxt-app nuxt-demo

创建一个叫 nuxt-demo 的项目。创建过程中会提示你选择服务端框架和UI框架,大家按照平时的使用习惯选择就行。

如果你看到如下内容,则项目创建成功🎉

通过以下命令,就可以将项目跑起来了👇

$ cd nuxt-demo$ npm run dev

访问地址为 http://localhost:3000/ 


二、目录结构及使用方法

通过create-nuxt-app脚手架工具生成的项目结构,一般是这样的:

此时,文件夹里还没有什么内容。所以接下来,我们依次学习每个文件夹都用来放什么,以及具体如何开发。

1、assets

用于存放未编译的静态文件,如css、js、image等。你可以这样建立assets里的文件结构:

内容跟普通的vue项目差不多。但需要注意的是, assets里的内容会通过Webpack加载器来处理文件的加载和引用。对于不需要处理的,放在static目录中更合适。

2、layouts

我们的页面文件其实是放在pages里的,那layouts是用来干什么的呢?

首先来看一下layouts里的文件内容:

简单来说,layouts里的一个文件就是一个容器,为pages文件夹中的页面提供一个默认布局。

举个🌰:

我在layouts里新建了home.vue,内容如上图所示👆

然后在pages/home/index.vue里设置了 layout:'home' ,代码👇

<template> <div>我是页面内容</div></template><script>export default {  layout: 'home'  // page component definitions}</script>

此时,该页面就会使用 home.vue 文件作为默认布局,并将页面内容插入到 home.vue的   <nuxt /> 标签里 。

访问 http://localhost:3000/home ,

就会看见这样一个页面:

再举个使用场景的例子吧:

你的系统分为主页、个人中心、设置三大模块,在layouts里就可以分为default.vue、home.vue、setting.vue三个文件,供pages里的页面使用。

此外,在layouts里建一个error.vue(名称不可更改)会是个明智的选择,因为当用户访问了不存在的路径时,会默认显示这个错误页面(你永远猜不到用户会输入什么😓)。

3、pages

pages里的每个文件都是一个vue页面组件,当设置了上文中提到过的  layout 属性时,Nuxt会自动把组件内容插入到布局中。

值得注意的是, Nuxt的路由是根据pages中的文件结构自动生成的,比如,pages文件结构是这样:

那么,应用启动后,可以访问的路径就有:

http://localhost:3000/home

http://localhost:3000/home/1

http://localhost:3000/todos

http://localhost:3000/

其中,以下划线开头的目录或文件,功能跟 vue-router中以冒号开头的动态路由参数类似。

比如本例中的_userid.vue,就可以匹配:

http://localhost:3000/home/1

http://localhost:3000/home/2

......

完整的页面组件实例请看源码中的pages/home/index.vue文件,

里面列出了Nuxt为页面提供的特殊配置项,想要深入研究每个配置项的请看:

https://www.nuxtjs.cn/guide/views/

4、components

存放 Vue.js 组件,供pages中的页面组件引入使用。

pages和components的区别在于:components中的组件不能使用 asyncData 方法。

5、middleware

该目录用于存放应用的中间件。

文件的名称将作为中间件的名称,例如我在middleware新建一个auth.js,内容为:

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

在 nuxt.config.js 中这样使用,就可以让auth中间件在每个路由改变时被调用:

module.exports = {  router: {    middleware: 'auth'  }}

6、plugins

用于存放  根vue.js应用 实例化之前需要运行的 Javascript 插件。

我们想使用 vue-awesome-swiper 显示轮播图,可以在plugins里新建swiper.js:

import Vue from 'vue'import VueAwesomeSwiper from 'vue-awesome-swiper/dist/ssr'Vue.use(VueAwesomeSwiper)

然后在nuxt.config.js中这样配置:

module.exports = {  css: [ 'swiper/dist/css/swiper.css' ],  plugins: [    { src: '~/plugins/swiper.js', ssr: false }  ],}

就可以在全局使用 swiper了。

需要注意的是,有的第三方插件不支持SSR,所以使用插件前建议去相关官网确认一下,如果支持SSR,一般会附有使用方法。

此外,你也可以自己开发 Vue 插件(详见 https://cn.vuejs.org/v2/guide/plugins.html)放在plugins里,这样的话,你的代码应该长这样:

import Vue from 'vue'// 这里是按照vue plugin开发原则封装的插件 MyPluginVue.use(MyPlugin)

7、static

用于存放系统中的静态文件,这些文件不会被webpack构建和编译。

你可以在这里存放txt文件、字体文件等等。

8、store

Nuxt.js集成了Vuex,想要使用它,只需要在store目录中新建一个index.js.

为了项目更加清晰,通过模块划分store是更好的选择,举个小🌰:

在store中新建index.js文件,其内容为:

export const state = () => ({  counter: 0})export const mutations = {  increment (state) {    state.counter++  }}

再新建一个todo.js,内容为:

export const state = () => ({list: []})export const mutations = {  add (state, text) {    state.list.push({      text: text,      done: false    })  },  remove (state, { todo }) {    state.list.splice(state.list.indexOf(todo), 1)  },  toggle (state, todo) {    todo.done = !todo.done  }}

vuex就会自动将todo.js当成一个模块。也就是说,你可以在store目录中新建多个文件,每个文件对应你系统中的一个大模块,管理相应的数据。

(在页面中如何访问和更改store中的数据,请参考源码中 pages/todos/index.vue 文件的内容)。

9、nuxt.config.js

是整个Nuxt项目的配置文件,详细配置项请看:

https://www.nuxtjs.cn/guide/configuration/

在此不多加赘述。

10、package.json

用于描述项目中的依赖关系以及对外暴露的脚本接口。

其实也就是用到了哪些第三方库,以及如何用命令启动和构建应用。


三、命令和部署

经过上述过程,你已经有了一个基础的Nuxt项目,可以通过下面命令进一步开始本地开发和部署:

npm run dev

本地启动热加载的服务器

localhost:3000 。

npm run build

编译应用,压缩JS和CSS

(发布用)。

npm run start

以生产模式启动一个Web服务器 

(npm run build 会先被执行)。

npm run generate

编译应用,并依据路由配置生成对应的HTML文件

 (用于静态站点的部署)。


至此,Nuxt.js的基本使用就介绍完了,希望能帮助你成功入门。

其实还有很多高阶用法和细节没有说到,比如:定制html模版、动态嵌套路由、配置Webpack加载器等等,小编将在下一篇文章继续介绍,想要了解的可以关注【摸鱼俱乐部】公众号。

我们一起学习,一起摸鱼。

源码:

https://github.com/zhangxiuling/Nuxt-demo