概況
附上nuxt官方文檔 和 node API文檔
接觸nuxt兩個多月耘纱，基本上對于服務端的渲染了解得七七八八帘靡，首先來看一下nuxt的目錄結構
目錄
├─assets // 靜態(tài)資源文件
├─components // 組件
├─layouts // 布局文件
├─middleware // 中間件
├─pages // 頁面目錄文件
├─plugins // 插件
├─server // 這個可以作為啟動項目文件
├─static // 靜態(tài)文件
├─store // 組織應用的 Vuex 狀態(tài)樹
├─nuxt.config.js // 配置文件
└─package.json // 依賴包等
nuxt的目錄結構很清晰公荧，看名字也大概能夠知道雅潭。使用nuxt和單純使用vue很大的一個區(qū)別就是不需要你手動注冊路由，你只需要把你的文件在pages目錄下面創(chuàng)建好信夫，nuxt編譯的時候就會自動幫你注冊好路由梭依。編譯好的項目下面有一個文件夾.nuxt，可以看到router.js文件呼伸。
可以看到是webpack打包的時候對不同模塊進行代碼分割，實現(xiàn)懶加載钝尸。（順便說一下 nuxt 內置了 webpack括享，省去了配置 webpack 的步驟，nuxt 會根據(jù)配置打包對應的文件）
說到這里大家應該就明白珍促，如果你需要配置路由铃辖，就必須創(chuàng)建對應的.vue文件，那么有一種情況踢星，對于有很多頻道或者說是二級路由來說澳叉，難道需要手動創(chuàng)建一個一個文件然后復制粘貼嗎？
看一下我目前這個項目的頁面文件沐悦，實在是太多了成洗。再者就是后期可能還會增加，目前已經(jīng)有了五十多個二級目錄藏否，想了一下還是用代碼來創(chuàng)建文件瓶殃，一勞永逸，何樂不為副签。
node創(chuàng)建多個組件文件
基于node + express集成的服務器端遥椿，以下代碼寫在server/index.js下面，在我們 new Nuxt() 之前需要把文件創(chuàng)建好淆储，這樣才可以自動生成路由冠场。
// 1. 引入fs文件系統(tǒng)
const fs = require('fs');
// 2. 讀取一個模板內容
var dataContent = await fs.readFileSync('assets/script/modal.vue')
// 3. 讀取json文件，（這個其實就是數(shù)據(jù)本砰，一般是后端接口提供）
const fileData = require('../assets/script/fileData.json')
for (const item of fileData.data) {
for (const file of item.files) {
var path = `${item.folder}/${file.filename}.vue`;
// 1. 判斷文件夾是否存在碴裙，不存在創(chuàng)建
var checkDir = fs.existsSync('pages/'+item.folder);
if(!checkDir){
await mkdir('pages/'+item.folder);
}
// 2. 判斷文件是否存在，不存在創(chuàng)建
var checkFile = fs.existsSync('pages/'+path);
if(!checkFile){
// 3. 替換文件里面的內容
var content = dataContent.toString()
content = content.replace(/頻道id/g,file.id)
.replace(/二級id/g,file.lid)
.replace(/標題/g,file.title)
.replace(/關鍵字/g,file.keywords)
.replace(/描述/g,file.description)
.replace(/頻道鏈接/g,file.url)
// 4. 創(chuàng)建并寫入文件
fs.writeFileSync('pages/'+path, content);
}
}
}
modal.vue模板文件
<template>
<list id="頻道id" lid="二級id"></list>
</template>
<script>
export default {
head() {
return this.$seo('標題', '關鍵字', '描述', [{}],'頻道鏈接')
},
components: {
list: () => import('~/components/list'),
},
}
</script>
fileData.json文件
{
"data":[
{
"folder": "story", // 文件夾名稱
"files": [
{
"filename":"index", // 文件名
"id":"1996",
"lid":"01",
"title":"標題",
"keywords":"這是關鍵字需要替換的文本",
"description":"這是描述需要替換的文本",
"url":"頻道鏈接https://www.baidu.com/"
}
]
},
{
"folder":"politicians",
"files":[
{
"filename":"index",
"id":"1996",
"lid":"07",
"title":"標題",
"keywords":"這是關鍵字需要替換的文本",
"description":"這是描述需要替換的文本",
"url":"頻道鏈接https://www.baidu.com/"
}
]
}
]
}
這樣創(chuàng)建好的話在pages下面就會生成兩個文件夾story和politicians点额，里面都有一個index.vue文件舔株，文件的內容就是modal.vue里面的內容，把你需要替換的文本替換就可以生成不一樣的文件內容了还棱。
總結
fs文件系統(tǒng)其實我接觸的也不多载慈，跟著官方文檔的API來操作，一步一步來便可以實現(xiàn)珍手。都說Node.js 是運行在服務端的 JavaScript办铡，它很強大，就fs文件系統(tǒng)來說琳要，它有各種各樣的類和對應的方法料扰，其實不需要每一個都要精通。對于node基礎知識我們可以多了解焙蹭，一些特定的需求我們可以一邊開發(fā)一邊學習晒杈。
