入门 Nuxt.js :安装、配置和首页

安装和配置 Nuxt.js 项目

安装 Node.js

确保您的计算机上安装了 Node.js。 您可以从 Node.js 官方网站下载最新版本。

安装 Vue CLI

打开 Terminal 或 Command Prompt 并运行以下命令来安装 Vue CLI(如果尚未安装):

npm install -g vue-cli

创建一个 Nuxt.js 项目

在 中 Terminal,导航到要创建项目的目录并运行以下命令来创建项目 Nuxt.js:

vue init nuxt-community/starter-template my-nuxt-project

项目配置

按照 中的提示 Terminal 配置您的项目。 您可以为您的项目选择各种选项,例如使用 ESLint、安装 Axios 等。

创建首页并显示基本内容:

打开项目目录

打开 Terminal 并使用命令 cd my-nuxt-project (或您选择的文件夹名称)导航到项目目录。

创建新页面

使用 Vue CLI 通过以下命令生成新页面:

npx vue-cli-service generate page mypage

编辑新页面

打开目录 mypage.vue 中的文件 pages 并编辑页面内容。 您可以添加 HTML、Vue 组件和数据。

显示页面

layouts/default.vue 文件中,可以使用 <nuxt/> 标签来显示页面的内容。

运行项目

在 中 Terminal,运行以下命令启动项目并在浏览器中查看您的页面:

npm run dev

现在您在项目中拥有了第一个页面 Nuxt.js,可以根据需要自定义内容。