nuxtjs目錄結(jié)構(gòu)
其目錄結(jié)構(gòu)包含了一個項目開發(fā)中通用的東西
assets 存放靜態(tài)資源
componets 存放vue組件哆料，這類組件類似于react中的無狀態(tài)組件，可復用的用于構(gòu)建頁面內(nèi)容糟红，但不具有nuxtjs提供的特性
layouts 存放布局組件，但我感覺實際編寫代碼時作用不大?
middleware 存放中間件，有express或者koa開發(fā)經(jīng)驗的話姿锭，應該很容易理解
pages 類似于spa中的views文件夾，是整個項目中最重要的內(nèi)容伯铣，值得一提的是呻此，nuxtjs會根據(jù)pages的結(jié)構(gòu)自動生成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 存放靜態(tài)文件，文件夾中的內(nèi)容會被映射的根目錄下，并且不會被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自動根據(jù)pages的結(jié)構(gòu)生成的
動態(tài)路由
給vue文件或者文件夾添加_ 即可览效。對于動態(tài)路由可以添加路由校驗却舀，如果不滿足要求，那么返回錯誤頁面
嵌套路由
在vue文件的同名文件夾中編寫vue頁面即可
pages/
--| users/
-----| _id.vue
-----| index.vue
--| users.vue
中間件
在middleware文件夾中添加js文件锤灿，其將會在下一個頁面跳轉(zhuǎn)之前執(zhí)行挽拔，其接收的參數(shù)是ctx。
中間件執(zhí)行流程順序：
nuxt.config.js- 匹配布局
- 匹配頁面
也就是說但校，應該在nuxt.config.js layout或者pages中添加middleware之后螃诅，中間件才會被執(zhí)行
類似于這樣
//vue文件中
export default {
middleware: 'stats' //中間件名
}
//nuxt.config.js中
module.exports = {
router: {
middleware: 'stats'
}
}
視圖
官網(wǎng)的圖應該很清晰的展現(xiàn)了nuxtjs視圖
創(chuàng)建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中最主要的內(nèi)容
<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>
一些不同于傳統(tǒng)vue的特殊項
| 屬性名 | 描述 |
|---|---|
| asyncData | 最重要的一個鍵, 支持 異步數(shù)據(jù)處理术裸，另外該方法的第一個參數(shù)為當前頁面組件的 上下文對象。 |
| fetch | 與 asyncData 方法類似亭枷，用于在渲染頁面之前獲取數(shù)據(jù)填充應用的狀態(tài)樹（store）袭艺。不同的是 fetch 方法不會設置組件的數(shù)據(jù)。詳情請參考 關于fetch方法的文檔叨粘。 |
| head | 配置當前頁面的 Meta 標簽, 詳情參考 頁面頭部配置API猾编。 |
| layout | 指定當前頁面使用的布局（layouts 根目錄下的布局文件）。詳情請參考 關于 布局 的文檔升敲。 |
| loading | 如果設置為false答倡，則阻止頁面自動調(diào)用this.$nuxt.$loading.finish()和this.$nuxt.$loading.start(),您可以手動控制它,請看例子,僅適用于在nuxt.config.js中設置loading的情況下。請參考API配置 loading 文檔驴党。 |
| transition | 指定頁面切換的過渡動效, 詳情請參考 頁面過渡動效瘪撇。 |
| scrollToTop | 布爾值，默認: false港庄。 用于判定渲染頁面前是否需要將當前頁面滾動至頂部倔既。這個配置用于 嵌套路由的應用場景。 |
| validate | 校驗方法用于校驗 動態(tài)路由的參數(shù)攘轩。 |
| middleware | 指定頁面的中間件叉存，中間件會在頁面渲染之前被調(diào)用， 請參考 路由中間件度帮。 |
asyncData
這是nuxtjs擴展的方法，其在pages中，其實可以理解為一個特殊的生命周期笨篷，在return時瞳秽，會自動把數(shù)據(jù)合并到data中，其作用類似于我們在created中利用axios獲取到數(shù)據(jù)后初始化data率翅。并且在服務器端使用nuxtjs時练俐，asyncData可以獲得res、req參數(shù)冕臭，類似express的中間件
區(qū)分assets和static
兩者的區(qū)別主要是腺晾，assets中的文件會被webpack編譯構(gòu)建，static中的文件會被掛載到根目錄辜贵，那么一些seo優(yōu)化的內(nèi)容就可以放到static中悯蝉，方便搜索引擎爬取。而css之類的要放在assets中托慨，方便別名之類的被編譯
