NUXT.JS：創建通用vue.js應用程序的極簡主義框架

>潛入vue.js的世界，sitepoint Premium的綜合vue.js書籍收藏。 解鎖基本面，實踐項目，基本技巧和工具，以及更多的價格，僅需$ 14.99/月！ >

>

>通用JavaScript（也稱為同構JavaScript）允許在客戶端和服務器上執行代碼。 現代JavaScript框架（例如Vue.js）通常會構建單頁應用程序（SPA），以增強用戶體驗和速度。但是，由於JavaScript束和軌道限制，水療中心可能會遭受緩慢的初始加載時間和SEO挑戰。 服務器端渲染（SSR）在服務器上的預加載應用程序，將渲染html直接發送到瀏覽器，解決這些問題。 >

設置SSR可能很複雜。 NUXT.js簡化了VUE.JS，自動化服務器端渲染，路由和其他配置的此過程。

NUXT.JS的

鍵優點：>

• 簡化的vue.js開發：自動處理SSR，路由和配置。
• >靜態網站生成：創建與Jekyll相當的靜態網站，提高SEO和性能。
• >內置支持：集成了Vue路由器，Vuex（可選），Vue Server Renderer和Vue-Meta。
• 輕巧且高效：保持小核心尺寸（57kb min gzip）。 >
>動態路由和靜態部署：輕鬆地在諸如Firebase之類的平台上部署的動態路由和靜態站點。 >>>>>
• 可伸縮體系結構：適合各種尺寸的項目。
>

> > NUXT.JS 靜態站點的生成：

> 命令允許創建靜態網站，提供類似於靜態站點生成器的功能。 引擎蓋下的

nuxt.js >

nuxt.js工作流：generate

當用戶與nuxt.js app：交互時

1. nuxtServerInit（如果已定義）更新商店。
>
2. 中間件執行（全局，佈局，特定頁面）。
>
3. >動態路由已驗證（如果存在validate()>存在）。
>
4. asyncData()和fetch()加載服務器端渲染的數據。
>
5. 該頁面用已加載的數據渲染。
>

使用nuxt.js構建無服務器靜態博客：

>本節演示了使用nuxt.js創建一個簡單的靜態博客，從模擬的JSON文件中獲取數據（理想情況下，將使用API​​）。 假定對vue.js的基本理解。 完整的代碼可在GitHub [Github Link佔位符]上找到，並且可以通過[Demo Link佔位符]獲得演示。

設置和配置：

使用

創建一個新項目：
1. vue-cli> vue init nuxt/starter ssr-blog>安裝依賴項：
2. cd ssr-blog && npm install啟動應用程序：
3. > npm run dev配置
添加標題模板並包括Bulma CSS：
4. nuxt.config.js

<code class="language-javascript">// ./nuxt.config.js
module.exports = {
  head: {
    titleTemplate: '%s | Awesome JS SSR Blog',
    link: [
      { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css' }
    ]
  },
  // ...
};</code>

頁面佈局：

>自定義

>文件，以使用

和layouts/default.vuecomponent的導航創建自定義基本佈局。 <nuxt-link></nuxt-link>。 <nuxt></nuxt>

>頁面和路由：

>創建頁面（

，

）作為單文件組件。 nuxt.js自動處理路由。 pages/index.vue pages/about.vue

>博客主頁：

組件使用自定義

組件顯示最近的博客文章（位於pages/index.vue>中）。 博客文章數據是從<posts></posts>>。 components/Posts.vue加載的 posts.json

>動態路由：

>使用結構

為單個博客文章創建動態路由。

方法根據pages/post/_id/index.vue參數獲取特定帖子。 asyncData()id靜態文件生成：>>

修改

用於生成動態路由的靜態文件：> run

>在

文件夾中生成靜態文件。 nuxt.config.js

<code class="language-javascript">// ./nuxt.config.js
module.exports = {
  // ...
  generate: {
    routes(callback) {
      const posts = require('./posts.json');
      let routes = posts.map(post => `/post/${post.id}`);
      callback(null, routes);
    }
  }
};</code>

> firebase部署：

npm run generate dist>使用Firebase CLI部署靜態站點將靜態站點託管。

結論： >常見問題（常見問題解答）：（此部分在很大程度上保持不變，因為它直接回答了有關NUXT.JS的常見問題）>

（此處粘貼了原始輸入的FAQS部分）

以上是NUXT.JS：創建通用vue.js應用程序的極簡主義框架的詳細內容。更多資訊請關注PHP中文網其他相關文章！