为什么要使用Nuxt.js？因为采用vue。js开发的应用系统SEO不友好，需要解决SEO的问题，”垃”

1.安装 创建项目

基础：确保安装了 npx（npx 在 NPM 版本 5.2.0 默认安装了）,查看本机有没有npx
npm -v
npx -v
如果有npx，可以cmd进到指定目录后 直接命令基于nuxt创建项目
npx nuxi init 项目名            
// 项目架构：基于 Nuxt 3 + 的架构（Vite 构建、内置Nitro引擎、组合式 API 优先）
// 内置引擎：内置 Nitro 引擎（支持跨平台部署、服务端 API、混合渲染优化）
// 模板选择：提供极简模板（minimal）、内容驱动模板（content）等轻量模板，无冗余配置
// 依赖安装：仅安装 Nuxt 3 + 核心必要依赖，无额外冗余依赖，后续可按需集成
// 平台部署：支持静态服务器、Node.js、云函数、Vercel 等多种部署方式，零配置适配
// TypeScript支持：原生内置 TypeScript 支持

npx create-nuxt-app <项目名>      
// 项目架构：基于 Nuxt 2 的架构，旧版，已废弃，但实测仍旧可用
// 构建工具：仅支持 Webpack 4/5
// 内置引擎：无 Nitro 引擎、自动安装大量配套依赖（如 UI 库、Vuex、Eslint 等），依赖体积较大
// 模板选择：提供丰富的交互式配置模板（选择 UI 库、状态管理、测试工具等），配置繁琐但开箱即用
// 依赖安装: 交互式选择后自动安装大量配套依赖（如 UI 库、Vuex、Eslint 等），依赖体积较大
// 平台部署：仅支持 Node.js 环境部署，其他部署方式需手动配置
// TypeScript支持：需手动选择并配置 TypeScript，兼容性和类型提示较差

nuxt.js使用教程，install时报一堆错，暂时看这个…

1. 项目目录结构及介绍

  • assets/: 存放静态资源文件，如图片、样式表等。
  • components/: 存放Vue组件文件。
  • layouts/: 存放页面布局文件。
  • middleware/: 存放中间件文件，用于在页面渲染前执行的逻辑。
  • pages/: 存放页面文件，Nuxt.js会根据文件结构自动生成路由。
  • plugins/: 存放插件文件，用于扩展Nuxt.js的功能。
  • static/: 存放不需要经过Webpack处理的静态文件。
  • store/: 存放Vuex状态管理文件。
  • nuxt.config.js: Nuxt.js的配置文件。
  • package.json: 项目的依赖管理文件。
  • README.md: 项目的说明文档。
  • yarn.lock: 依赖包的锁定文件。

2。启动文件、配置文件：

package.json 文件是Node.js项目的核心配置文件，包含了项目的元数据和依赖包信息。以下是一些关键字段：

{
  "name": "nuxt-beginners-guide",
  "version": "1.0.0",
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "nuxt": "^2.0.0"
  }
}

启动命令：

  • 开发模式: npm run dev 或 yarn dev
  • 构建项目: npm run build 或 yarn build
  • 启动生产服务器: npm run start 或 yarn start
  • 生成静态站点: npm run generate 或 yarn generate

nuxt.config.js是Nuxt.js的核心配置文件，用于配置项目的各种选项。以下是一些常见的配置项：

export default {
  // 全局页面头部配置  配置页面的头部信息，如标题、元数据等。
  head: {
    title: 'Nuxt.js 初学者指南',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // 配置全局CSS文件
  css: [
    '~/assets/css/main.css'
  ],

  // 配置项目中使用的插件。
  plugins: [
    '~/plugins/vue-notifications'
  ],

  // 配置Nuxt.js模块
  modules: [
    '@nuxtjs/axios'
  ],

  // 配置Axios模块的选项。
  axios: {
    baseURL: 'https://api.example.com'
  },

  // 配置Webpack构建选项。
  build: {
    extend(config, ctx) {
      // 自定义Webpack配置
    }
  }
}