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中文网其他相关文章！