简介
在开始使用 Nuxt.js 之前，我们需要了解如何安装和配置它。本章将详细介绍如何在你的计算机上设置 Nuxt.js 开发环境，并解释一些关键的配置选项。
环境准备
在安装 Nuxt.js 之前，请确保你的计算机已经安装了 Node.js 和 npm（Node.js 的包管理器）。你可以通过以下命令检查是否已经安装：
node -v npm -v
如果没有安装，请访问 Node.js 官方网站 下载并安装最新版本的 Node.js。安装完成后，你应该能够看到类似 v16.14.0 的输出。
创建 Nuxt.js 项目
使用 npx 创建项目
Nuxt.js 提供了一个方便的命令行工具来创建新的项目。你可以使用 npx 来快速启动一个新项目：
npx create-nuxt-app my-nuxt-project
执行上述命令后，你会被引导完成一系列选择，包括项目名称、目标平台、构建工具、UI 框架等。根据你的需求进行选择即可。
手动创建项目
如果你更喜欢手动创建项目结构，可以按照以下步骤操作：
创建一个新的文件夹并进入该文件夹：
mkdir my-nuxt-project cd my-nuxt-project
初始化一个新的 npm 项目：
npm init -y
安装 Nuxt.js 及其依赖项：
npm install --save-dev nuxt
在项目根目录下创建
nuxt.config.js文件，这是 Nuxt.js 的主要配置文件。在
package.json中添加脚本以启动开发服务器："scripts": { "dev": "nuxt", "build": "nuxt build", "start": "nuxt start" }
配置 Nuxt.js
基础配置
nuxt.config.js 文件允许你自定义 Nuxt.js 应用的行为。你可以在这里配置各种选项，如应用的基本信息、路由、模块加载等。
示例配置
// www.javascriptcn.com code example
export default {
// 应用的基本信息
app: {
name: 'My Nuxt App',
head: {
titleTemplate: '%s - My Nuxt App',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: 'Nuxt.js 是一个基于 Vue.js 的通用应用框架。' }
]
}
},
// 模块配置
modules: [
'@nuxtjs/axios'
],
// 路由配置
router: {
base: '/my-app/'
},
// 构建配置
build: {
extend(config, ctx) {
// 自定义 Webpack 配置
}
}
}使用环境变量
Nuxt.js 支持使用 .env 文件来管理环境变量。首先，你需要安装 dotenv 包：
npm install --save-dev dotenv
然后，在项目根目录下创建 .env 文件，并添加相应的环境变量：
API_URL=https://api.example.com DEBUG=true
在代码中可以通过 process.env 访问这些变量：
console.log(process.env.API_URL);
启动开发服务器
安装并配置好 Nuxt.js 后，你可以通过运行以下命令启动开发服务器：
npm run dev
这将启动一个本地开发服务器，默认监听在 http://localhost:3000。你可以在浏览器中打开这个地址查看你的应用。
总结
本章介绍了如何安装和配置 Nuxt.js，包括使用 create-nuxt-app 快速搭建项目以及手动创建项目结构的方法。同时，还讲解了如何通过 nuxt.config.js 文件进行基本配置，并引入了环境变量的使用方法。希望这些内容对你理解和使用 Nuxt.js 有所帮助。
接下来，我们将进一步探讨 Nuxt.js 的核心概念和高级特性。