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

相关文章

sky-take-out项目中Redis的使用示例详解

《sky-take-out项目中Redis的使用示例详解》SpringCache是Spring的缓存抽象层,通过注解简化缓存管理,支持Redis等提供者,适用于方法结果缓存、更新和删除操作,但无法实现... 目录Spring Cache主要特性核心注解1.@Cacheable2.@CachePut3.@Ca

RabbitMQ 延时队列插件安装与使用示例详解(基于 Delayed Message Plugin)

《RabbitMQ延时队列插件安装与使用示例详解(基于DelayedMessagePlugin)》本文详解RabbitMQ通过安装rabbitmq_delayed_message_exchan... 目录 一、什么是 RabbitMQ 延时队列? 二、安装前准备✅ RabbitMQ 环境要求 三、安装延时队

linux系统上安装JDK8全过程

《linux系统上安装JDK8全过程》文章介绍安装JDK的必要性及Linux下JDK8的安装步骤,包括卸载旧版本、下载解压、配置环境变量等,强调开发需JDK,运行可选JRE,现JDK已集成JRE... 目录为什么要安装jdk?1.查看linux系统是否有自带的jdk:2.下载jdk压缩包2.解压3.配置环境

Spring创建Bean的八种主要方式详解

《Spring创建Bean的八种主要方式详解》Spring(尤其是SpringBoot)提供了多种方式来让容器创建和管理Bean,@Component、@Configuration+@Bean、@En... 目录引言一、Spring 创建 Bean 的 8 种主要方式1. @Component 及其衍生注解

SpringBoot通过main方法启动web项目实践

《SpringBoot通过main方法启动web项目实践》SpringBoot通过SpringApplication.run()启动Web项目,自动推断应用类型,加载初始化器与监听器,配置Spring... 目录1. 启动入口:SpringApplication.run()2. SpringApplicat

Springboot项目构建时各种依赖详细介绍与依赖关系说明详解

《Springboot项目构建时各种依赖详细介绍与依赖关系说明详解》SpringBoot通过spring-boot-dependencies统一依赖版本管理,spring-boot-starter-w... 目录一、spring-boot-dependencies1.简介2. 内容概览3.核心内容结构4.

MySQL 数据库表操作完全指南:创建、读取、更新与删除实战

《MySQL数据库表操作完全指南:创建、读取、更新与删除实战》本文系统讲解MySQL表的增删查改(CURD)操作,涵盖创建、更新、查询、删除及插入查询结果,也是贯穿各类项目开发全流程的基础数据交互原... 目录mysql系列前言一、Create(创建)并插入数据1.1 单行数据 + 全列插入1.2 多行数据

Python库 Django 的简介、安装、用法入门教程

《Python库Django的简介、安装、用法入门教程》Django是Python最流行的Web框架之一,它帮助开发者快速、高效地构建功能强大的Web应用程序,接下来我们将从简介、安装到用法详解,... 目录一、Django 简介 二、Django 的安装教程 1. 创建虚拟环境2. 安装Django三、创

linux安装、更新、卸载anaconda实践

《linux安装、更新、卸载anaconda实践》Anaconda是基于conda的科学计算环境,集成1400+包及依赖,安装需下载脚本、接受协议、设置路径、配置环境变量,更新与卸载通过conda命令... 目录随意找一个目录下载安装脚本检查许可证协议,ENTER就可以安装完毕之后激活anaconda安装更

Jenkins的安装与简单配置过程

《Jenkins的安装与简单配置过程》本文简述Jenkins在CentOS7.3上安装流程,包括Java环境配置、RPM包安装、修改JENKINS_HOME路径及权限、启动服务、插件安装与系统管理设置... 目录www.chinasem.cnJenkins安装访问并配置JenkinsJenkins配置邮件通知