1. Python技术站首页
  2. 其他
  3. Vue

详解基于vue的服务端渲染框架NUXT

• Vue

详解基于 Vue 的服务端渲染框架 NUXT

什么是 NUXT？

NUXT 是一个基于 Vue.js 的轻量级框架，利用它可以帮我们快速搭建一个服务端渲染（SSR）的应用程序。服务端渲染的优势在于可以提高应用程序的首屏渲染速度，提供更好的搜索引擎优化（SEO）。除此之外，NUXT 还封装了 Vue.js，提供了一些默认配置和功能，例如自动生成路由和静态资源的优化。

安装

NUXT 可以通过命令行工具快速安装：

$ npm install -g create-nuxt-app
$ create-nuxt-app my-project

该命令会在当前目录下创建一个名为 "my-project" 的新项目。

NUXT 应用程序的结构

NUXT 应用程序的结构如下：

nuxt-app/
├── assets/
├── components/
├── layouts/
├── middleware/
├── pages/
├── plugins/
├── static/
├── store/
├── nuxt.config.js
└── package.json
  • assets/：用于存放应用程序的资源文件，例如样式文件和图片文件等等
  • components/：存放应用程序的 Vue 组件
  • layouts/：应用程序的布局模板，用于组合各个页面
  • middleware/：应用程序的中间件，用于处理网页请求（例如带有 cookie 的请求）
  • pages/：应用程序页面的组件（每个路由映射到一个文件）
  • plugins/：应用程序的插件，用于扩展 Vue.js 的功能
  • static/：存储静态文件，例如图片、视频等（会被自动引入到应用程序中）
  • store/：Vuex 状态管理器模块
  • nuxt.config.js：NUXT 配置文件
  • package.json：应用程序的 npm 依赖文件

NUXT 的路由机制

NUXT 的路由机制可以帮我们自动生成应用程序的路由。在 NUXT 中，每个 .vue 文件会被处理成一个独立的路由，文件名即为路由名。例如，pages/index.vue 会映射到路由 /。

如果我们需要映射到名为 blog/:id 的路由，只需要在 pages/ 目录下创建一个名为 blog/_id.vue 的文件，NUXT 会自动将 id 参数传入该组件。例如：

pages/
└── blog/
    ├── _id.vue
    └── index.vue

NUXT 的模板功能

NUXT 的模板功能可以帮我们更方便的进行页面布局。

我们可以在 layouts/ 目录下创建一个全局的布局模板，然后在每个页面中使用该模板，并在其中嵌入每个页面的内容。例如：

layouts/
├── default.vue
└── error.vue

然后，在页面中使用布局模板：

<!-- pages/index.vue -->
<template>
  <default-layout>
    <h1>Hello world!</h1>
  </default-layout>
</template>

<script>
import DefaultLayout from '~/layouts/default.vue'

export default {
  layout: DefaultLayout
}
</script>

NUXT 的插件系统

NUXT 的插件系统可以帮我们扩展 Vue.js 的功能。

我们可以在 plugins/ 目录下创建一个指定的插件，并在 NUXT 中引入。例如：

plugins/
└── moment.js

然后，在 NUXT 配置文件中引入该插件：

// nuxt.config.js
module.exports = {
  plugins: [
    '~/plugins/moment.js'
  ]
}

NUXT 的数据预取

在 NUXT 中，我们可以在渲染组件之前通过 fetch 钩子函数获取数据，并将该数据注入到应用程序的状态管理器中（Vuex）。例如：

<!-- pages/index.vue -->
<template>
  <div>
    <h1>{{ title }}</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">
        {{ post.title }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  fetch ({ store }) {
    return store.dispatch('getPosts')
  },

  computed: {
    title () {
      return this.$store.state.title
    },

    posts () {
      return this.$store.state.posts
    }
  }
}
</script>

上述代码中，fetch 钩子函数会在页面渲染之前被调用，从而在渲染组件之前获取数据并注入到应用程序的状态管理器中。获取数据的逻辑可以在 store/ 目录下的 Vuex 模块中实现。

示例 1：使用 NUXT 快速搭建一个博客应用

下面，让我们使用 NUXT 快速搭建一个博客应用。

  1. 创建一个新的 NUXT 应用程序：

bash
$ npx create-nuxt-app my-blog

  1. 在 pages/ 目录下创建一个名为 index.vue 的组件，用于展示博客列表：

``` html

```

上述代码中，我们通过 asyncData 钩子函数获取博客列表数据，并注入到组件的 posts 属性中。

  1. 在 store/ 目录下创建一个名为 blog.js 的 Vuex 模块，用于管理博客数据：

``` js
import axios from 'axios'

export const state = () => ({
posts: []
})

export const mutations = {
setPosts (state, posts) {
state.posts = posts
}
}

export const actions = {
async getPosts ({ commit }) {
const { data } = await axios.get('https://jsonplaceholder.typicode.com/posts')
commit('setPosts', data)
}
}
```

上述代码中，我们通过 getPosts 方法获取博客列表数据，并使用 setPosts 方法将数据注入到应用程序的状态管理器中。

  1. 在 nuxt.config.js 配置文件中启用应用程序的 Vuex 模块：

``` js
//nuxt.config.js
export default {
modules: [
'@nuxtjs/axios',
'@nuxtjs/style-resources'
],
axios: {
baseURL: 'http://localhost:8080', // Used as fallback if no runtime config is provided
},
buildModules: [
'@nuxtjs/vuetify',
],
plugins: [
],
components: true,
styleResources: {
scss: [
'./assets/scss/main.scss'
]
},
router: {
middleware: ['auth']
},

 build: {
 },
 serverMiddleware: [
   // Will register file from project api directory to handle /api/* requires
   { path: '/api', handler: '~/api/index.js' }
 ],

 server: {
   port: 80, // default: 3000
   host: '0.0.0.0', // default: localhost
 },

 //增加
 modulesDir: ['node_modules', '~/modules'],

 // 增加 Vuex 模块引用
 modules: [
   '~/store/blog.js'
 ]

}
```

  1. 运行 NUXT 应用程序：

bash
$ npm run dev

现在，我们就可以通过 http://localhost:3000/ 访问我们的博客应用了。

示例 2：使用 NUXT 和 Koa 将博客应用程序部署到服务器

假设我们已经搭建好了一个 Koa 服务器，下面我们将学习如何将 NUXT 应用程序部署到该服务器上。

  1. 编写 Koa 服务器：

``` js
const Koa = require('koa')
const consola = require('consola')

const app = new Koa()

app.use((ctx, next) => {
const start = Date.now()

 return next().then(() => {
   const ms = Date.now() - start
   consola.info(`${ctx.method} ${ctx.url} - ${ms}ms`)
 })

})

app.use((ctx) => {
ctx.body = 'Hello, world!'
})

app.listen(3000, () => {
consola.success('Server is running on http://localhost:3000')
})
```

上述代码会创建一个 Koa 应用程序，监听 http://localhost:3000 端口，并在访问该地址时返回一个 "Hello, world!" 的字符串。

  1. 在 NUXT 中配置应用程序的端口和模式：

js
// nuxt.config.js
module.exports = {
mode: 'universal',
server: {
port: 3001
}
}

上述代码中，我们将 NUXT 应用程序的端口设置为 3001，并将其模式设置为 Universal。

  1. 在 NUXT 中配置应用程序的 API 请求：

js
//nuxt.config.js
export default {
modules: [
'@nuxtjs/axios',
'@nuxtjs/style-resources'
],
axios: {
baseURL: 'http://localhost:8080', // Used as fallback if no runtime config is provided
},
serverMiddleware: [
{ path: '/api', handler: '~/api/index.js' }
],
plugins: [
],
components: true,
buildModules: [
'@nuxtjs/vuetify',
],
styleResources: {
scss: [
'./assets/scss/main.scss'
]
},
router: {
middleware: ['auth']
},
build: {
},
modulesDir: ['node_modules', '~/modules']
}

上述代码中，在 serverMiddleware 中引用了目录 ~/api 下的 JS 文件。在该目录下，我们可以编写服务器端脚本，例如连接数据库、执行查询操作等等。

  1. 在 Koa 服务器中引用 NUXT 应用程序：

``` js
const Koa = require('koa')
const { Nuxt, Builder } = require('nuxt')

const app = new Koa()

// 启用 NUXT 引擎
const nuxt = new Nuxt(require('../nuxt.config.js'))
if (nuxt.options.dev) {
const builder = new Builder(nuxt)
builder.build()
}

// NUXT 中间件
app.use(nuxt.render)

// 启动 Koa 服务器
app.listen(3000, () => {
consola.success('Server is running on http://localhost:3000')
})
```

上述代码中，我们使用 NUXT 的 Nuxt 类初始化一个 NUXT 引擎对象，并使用 koa.use 方法将其挂载到 Koa 中。

完成上述步骤，进入你的NUXT项目的根目录。手动打开控制台，在当前目录下按住 Shift 键并点击鼠标右键，选择 "在此处打开命令窗口" 。接下来输入 npx create-nuxt-app appName 进行项目的初始化新建。

在建立完成后进入appName文件夹内，输入 npm install 以安装依赖包。

将你的koa主文件命名为app.js放入根目录下，接下来需要用到的依赖包有：koa, consola, nuxt, nuxt-builder。通过控制台命令输入：

npm install koa consola nuxt nuxt-builder --save

在完成以上依赖包的安装后，需要对文件进行编辑配置。

因为在koa中我们需要引用NUXT的打包后的文件，就需要通过 nuxt-builder 对NUXT进行打包处理。在package.json文件中增加以下命令：

  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "start": "cross-env NODE_ENV=production node app.js",
    "start-dev": "nodemon app.js"
  },

最后一个命令是运行app.js的命令，其中cross-env命令是用来设置系统全局变量的的命令。

找到app.js文件，在开始处输入以下代码：

const nuxtConfig = require('./nuxt.config.js')
const nuxt  = new Nuxt(nuxtConfig)
if(nuxtConfig.dev) {
   const builder = new Builder(nuxt)
   builder.build()
}

app.use(async (ctx) => {
   await nuxt.ready()
   ctx.status = 200
   ctx.respond = false
   nuxt.render(ctx.req, ctx.res)
})

const server = app.listen(3000, () => {
   console.log(`Listening on http://localhost:${server.address().port}`)
})

在/etc/nginx/nginx.conf文件中增加以下内容：

http {
    # add new upstream for Node.js application
    upstream node-app {
        # http server bind to 3000
        server 127.0.0.1:3000;
    }

    server {
        listen 80 default_server;
        listen [::]:80 default_server;
        server_name your-domain.com;

        # reverse proxy to Node.js application
        location / {
            proxy_pass http://node-app;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
    }
}

Node.js 监听的端口为 3000. location / {}, 是连接 Node.js 服务的 upstream 的配置, 然后代理请求到应用程序所监听的端口。

在这种方式下，所有的请求会被代理分配到本地的3000端口上面，而应用程序则是被 NUXT 的引擎进行渲染，然后返回一个 HTML 页面给服务器。

现在，我们的博客应用程序已经部署到了云服务器上，并可以通过你的域名访问了！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解基于vue的服务端渲染框架NUXT - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • css的面试题目(前端常见面试题)

    下面是关于“css的面试题目(前端常见面试题)”的完整攻略： 一、选择器 请说明 CSS 中的 7 种基本选择器及其用法？ 答：CSS 中的 7 种基本选择器包括： 类选择器（class）：通过类名选取元素，以 . 开头。 id 选择器：通过 ID 名称选取元素，以 # 开头。 标签选择器：通过 HTML 元素名称选取元素，如 p、h1、div 等。 后代选…

    Vue 2023年5月29日
    00

  • 前端Vue.js实现json数据导出到doc

    当我们需要将前端生成的json数据导出成为doc文档时，我们可以使用Vue.js的docxtemplater模块来完成此操作。以下是详细的实现步骤： 步骤一：安装docxtemplater和jszip模块 首先，我们需要在项目中安装docxtemplater和jszip模块。使用npm命令在命令行中输入以下命令： npm install docxtempla…

    Vue 2023年5月27日
    00

  • 简易Vue评论框架的实现(父组件的实现)

    下面我来详细讲解一下“简易Vue评论框架的实现(父组件的实现)”: 简述 本文主要介绍如何使用Vue.js实现一个简单的评论框架，涉及组件通信、事件触发等相关知识点。本文将从父组件的实现开始，带你逐步实现一个完整的评论框架。 父组件的实现 创建父组件 首先，我们需要创建一个父组件，用于渲染整个评论区。可以先创建一个Comment.vue文件，并定义一个简单的…

    Vue 2023年5月27日
    00

  • vue实现下载文件流完整前后端代码

    下面是使用Vue实现下载文件流的前后端代码攻略。 前端代码 前端代码主要使用了Vue的axios库实现文件下载。示例如下： <template> <div> <button @click="downloadFile">下载文件</button> </div> </templ…

    Vue 2023年5月28日
    00

  • Vue 实现v-for循环的时候更改 class的样式名称

    当我们在 Vue 中使用 v-for 指令进行循环渲染列表的时候，有时候可能需要根据不同的条件给不同的元素添加不同的样式名称。Vue 中实现这个功能的方法很简单，只需要在 v-bind:class 属性中绑定一个动态的对象即可。 具体的步骤如下： 在 v-for 循环中，使用 v-bind:class 绑定一个动态的对象。 <div v-for=&qu…

    Vue 2023年5月29日
    00

  • 简单谈谈Vue3中的ref和reactive

    一、Vue3中的ref和reactive是什么？ Vue3中的ref和reactive都属于Vue3的响应式系统。这个响应式系统支持应用的状态自动更新，并且Vue3的响应式系统相较于Vue2有很大的改进。 在Vue2中，响应式数据只能定义在Vue组件实例的data选项中，而在Vue3中，ref和reactive可以定义在任何地方。 ref是一个函数，它可以将…

    Vue 2023年5月27日
    00

  • Vue2和Vue3中常用组件通信用法分享

    下面为您详细讲解“Vue2和Vue3中常用组件通信用法分享”的完整攻略。 1. Vue2中常用组件通信方式 在Vue2中，组件通信有以下几种方式： 1. 父子组件传值 通过父组件向子组件传递值，一般使用props属性。 <!– Child.vue 父子组件传值示例 –> <template> <div> {{messa…

    Vue 2023年5月27日
    00

  • 一篇文章看懂Vue组合式API

    一篇文章看懂Vue组合式API 什么是Vue组合式API Vue组合式API是Vue 3中新增的语法特性，它提供了一种新的组件编写方式，能够更加优化组件的可复用性、可维护性和可测试性。与Vue 2.x的Options API相比，Vue 3.x的组合式API更加灵活且容易理解使用。本文将介绍Vue组合式API的使用方法。 setup函数 在使用Vue组合式A…

    Vue 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部