安装

先决条件

使用create-nuxt-app

要快速入门,你可以使用create-nuxt-app

确保你已经安装了npx (npx是自npm 5.2.0以来默认发布的)或npm v6.1或yarn。

创建nuxt-app<项目名称>
npx create-nuxt-app<项目名称>
npminit nuxt-app<项目名称>

它会问你一些问题(名称、Nuxt选项、UI框架、TypeScript、linter、测试框架等)。要了解更多关于所有选项的信息,请参见创建Nuxt应用

一旦回答了所有问题,它将安装所有依赖项。下一步是导航到项目文件夹并启动它:

cd<项目名称>dev
cd<项目名称>npm运行开发

应用程序现在正在运行http://localhost:3000.做得好!

另一种使用Nuxt.js的方法是使用CodeSandbox这是一个快速使用Nuxt.js和/或与他人分享代码的好方法。

手动安装

从头创建一个Nuxt.js项目只需要一个文件和一个目录。

我们将使用终端来创建目录和文件,您可以使用选择的编辑器自由创建它们。

设置项目

用项目的名字创建一个空目录,并导航到它:

mkdir<项目名称>cd<项目名称>

取代<项目名称>使用项目名称。

创建package.json文件:

触摸package.json

填满你的内容package.json:

package.json
“名称”“我的程序”“脚本”“开发”“nuxt”“构建”“nuxt构建”“生成”“nuxt生成”“开始”“nuxt启动”

脚本定义将用该命令启动的Nuxt.js命令npm运行命令> <纱命令> <

什么是包裹?json文件吗?

package.json就像你项目的身份证一样。它包含了所有的项目依赖关系等等。如果你不知道package.json文件是,我们强烈建议您有一个快速阅读npm文档

安装Nuxt

一旦package.json已创建,添加nuxt到您的项目,通过npm就像下图:

添加nuxt
npm安装nuxt

该命令将添加nuxt作为您的项目的依赖项,并将其添加到您的package.json.的node_modules目录也将被创建,这是所有安装的包和依赖的存储。

一个yarn.lockpackage-lock.json,以确保项目中安装的包的一致安装和兼容依赖项。

创建您的首页

Nuxt.js转换每* .vue文件里面的页面目录作为应用程序的路由。

创建页面目录在您的项目:

mkdir页面

然后,创建一个index.vue文件页面目录:

触摸页面/ index.vue

调用这个页面是很重要的index.vue因为这将是Nuxt在应用程序打开时显示的默认主页。

打开index.vue文件,并添加以下内容:

页面/ index.vue
<模板><h1>你好世界!h1>模板>

开始这个项目

在终端中输入以下命令运行项目:

dev
npm运行开发

我们在开发模式下运行应用程序时使用dev命令。

应用程序现在正在运行http://localhost:3000

通过在终端中点击链接在浏览器中打开它,你应该会看到我们在上一步中复制的文本“Hello World”。

当在开发模式下启动Nuxt.js时,它会监听大多数目录中的文件更改,所以在添加新页面时不需要重新启动应用程序

当您运行dev命令时,它将创建。nunext文件夹。版本控制应该忽略此文件夹。您可以通过在根级创建一个.gitignore文件并添加. nunext来忽略文件。

额外的步骤

创建一个名为fun.vue页面目录。

添加一个<模板> < /模板>在标题中加入一个有趣的句子。

然后,转到浏览器,看到你的新页面localhost: 3000 /有趣

创建一个名为更多的乐趣并将一个index.vue文件将给出与创建一个more-fun.vue文件。