Nuxt.js 初学者指南项目教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00704/article/details/142040552

Nuxt.js 初学者指南项目教程

nuxt-beginners-guideJapan's first book that corresponds to Nuxt.js v2 and focuses on deep content.项目地址:https://gitcode.com/gh_mirrors/nu/nuxt-beginners-guide

1. 项目目录结构及介绍

nuxt-beginners-guide/
├── assets/
│   └── README.md
├── components/
│   └── README.md
├── layouts/
│   └── README.md
├── middleware/
│   └── README.md
├── pages/
│   └── README.md
├── plugins/
│   └── README.md
├── static/
│   └── README.md
├── store/
│   └── README.md
├── nuxt.config.js
├── package.json
├── README.md
└── yarn.lock

目录结构介绍

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`

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

3. 项目配置文件介绍

`nuxt.config.js`

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'
  ],

  // 模块
  modules: [
    '@nuxtjs/axios'
  ],

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

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