nuxt框架集成和使用，与vue3支持插件解析，与tauri框架结合实现跨平台应用方案

垣宇

已于 2025-02-15 00:58:17 修改

阅读量894

点赞数 4

文章标签：性能优化安全 rust python javascript vue.js 前端框架

于 2025-02-14 10:04:29 首次发布

本文链接：https://blog.csdn.net/mycollege2011/article/details/145623968

版权

一、简介

Nuxt 是一个免费的开源框架，提供了一种直观且可扩展的方式，用于创建类型安全、高性能和生产级的全栈网页应用和网站，基于 Vue.js。

二、特性

1.自动化与约定

基于文件的路由：根据 pages/ 目录的结构定义路由。这样可以更轻松地组织您的应用，避免手动配置路由的需要。

代码分割： Nuxt 自动将代码拆分成更小的块，这有助于减少应用的初始加载时间。

开箱即用的服务器端渲染： Nuxt 自带内置 SSR 功能，因此您无需自己配置单独的服务器。

自动导入：在各自的目录中编写 Vue 组合式API和组件，无需手动导入，享受树摇和优化后的 JS 捆绑包的好处。

数据获取工具： Nuxt 提供组合式 API 来处理支持 SSR 的数据获取以及不同的策略。

零配置 TypeScript 支持：编写类型安全的代码，而无需学习 TypeScript，借助我们的自动生成类型和
tsconfig.json。

配置的构建工具：我们默认使用 Vite 来支持开发中的热模块替换 (HMR) 且最佳实践已内置到生产中代码捆绑。

Nuxt 处理这些任务，提供前端和后端功能，可以让我们专注于重要的事情：创建网页应用。

2.服务器端渲染

Nuxt 默认内置服务器端渲染 (SSR) 功能，无需自己配置服务器，这为网页应用带来了很多好处：

更快的初始页面加载时间： Nuxt 向浏览器发送一个完全渲染的 HTML
页面，可以立即显示。这可以提供更快的感知页面加载时间和更好的用户体验 (UX)，尤其在网络或设备较慢时。

改善 SEO：搜索引擎可以更好地索引 SSR 页面，因为 HTML 内容是立即可用的，而不需要 JavaScript 在客户端渲染内容。

低功耗设备更好的性能：减少需要在客户端下载和执行的 JavaScript，以便为可能在处理重型 JavaScript
应用时遇到困难的低功耗设备提供帮助。

更好的可访问性：内容在页面初始加载时即刻可用，提高了依赖屏幕阅读器或其他辅助技术的用户的可访问性。

更简单的缓存：页面可以在服务器端缓存，这可以通过减少生成和发送内容到客户端所需的时间进一步提升性能。

总体来说，服务器端渲染可以提供更快和更高效的用户体验，同时改善搜索引擎优化和可访问性。

由于 Nuxt 是一个多功能框架，能够通过 nuxt generate 将整个应用程序静态渲染为静态托管，通过 ssr: false 选项全局禁用 SSR，或通过设置 routeRules 选项利用混合渲染。

3.服务器引擎

Nuxt 服务器引擎 Nitro 解锁了新的全栈能力。

在开发中，它使用 Rollup 和 Node.js 工作者来处理服务器代码和上下文隔离。它还通过读取 server/api/ 中的文件和 server/middleware/ 中的服务器中间件生成您的服务器 API。

在生产中，Nitro 将项目应用和服务器构建为一个通用的 .output 目录。此输出体积小：经过压缩并移除任何 Node.js 模块（除非是填充模块）。

可以在支持 JavaScript 的任何系统上部署此输出，从 Node.js、无服务器、工作者、边缘渲染到纯静态。

三、nuxt安装和集成

1.安装命令

pnpm dlx nuxi@latest init <project-name>

或

npx nuxi init nuxt-app

进入文件

cd <project-name>

在vscode 打开项目

code <project-name>

或

code .

开发模式启动Nuxt 应用程序

pnpm dev -o

2.依赖插件

2.1 Vue CLI‌

Nuxt3本身是一个基于Vue.js的服务端渲染框架，它不需要再单独引入Vue CLI。Nuxt3支持Vite作为构建工具，可以直接使用Vite进行项目配置和管理。

虽然通常不直接在 Nuxt.js 中使用 Vue CLI，但你可以用它来创建单独的 Vue 组件。安装其他必要的依赖：

nodejs的安装可以参考文章 nodejs和vscode安装

全局安装

npm install -g @vue/cli

安装其他依赖如下示例

npm install vue-router@4 pinia vitest @vitejs/plugin-vue @vitejs/plugin-vue-jsx typescript

2.2 TypeScript

Nuxt 3 支持 TypeScript，无需额外配置。

在其他vue.js框架中单独配置TS

npm install typescript --save-dev
# 或者
yarn add typescript --dev

Vue CLI 会为你生成一个 tsconfig.json 文件，通常位于项目根目录。你可以根据需要修改这个文件，例如添加或修改编译器选项。

在 Vue 组件中使用 TypeScript

你可以通过在

<template>
  <div>{
   
  
  {
    message }}</div>
</template>
 
<script lang="ts">
import {
    defineComponent } from 'vue';
 
export default defineComponent({
   
  name: 'HelloWorld',
  data() {
   
    return {
   
      message: 'Hello, TypeScript!'
    };
  }
});
</script>

使用 TypeScript 类型定义

为了更好地利用 TypeScript，你可能需要为 Vue 的特定功能（如 props, events 等）定义类型。Vue 提供了一些类型定义来帮助你实现这一点。例如，为 props 定义类型：

<script lang="ts">
import {
    defineComponent, PropType } from 'vue';
 
export default defineComponent({
   
  props: {
   
    msg: {
   
      type: String as PropType<string>,
      required: true
    }
  },
  setup(props) {
   
    return {
   
      message: props.msg,
    };
  }
});
</script>

使用 TypeScript 的高级功能（如接口、类等）

你可以在 Vue 组件中使用 TypeScript 的所有特性，包括接口、类、泛型等：

<script lang="ts">
import {
    defineComponent } from 'vue';
import {
    PropType } from 'vue';
 
interface User {
   
  id: number;
  name: string;
}
 
export default defineComponent({
   
  props: {
   
    user: {
   
      type: Object as PropType<User>,
      required: true,
    }
  },
  setup(props) {
   
    const userName = computed(() => props.user.name); // 使用计算属性获取用户名
    return {
    userName }; // 将计算属性暴露给模板使用
  }
});
</script>

编译和运行项目

确保你的 package.json 中的 scripts 部分正确配置了用于编译和运行项目的命令。对于使用 Vue CLI 的项目，通常是这样的：

"scripts": {
   
  "serve": "vue-cli-service serve", //注释放下文
}

注释解析

开发环境启动服务，自动打开浏览器并热重载文件更改。默认端口是8080。你可以通过设置环境变量PORT来更改端口号。例如：PORT=3000
npm run serve。或者通过设置NODE_ENV环境变量来指定环境。例如：NODE_ENV=production npm run
serve。这将启动生产环境的服务器。但是，请注意，这实际上并不会编译你的应用，只是简单地启动了一个生产环境的服务器实例。要真正编译你的应用，你应该使用build命令。如果你只是想在生产环境下预览你的应用，你应该使用npm
run build命令来构建你的应用，然后使用npm run serve命令来启动服务，并指向dist目录。例如：serve -s
dist。这样，你可以在本地预览你的生产构建版本。但是，请注意，这种方法并不适用于Vue
CLI生成的默认项目设置，因为它会自动处理静态文件服务。所以，你应该直接使用npm run build来构建你的项目，然后用npm run
serve来启动开发服务器（如果你需要这样做的话）。

2.3 JSX‌

Nuxt3支持Vue 3，而Vue 3默认支持JSX和TSX。如果你需要在Nuxt3项目中编写JSX代码，可以直接在项目中使用JSX语法。Nuxt3的配置文件（如nuxt.config.ts）也支持TypeScript，方便进行类型检查和开发。

可以在你的 nuxt.config.ts 中添加：

export default defineNuxtConfig({
   
  modules: ['@nuxtjs/composition-api'], // 如果你需要 Composition API + Options API
  vue: {
   
    config: {
   
      compilerOptions: {
   
        compatConfig: {
   
          MODE: 2
        }
      }
    }
  }
});

由于 Nuxt.js 3 使用 Vite，Vite 支持 JSX 和 TSX，所以你可以直接在 .vue 文件或组件中使用 JSX：

<script lang="tsx">
export default {
   
  setup() {
   
    return () => <div>Hello, JSX!</div>;
  }
}
</script>

jsx详解可以参考文章跨平台组件对比

在其他vue.js框架中需要单独集成jsx插件，如果你想要在组件中使用JSX，你需要确保你的项目配置了相应的支持。Vue.js本身并不直接支持JSX，但你可以通过一些配置和库来实现这一功能。以下是几种实现方式：

使用Vue的@vue/babel-plugin-jsx插件

Vue 3开始提供了一个官方的JSX支持，但需要配合@vue/babel-plugin-jsx插件使用。首先，你需要安装这个插件：

npm install @vue/babel-plugin-jsx --save-dev

然后，在你的Babel配置文件（通常是.babelrc或babel.config.js）中添加这个插件：

{
   
  "plugins": ["@vue/babel-plugin-jsx"]
}

使用Vue 2和Vueify（如果你使用的是Vue 2）

如果你正在使用Vue 2，并且想要在项目中使用JSX，你可以使用vueify这个loader。首先，安装vueify和babel-plugin-transform-vue-jsx：

npm install vueify babel-plugin-transform-vue-jsx --save-dev

然后，在webpack配置中设置vueify loader：

module: {
   
  rules: [
    {
   
      test: /\.vue$/,
      loader: 'vue-loader'
    },
    {
   
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/,
      options: {
   
        plugins: ['transform-vue-jsx']
      }
    }
  ]
}

配置TypeScript项目支持JSX（如果使用TypeScript）

如果你在使用TypeScript，并且想要在Vue组件中使用JSX，你需要在你的tsconfig.json中添加对JSX的支持：

{
   
  "compilerOptions": {
   
    "jsx": "preserve", // 或者 "react-native", "react" 等，取决于你的具体需求
    "allowJs": true // 允许编译JS文件（如果你的项目中混用了JS和TS）
  },
  "include": [
    "src/**/*" // 确保包括你的源码目录
  ]
}

确保你的webpack或其他构建工具配置了相应的TypeScript loader（如ts-loader或babel-loader）。

2.4 Vue Router

在 Nuxt.js 中，你可以直接使用 Vue Router 而不需要额外的配置，因为 Nuxt.js 已经集成了 Vue Router。你可以在 nuxt.config.ts 中配置路由：

// nuxt.config.ts
export default defineNuxtConfig({
   
  modules: ['@nuxtjs/router'],
  router: {
   
    options: {
   
      routes: [
        {
    name: 'home', path: '/', component: 'Home' },
        // 更多路由...
      ]
    }
  }
});

在其他vue.js框架单独引入路由

在 Vue.js 中，使用 Vue Router 来创建单页应用（SPA）是非常常见的做法。Vue Router 提供了声明式的路由导航和动态路由匹配等功能，使得构建现代 web 应用变得简单。

通过 Vue CLI 插件来安装 Vue Router

vue add router

或手动安装

npm install vue-router

创建路由配置

在项目中创建一个路由配置文件，例如 src/router/index.js。这个文件将定义你的路由表。

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';
 
Vue.use(VueRouter);
 
const routes = [
  {
   
    path: '/',
    name: 'Home',
    component: Home
  },
  {
   
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
];
 
const router = new VueRouter({
   
  mode: 'history', // 使用 HTML5 History 模式
  base: process.env.BASE_URL,
  routes
});
 
export default router;

在 Vue 项目中使用路由配置

在你的主入口文件 src/main.js 中引入并使用路由配置。

import Vue from 'vue';
import App from './App.vue';
import router from './router'; // 引入路由配置文件
 
Vue.config.

最低0.47元/天解锁文章