Nuxt.js知识框架

一、核心概念

Nuxt.js 是基于 Vue.js 的一个通用应用框架，它提供了开箱即用的功能来构建服务器渲染 (SSR) 和静态生成的应用程序。以下是其主要的核心概念：

1. 目录结构

   • assets: 存放未编译的资源文件（如 SCSS 文件），这些文件会被 Webpack 编译。
   • components: 放置可重用的 Vue 组件。
   • layouts: 定义全局布局组件，默认提供 default.vue 布局。
   • pages: 自动路由配置的基础路径，每创建一个新的 .vue 文件都会自动生成对应的路由。
   • plugins: 注册第三方库或 Vue 插件的地方。
   • static: 存放不需要经过 Webpack 处理的静态资源文件。
   • store: 使用 Vuex 进行状态管理的位置。

2. 生命周期钩子

   • asyncData(context)：用于在页面加载前获取数据的方法，仅限于页面组件中使用3。
   • fetch()：类似于 asyncData，但它不会延迟导航响应时间，并且可以访问组件实例中的属性和方法3。
   • created()：Vue 实例被创建后的回调函数，在此阶段无法直接访问 DOM 节点3。
   • mounted()：当组件挂载到真实 DOM 上时触发，此时可以安全地操作窗口对象 window3。

二、开发环境搭建

为了快速启动并运行 Nuxt.js 应用程序，通常需要设置好本地开发环境以及部署流程。

1、初始化项目

npx create-nuxt-app  cd  npm run dev

2、集成后端 API：

可以利用 @nuxtjs/axios 模块简化 HTTP 请求逻辑，同时配合 @nuxtjs/proxy，有效解决跨域资源共享(CORS)

// nuxt.config.js 
export default { 
    modules: [ '@nuxtjs/axios', '@nuxtjs/proxy' ], 
    axios: { proxy: true, }, 
    proxy: { 
        '/api/': { 
            target: 'http://localhost:8181', 
            pathRewrite: {
                '^/api/': ''
            } 
        } 
    } 
};

3、定制化服务端中间件

如果希望进一步增强灵活性，则可以通过引入 Node.js 表达式(Express)或其他类似的框架实现更复杂的业务需求:

// server/index.js 
const express = require('express'); 
const { Nuxt } = require('nuxt'); 
const app = express(); 
const config = require('../nuxt.config.js'); 
const nuxt = new Nuxt(config); 
const { host, port } = nuxt.options.server; 
app.use(nuxt.render); 
app.listen(port, host);

三、优化建议

针对生产环境中性能调优方面给出几点指导原则:

• 启用缓存策略减少重复请求次数；
• 对图片等媒体素材采用懒加载技术降低首屏耗时；
• 利用 Tree Shaking 移除无用代码片段从而减小打包体积；