本文适用于已经会 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开发原则封装的插件 MyPlugin
Vue.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 generate |
编译应用,并依据路由配置生成对应的HTML文件 (用于静态站点的部署)。 |
至此,Nuxt.js的基本使用就介绍完了,希望能帮助你成功入门。
其实还有很多高阶用法和细节没有说到,比如:定制html模版、动态嵌套路由、配置Webpack加载器等等,小编将在下一篇文章继续介绍,想要了解的可以关注【摸鱼俱乐部】公众号。
我们一起学习,一起摸鱼。
源码:
https://github.com/zhangxiuling/Nuxt-demo