Nuxt.js是什么
官網(wǎng)：https://nuxtjs.org/
Nuxt.js 是一個(gè)基于 Vue.js 的服務(wù)端渲染應(yīng)用框架伊履，它可以幫我們輕松的實(shí)現(xiàn)同構(gòu)應(yīng)用袜漩。
通過對客戶端/服務(wù)端基礎(chǔ)架構(gòu)的抽象組織，Nuxt.js 主要關(guān)注的是應(yīng)用的 UI渲染湾碎。
我們的目標(biāo)是創(chuàng)建一個(gè)靈活的應(yīng)用框架，你可以基于它初始化新項(xiàng)目的基礎(chǔ)結(jié)構(gòu)代碼池充，或者在已有 Node.js 項(xiàng)目中使用 Nuxt.js韵吨。
Nuxt.js 預(yù)設(shè)了利用 Vue.js 開發(fā)服務(wù)端渲染的應(yīng)用所需要的各種配置。
除此之外霹购，我們還提供了一種命令叫： nuxt generate 柔滔，為基于 Vue.js 的應(yīng)用提供生成對應(yīng)的靜態(tài)站點(diǎn)的功能溢陪。
我們相信這個(gè)命令所提供的功能，是向開發(fā)集成各種微服務(wù)（Microservices）的 Web 應(yīng)用邁開的新一 步睛廊。
作為框架形真，Nuxt.js 為 客戶端/服務(wù)端 這種典型的應(yīng)用架構(gòu)模式提供了許多有用的特性，例如異步數(shù)據(jù) 加載超全、中間件支持咆霜、布局支持等非常實(shí)用的功能。
特性
- 基于 Vue.js
- Vue嘶朱、Vue Router蛾坯、Vuex、Vue SSR
- 自動(dòng)代碼分層
- 服務(wù)端渲染
- 強(qiáng)大的路由功能疏遏，支持異步數(shù)據(jù)
- 靜態(tài)文件服務(wù)
- ES5+ 語法支持
- 打包和壓縮 JS 和 CSS
- HTML 頭部標(biāo)簽管理
- 本地開發(fā)支持熱加載
- 集成 ESLint
- 支持各種樣式預(yù)處理器： SASS脉课、LESS、 Stylus 等等
- 支持 HTTP/2 推送
創(chuàng)建項(xiàng)目
Nuxt提供兩種方式創(chuàng)建項(xiàng)目：
- 使用create-nuxt-app工具
- 手動(dòng)創(chuàng)建
使用手動(dòng)創(chuàng)建過程:
1. 初始化項(xiàng)目目錄并安裝nuxt
# 創(chuàng)建示例項(xiàng)目
mkdir nuxt-js
# 進(jìn)入示例項(xiàng)目目錄中
cd nuxt-js
# 初始化 package.json 文件
npm init -y
# 安裝 nuxt
npm innstall nuxt
在package.json中scripts添加
"scripts": {
"dev": "nuxt --open",
},
2. 創(chuàng)建頁面并啟動(dòng)項(xiàng)目
在根目錄下創(chuàng)建pages目錄财异，并創(chuàng)建index.vue文件
pages/
--| index.vue
啟動(dòng)項(xiàng)目
npm run dev
3. Nuxt中創(chuàng)建路由
Nuxt會跟據(jù)pages目錄中的所有.vue文件生成應(yīng)用的路由配置
假設(shè) pages 的目錄結(jié)構(gòu)如下：
pages/
--| users/
-----| edit.vue
--| index.vue
那么倘零，Nuxt自動(dòng)生成路由配置如下(注意：直接創(chuàng)建.vue文件，自動(dòng)生成)
routes: [
{
path: "/users/edit",
component: pages/users/edit,
name: "users-edit"
},
{
path: "/",
component: pages/users/index,
name: "index"
}
],
Nuxt路由
Nuxt.js 依據(jù) pages 目錄結(jié)構(gòu)自動(dòng)生成 vue-router 模塊的路由配置戳寸。
1呈驶、路由導(dǎo)航
- a標(biāo)簽
-
<nuxt-link>組件 - 編程時(shí)導(dǎo)航
2、動(dòng)態(tài)路由
在 Nuxt.js 里面定義帶參數(shù)的動(dòng)態(tài)路由庆揩，需要?jiǎng)?chuàng)建對應(yīng)的以下劃線作為前綴的 Vue 文件 或 目錄俐东。 以下目錄結(jié)構(gòu)：
pages/
--| users/
-----| _id.vue
--| _dynamic/
-----| index.vue
--| index.vue
Nuxt生成對應(yīng)的路由配置表為：
routes: [
{
path: "/users/:id",
component: pages/users/_id,
name: "users-id"
},
{
path: "/:dynamic.vue",
component: pages/_dynamic.vue/index,
name: "dynamic.vue"
},
{
path: "/",
component: pages/user/index,
name: "index"
},
],
3、嵌套路由
創(chuàng)建內(nèi)嵌子路由订晌，你需要添加一個(gè) Vue 文件虏辫，同時(shí)添加一個(gè)與該文件同名的目錄用來存放子視圖組件。
需要在父組件中增加<nuxt-child/>用于顯示子視圖內(nèi)容
pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue
Nuxt.js 自動(dòng)生成的路由配置如下：
routes: [
{
path: '/users',
component: 'pages/users.vue',
children: [
{
path: '',
component: 'pages/users/index.vue',
name: 'users'
},
{
path: ':id',
component: 'pages/users/_id.vue',
name: 'users-id'
}
]
}
]
4锈拨、自定義路由配置
在 Nuxt.js 里面自定義路由砌庄，需要將動(dòng)態(tài)路由_id.vue文件改為detail.vue文件。 以下目錄結(jié)構(gòu)：
改為文件只要不是下劃線定義的都可以奕枢，如果不將_id.vue改為detail.vue則跳入動(dòng)態(tài)路由_id.vue頁面
pages/
--| users/
-----| detail.vue
-----| index.vue
-----| edit.vue
創(chuàng)建nuxt.config.js文件配置自定義路由
export default {
// nuxt配置自定義路由模塊
router: {
// 擴(kuò)展路由配置
extendRoutes (routes, resolve) {
routes.push(
{
//將detail.vue改為動(dòng)態(tài)路由
name: 'users/detail',
path: '/users/(\\d+)',
component: resolve(__dirname, '@/pages/users/detail.vue')
},
{
//將http://localhost:3000/users/edit修改為http://localhost:3000/users/edit.html
name: 'users/edit',
path: '/users/edit.html',
component: resolve(__dirname, '@/pages/users/edit')
},
{
//將http://localhost:3000/users/edit修改為http://localhost:3000/users/b1_x2
name: 'users1',
path: '/users/:id?',
component: resolve(__dirname, '@/pages/users/index.vue')
},
{
//將http://localhost:3000/users/edit修改為http://localhost:3000/users/b1_x2/p1.html
name: 'users2',
path: '/users/:id/p(\\d+)\.html',
component: resolve(__dirname, '@/pages/users/index.vue')
},
)
}
}
}
組件
1. 全局組件
- 根目錄下創(chuàng)建components目錄娄昆，在components目錄下創(chuàng)建Header.vue文件，以下目錄結(jié)構(gòu)：
根目錄/
--| components/
-----| Header.vue
- nuxt.config.js中啟用全局組件：
export default {
components: true,
}
- 頁面中直接使用（注意不需要導(dǎo)入）
<template>
<div>
<Header/>
</div>
</template>
2. 局部組件
- 根目錄下創(chuàng)建components_page（自定義）目錄缝彬，在components_page目錄下創(chuàng)建Header.vue文件萌焰，以下目錄結(jié)構(gòu)：
根目錄/
--| components_page/
-----| Header.vue
- 頁面中使用
<template>
<div>
<Header/>
<nuxt />
<Footer/>
</div>
</template>
<script>
import Footer from "@/components_page/Footer";
export default {
components:{
Footer,
},
data () {
return {
};
},
};
</script>
布局
根目錄下創(chuàng)建layouts目錄，default.vue為默認(rèn)布局組件谷浅，以下目錄結(jié)構(gòu)：
根目錄/
--| layouts/
-----| default.vue
- 默認(rèn)布局
<template>
<div>
<!-- 類似于頁面入口 -->
<Header/>
<nuxt />
<Footer/>
</div>
</template>
<script>
import Footer from "@/components_page/Footer";
export default {
components:{
Footer,
},
data () {
return {
};
},
};
</script>
<style scoped lang="scss">
</style>
- 自定義布局
新增boo.vue組件
根目錄/
--| layouts/
-----| default.vue
-----| boo.vue
在pages中需要頁面中添加layout: "boo",
<template>
<div>
users_index
</div>
</template>
<script>
export default {
// 默認(rèn)layout設(shè)置自定義的布局組件 未設(shè)置的路由還會走默認(rèn)的布局組件
layout: "boo",
data () {
return {
};
},
};
</script>
<style scoped lang="scss">
</style>
nuxt.config.js配置head
// nuxt.config.js
head: {
title: 'nuxt',
htmlAttrs: {
lang: 'zh'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ 'http-equiv': "X-UA-Compatible", content: 'IE=edge,chrome=1' },
{ name: 'format-detection', content: 'telephone=no' },
{ name: 'referrer', content: 'origin' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
],
script: [],
},
請求數(shù)據(jù)
- Nuxt.js增加了一個(gè)叫
asyncData的方法扒俯，使得我們可以在設(shè)置組件的數(shù)據(jù)之前能異步獲取或處理數(shù)據(jù)奶卓。
// 當(dāng)你想要?jiǎng)討B(tài)頁面內(nèi)容有利于 SEO 或者是提升首屏渲染速度的時(shí)候，就在 asyncData 中發(fā)請求拿數(shù)據(jù)
// 注意事項(xiàng)：1.只能在頁面組件中使用撼玄，子組件中可通過props獲取父組件異步數(shù)據(jù) 2.沒有this夺姑，在組件初始化之前被調(diào)用
// 調(diào)用時(shí)機(jī)：1.獲取服務(wù)端渲染數(shù)據(jù)（確保異步數(shù)據(jù)在渲染到客戶端之前已經(jīng)填充渲染完成，提高渲染速度掌猛，有利于SEO） 2.客戶端路由更新之前也會被調(diào)用
async asyncData (context) {
//獲取上下文對象
console.log(context)
// 此時(shí)輸出在服務(wù)端執(zhí)行
// 在瀏覽器也會輸出 包裹在Nuxt SSR中
const res = await axios({
method: 'GET',
url: '/pc/story/index'
})
// 返回的對象可以直接在頁面組件使用
// 在vue調(diào)試工具中有了posts和title
// asyncData返回的數(shù)據(jù)會和data中的混合
return {
list: res,
}
},
// 如果是非異步數(shù)據(jù)或者普通數(shù)據(jù)盏浙，則正常的初始化到 data 中即可
data () {
return {
list: [],
}
}
- Nuxt.js在最新發(fā)布的2.12版本中引入了一個(gè)新的方法-- fetch，Nuxt 的鉤子函數(shù) fetch 運(yùn)行在 Vue 的 create 鉤子函數(shù)之后荔茬，正如我們所知废膘，所有的 Vue 生命周期鉤子函數(shù)都是在他們對應(yīng)的 this 上下文中被調(diào)用，fetch 也不例外兔院。
此方法只能在組件中使用
async fethch () {
const res = await axios({
method: 'GET',
url: '/pc/story/index'
})
this.list = res,
},
data () {
return {
list: [],
}
}
- 在服務(wù)端禁用 fetch
如果你需要的話殖卑，可以很方便的在服務(wù)端禁用 fetch 函數(shù)。
export default {
fetchOnServer: false
};
中間件
使用中間件對用戶進(jìn)行身份驗(yàn)證坊萝，并允許他們在驗(yàn)證通過后訪問頁面
//校驗(yàn)?zāi)硞€(gè)頁面是否登錄
export default function ({ app, redirect }) {
if (!app.$cookies.get('token')) {
return redirect('/user/login.html')
}
}
vue-awesome-swiper使用
- 安裝
npm install swiper vue-awesome-swiper --save
- plugins/vue-awesome-swiper.js
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
Vue.use(VueAwesomeSwiper)
- nuxt.config.js
css: [
'@/node_modules/swiper/css/swiper.min.css',
],
plugins: [
{ src: "@/plugins/vue-awesome-swiper", ssr: false },
],
- 使用
animate.css使用
- 安裝
npm install animate.css --save
- nuxt.config.js
css: [
'@/assets/css/animate.css'
],
- 在頁面中使用
<h1 class="animate__animated animate__bounce">An animated element</h1>
wowjs使用
- 安裝
npm install wowjs --save-dev
- 在mounted的生命周期中初始化WOW
if (process.browser) {
// 在這里根據(jù)環(huán)境引入wow.js
var { WOW } = require("wowjs");
}
mounted() {
var wow = new WOW({
live: false
})
wow.init()
}
- 在頁面中使用
<div class="wow fadeInUp" data-wow-delay="50ms">fadeInUp動(dòng)畫效果</div>
vue-lazyload圖片預(yù)加載
- 安裝
cnpm install vue-lazyload --save-dev
- nuxt-config.js
import Vue from 'vue'
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad, {
preLoad: 2.3, //預(yù)加載高度比例
error: "", //錯(cuò)誤時(shí)加載圖片
loading: 'data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVQImWNgYGBgAAAABQABh6FO1AAAAABJRU5ErkJggg==', //預(yù)加載圖片
attempt: 2, //嘗試加載圖片數(shù)量
throttleWait: 500 // 截流等待
})
- nuxt.config.js
plugins: [
{ src: "@/plugins/vue-lazyload", ssr: false }
],
- 頁面中使用
<img v-lazy="baseUrl+item.pictor" :alt="" :title="" class="" />孵稽。
