Nuxt - 超详细环境搭建及创建项目整体流程(create-nuxt-app)

前言

注意:本文使用的 create-nuxt-app 脚手架版本为 4.0 ,其他版本同样可以作为参考,因为变化并不大。

首先您要确保前端环境正常,

不存在装包报错等问题,否则您需要先解决这些问题。

第一步

注意:在此之前,您必须确保已经安装了 npx(npx 在 NPM 版本 5.2.0 默认安装了)。

首先,我们需要使用框架提供的脚手架(create-nuxt-app)来创建一个项目,

在任意位置打开 cmd 终端,执行如下创建命令:

npx create-nuxt-app project

项目名称为 project,如果创建失败请改用 yarn 命令。

第二步

执行成功后,会出现如下图所示界面,输入 y 回车:

在这里插入图片描述

接下来耐心等待脚手架的安装即可。

在这里插入图片描述

第三步

注意:项目名称不要带符号和中文,不然可能会引发意想不到的错误。

咱们这一步输入项目名称,完毕后回车,如下图所示:

在这里插入图片描述

您是用 JS 开发还是用 TS 开发?上下箭头移动,选完回车。

在这里插入图片描述

您使用 npm 还是用 yarn 管理包?

在这里插入图片描述

您使用什么 UI 框架?

在这里插入图片描述

您选择 Nuxt.js 模块(也可以后期在项目中自行加入),建议选择 Axios。

在这里插入图片描述

您的代码检查工具用哪个?如不需要则建议直接回车。

在这里插入图片描述

您需要用什么测试框架?建议选 None,让 Nuxt 自己默认一个。

在这里插入图片描述

您选择一下渲染模式(重要),如果您不懂的话,请参考 这篇文章。

着急没时间看的话,请选择"Universal(SSR / SSG)"

在这里插入图片描述

您选择一下部署目标,大部分都是服务端部署,如果不懂则选第一个。

在这里插入图片描述

您选择一下部署工具,如果您不懂则直接回车不用选。

在这里插入图片描述

您 Github 名字?直接回车就行。

在这里插入图片描述

选择您喜欢的版本控制系统,推荐 Git。

在这里插入图片描述

大功告成,耐心等待即可。

运行项目

前面做好了项目配置及创建,这回咱们运行一下。

等待创建好后,我们会收到如下所示命令:

注意:如果您是 npm,则会显示 npm xxx

在这里插入图片描述
我们按照指示,依次执行:

cd project
yarn dev

在这里插入图片描述
然后等待即可。


编译成功后,如下图所示:

在这里插入图片描述
打开返回的链接(http://localhost:3000/),显示如下即为成功:

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44198965/article/details/125408111