nuxt2安装及创建项目

2024-09-02 10:04
文章标签 安装 项目 创建 nuxt2

本文主要是介绍nuxt2安装及创建项目,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

nuxt2安装及创建项目


文章目录

  • nuxt2安装及创建项目
  • 一、安装Node.js
  • 二、创建项目
    • ①:创建项目
    • ②:服务框架选择
    • ③:运行测试
  • 三、目录结构


一、安装Node.js

  • nuxt运行依赖与Node环境

通过nvm来安装node.js 参考笔记

  • win环境:https://blog.csdn.net/cygqtt/article/details/135762599
  • MacOS环境:https://blog.csdn.net/cygqtt/article/details/135962379

二、创建项目

①:创建项目

  • 为了快速入门,Nuxt.js 团队创建了脚手架工具 create-nuxt-app
  • 确保安装了 npxnpx 在 NPM 版本 5.2.0 默认安装了
npx create-nuxt-app <项目名>
  • 或者用 yarn
yarn create nuxt-app <项目名>

在这里插入图片描述

②:服务框架选择

1.Project name 项目名

在这里插入图片描述

2.Programming language 程序设计语言

在这里插入图片描述

3.Package manager 包管理器

在这里插入图片描述

4.UI framework UI框架

在这里插入图片描述

5.Template engine 模板引擎

在这里插入图片描述

6. Nuxt.js modules nuxt 扩展模块

? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Axios - Promise based HTTP client # 安全且简单的 axios 和 nuxt.js 集成,用于 Http 请求(HTTP/HTTPS请求的Web App)( ) Progressive Web App (PWA) # 稳定的 PWA 解决方案用于增强 Nuxt 对 PWA 的支持(渐进式应用程序)( ) Content - Git-based headless CMS # 允许在content / dictionary 中写入内容,并通过像 API 一样的来获取文件(无头式内容管理系统)

在这里插入图片描述

7. Linting tools 选择 lint 工具

? Linting tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) ESLint # 代码检查工具( ) Prettier # 代码格式化工具( ) Lint staged files # 可以在代码提交前对待提交区代码进行一些自定义操作的工具,包括执行eslint检查等等( ) StyleLint # css 代码检查工具( ) Commitlint # commit 命令检查工具

在这里插入图片描述

8.Testing framework 选择单元测试需要的框架

  • (若暂时不确定是否有这样的需求,可以先不选)

在这里插入图片描述

9.Rendering mode 渲染模式

? Rendering mode: (Use arrow keys)
> Universal (SSR / SSG) # 服务端渲染,若使用想要对 SEO 有益,就选择此项(一般选择 Nuxt 都会希望进行服务端渲染)Single Page App # 单页面应用渲染模式

在这里插入图片描述

10. Server 部署目标

  • 这里之所以可以选择部署目标是因为 nuxt 支持静态网页的生成,一般我们选服务端部署即可

在这里插入图片描述

11.Development tools 开发工具,按照指引(js 开发语言的推荐选择 jsconfig.json)

在这里插入图片描述

12. GitHub 名字 随便写

在这里插入图片描述

13. 版本控制工具

在这里插入图片描述

  • 创建完成

在这里插入图片描述

③:运行测试

npm run dev

在这里插入图片描述

在这里插入图片描述

三、目录结构

详情查看官网:https://www.nuxtjs.cn/guide/directory-structure

在这里插入图片描述

这篇关于nuxt2安装及创建项目的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1129653

相关文章

mac安装nvm(node.js)多版本管理实践步骤

《mac安装nvm(node.js)多版本管理实践步骤》:本文主要介绍mac安装nvm(node.js)多版本管理的相关资料,NVM是一个用于管理多个Node.js版本的命令行工具,它允许开发者在... 目录NVM功能简介MAC安装实践一、下载nvm二、安装nvm三、安装node.js总结NVM功能简介N

SpringBoot项目注入 traceId 追踪整个请求的日志链路(过程详解)

《SpringBoot项目注入traceId追踪整个请求的日志链路(过程详解)》本文介绍了如何在单体SpringBoot项目中通过手动实现过滤器或拦截器来注入traceId,以追踪整个请求的日志链... SpringBoot项目注入 traceId 来追踪整个请求的日志链路,有了 traceId, 我们在排

python安装whl包并解决依赖关系的实现

《python安装whl包并解决依赖关系的实现》本文主要介绍了python安装whl包并解决依赖关系的实现,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面... 目录一、什么是whl文件?二、我们为什么需要使用whl文件来安装python库?三、我们应该去哪儿下

MySQL安装时initializing database失败的问题解决

《MySQL安装时initializingdatabase失败的问题解决》本文主要介绍了MySQL安装时initializingdatabase失败的问题解决,文中通过图文介绍的非常详细,对大家的学... 目录问题页面:解决方法:问题页面:解决方法:1.勾选红框中的选项:2.将下图红框中全部改为英

MySQL9.0默认路径安装下重置root密码

《MySQL9.0默认路径安装下重置root密码》本文主要介绍了MySQL9.0默认路径安装下重置root密码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们... 目录问题描述环境描述解决方法正常模式下修改密码报错原因问题描述mysqlChina编程采用默认安装路径,

Java中对象的创建和销毁过程详析

《Java中对象的创建和销毁过程详析》:本文主要介绍Java中对象的创建和销毁过程,对象的创建过程包括类加载检查、内存分配、初始化零值内存、设置对象头和执行init方法,对象的销毁过程由垃圾回收机... 目录前言对象的创建过程1. 类加载检查2China编程. 分配内存3. 初始化零值4. 设置对象头5. 执行

Python使用国内镜像加速pip安装的方法讲解

《Python使用国内镜像加速pip安装的方法讲解》在Python开发中,pip是一个非常重要的工具,用于安装和管理Python的第三方库,然而,在国内使用pip安装依赖时,往往会因为网络问题而导致速... 目录一、pip 工具简介1. 什么是 pip?2. 什么是 -i 参数?二、国内镜像源的选择三、如何

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤

Android 悬浮窗开发示例((动态权限请求 | 前台服务和通知 | 悬浮窗创建 )

《Android悬浮窗开发示例((动态权限请求|前台服务和通知|悬浮窗创建)》本文介绍了Android悬浮窗的实现效果,包括动态权限请求、前台服务和通知的使用,悬浮窗权限需要动态申请并引导... 目录一、悬浮窗 动态权限请求1、动态请求权限2、悬浮窗权限说明3、检查动态权限4、申请动态权限5、权限设置完毕后

golang内存对齐的项目实践

《golang内存对齐的项目实践》本文主要介绍了golang内存对齐的项目实践,内存对齐不仅有助于提高内存访问效率,还确保了与硬件接口的兼容性,是Go语言编程中不可忽视的重要优化手段,下面就来介绍一下... 目录一、结构体中的字段顺序与内存对齐二、内存对齐的原理与规则三、调整结构体字段顺序优化内存对齐四、内