安装
先决条件
使用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
:
{“名称”:“我的程序”,“脚本”:{“开发”:“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.lock
或package-lock.json
,以确保项目中安装的包的一致安装和兼容依赖项。
创建您的首页
Nuxt.js转换每* .vue
文件里面的页面
目录作为应用程序的路由。
创建页面
目录在您的项目:
mkdir页面
然后,创建一个index.vue
文件页面
目录:
触摸页面/ index.vue
调用这个页面是很重要的index.vue
因为这将是Nuxt在应用程序打开时显示的默认主页。
打开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
文件。