Nuxt.js
1.简介
Nuxt.js是一个基于Vue.js的通用应用框架,同时支持服务端和客户端。Nuxt.js集成了Vue2,Vue-Router,Vuex,Vue-Meta组件,用来开发完整而强大的web应用。
Nuxt.js支持服务端渲染(ssr),单页面应用程序(spa),静态化(预渲染)三种模式。
2.特性
3.运行流程图
下面这张图阐述了Nuxt.js从一个完整服务器到渲染的过程(切换路由渲染页面的过程)
安装
1.使用官方脚手架 create-nuxt-app
npx create-nuxt-app <项目名>
2.从头开始创建项目
具体不介绍了去看官方文档路径☞ 官网
目录
项目创建完毕之后会有下图的目录结构(除了选中的是自己添加的外),下面一个个介绍这些目录
1.资源目录(assets)
和Vue项目一样用来放置一些未编译的静态资源如 LESS
、SASS
或 JavaScript
。
2.组件目录(components)
组件目录 components
用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件,即这些组件不会像页面组件那样有 asyncData
方法的特性。
3.布局目录(layouts)
4.中间件目录(middleware)
5.页面目录(pages)
通过pages目录来创建应用路由。Nuxt.js会读取pages下面所有带.vue
文件并自动生成对应的路由配置,并不需要自己手动添加路由
6.插件目录(plugins)
7.静态资源目录(static)
8.nuxt.config.js文件
路由
Nuxt.js 依据 pages
目录结构自动生成 vue-router 模块的路由配置。在页面之间使用标签
1.基础路由
<nuxt-link to="user">个人中心</nuxt-link>
如果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'
}
]
}
2.动态路由
在Nuxt.js中需要创建动态路由需要创建以下划线为前缀的文件或目录
目录结构
pages/
--| user/
-----| _id.vue
--| index.vue
渲染的路由:
router: {
routes: [
{
name: 'index',
path: '/',
component: 'pages/index.vue'
},
{
name: 'user-id',
path: '/user/:id?',
component: 'pages/user/_id.vue'
},
]
}
插件
在Vue的组件生命周期之中,只有beforeCreate和created方法会在客户端和服务端被调用,其他生命周期只在客户端运行。
假如想使用element-ui首先创建plugins/element-ui.js
:
import Vue from 'vue'
import Element from 'element-ui'
// import locale from 'element-ui/lib/locale/lang/en'
import locale from 'element-ui/lib/locale/lang/zh-CN'
Vue.use(Element, { locale })
然后在nuxt.config.js
内配置 plugins
如下:
plugins: [
{src:'@/plugins/element-ui',ssr:false,},
]
常见问题
全局css
项目中会设置一些全局css 我们可以在nuxt.config.js内配置css
如下:
css: [
'@/static/css/base.css',
]
引用外部资源
1.全局配置
在nuxt.config.js
内配置
module.exports = {
head: {
script:[
{
src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
}
],
link: [
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css?family=Roboto'
}
]
}
}
2.局部配置
可以在pages内的.vue文件进行配置
<template>
<h1>使用 jQuery 和 Roboto 字体的关于页</h1>
</template>
<script>
export default {
head: {
script: [
{
src:
'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'
}
],
link: [
{
rel: 'stylesheet',
href: 'https://fonts.googleapis.com/css?family=Roboto'
}
]
}
}
Window 或 Document 对象未定义
因为在服务端没有winddow和document,然后一些插件又用到了它,这些只能用于客户端的插件只能通过process.client
变量来判断导入。
if(process.client) {
require('external_library')
}
本文参考☞Nuxt.js 只记录作者遇到的一些问题。