nuxt脚手架创建项目

在初始化时遇到一个依赖找不到的问题,记录一下,如有遇到同样问题的小伙伴,希望能给你们一点指引。

从安装脚手架开始,首先

一:安装nuxt脚手架

1. C盘全局安装: npm i -g create-nuxt-app   安装后可create-nuxt-app -v查看

2. npx create-nuxt-app <project-name>

3. 会弹出选择安装项

# nuxt 项目名称(若上述命令添加了项目名,则直接回车默认上述的项目名)
? Project name: (test-for-nuxt2)# 选择 js 或 ts 作为项目的开发语言,不同选择会生成不同的config 文件:tsconfig.json / jsconfig.json
? Programming language: (Use arrow keys)
> JavaScriptTypeScript# 选择包管理器
? Package manager: (Use arrow keys)Yarn
> Npm# 选择 UI 库,nuxt 框架提供了许多选择,这里按需取用即可。若现在不需要 UI 库,可以选择 None,后续也可以再添加
? UI framework: (Use arrow keys)None
> Ant Design VueBalmUIBootstrap VueBuefyChakra UIElementOrugaPrimevueTachyonsTailwind CSSWindi CSSVantView UIVuetify.js# 选择默认的模板引擎(常用的是 HTML,但如果想想试试 Pug 可以先去了解 https://www.pugjs.cn/api/getting-started.html)
? Template engine: (Use arrow keys)
> HTMLPug# 选择 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 一样的来获取文件(无头式内容管理系统)# 选择 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 命令检查工具# 选择单元测试需要的框架(若暂时不确定是否有这样的需求,可以先不选)
? Testing framework: (Use arrow keys)
> NoneJestAVAWebdriverIONightwatch# 选择渲染模式
? Rendering mode: (Use arrow keys)
> Universal (SSR / SSG) # 服务端渲染,若使用想要对 SEO 有益,就选择此项(一般选择 Nuxt 都会希望进行服务端渲染)Single Page App # 单页面应用渲染模式# 选择部署目标,这里之所以可以选择部署目标是因为 nuxt 支持静态网页的生成,一般我们选服务端部署即可
? Deployment target: (Use arrow keys)
> Server (Node.js hosting)Static (Static/Jamstack hosting)# 选择开发工具,按照指引(js 开发语言的推荐选择 jsconfig.json)
? Development tools: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) jsconfig.json (Recommended for VS Code if you're not using typescript)( ) Semantic Pull Requests( ) Dependabot (For auto-updating dependencies, GitHub only)# 选择持续集成工具,按需选用即可
? Continuous integration: (Use arrow keys)
> NoneGitHub Actions (GitHub only)Travis CICircleCI# 选择版本控制系统,一般来说我们选择git版本控制系统,如果有别的需要,则选 none 按需引入即可
? Version control system: (Use arrow keys)
> GitNone

选择项中没有serve,但是查看旧项目,根目录下都有 /server/index.js 运行页报错,

这里是因为nuxt脚手架V3.2.0版本后,生成的目录将不再有server目录,需要手动创建server.js文件。详情参考一下链接

针对【create-nuxt-app新版本v3.2.0】构建项目时没有server配置以及运行后弹出收集匿名数据选项等问题的解决方法_nuxt server.js没有了__Jolee_的博客-CSDN博客

4. yarn install 安装依赖   =>   yarn dev启动

启动后 nuxt.config.js 文件中 swiper.css的引用报错

nuxt.config.js:

 运行报错如下:

报错swiper依赖中没有找到 ./swiper.css

于是代码切到swiper依赖下, 看到目录下是含有swiper.css的,咦

重新运行了一下,再后头看看报错,原来说是swiper中的package.json 没有export,导出swiper.css,如下图

又找到swiper的package.json文件中发现原来是swiper做了映射

 于是引用改成

{ src: "swiper/css" },

问题就解决了,完美运行成功

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/26615.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【开源项目--稻草】Day06

【开源项目--稻草】Day06 1. 学生提问与解答功能2. 显示create.html2.1 HomeController中代码2.2 复用网页的标签导航条 3. 创建问题发布界面3.1 富文本编辑器 4.多选下列框5.动态加载所有标签和老师6. 发布问题的业务处理 1. 学生提问与解答功能 学生提问: 提问时指定标签和回…

【《快速构建AI应用——AWS无服务器AI应用实战》——基于云的解决方案快速完成人工智能项目的指南】

基于云的人工智能服务可以自动完成客户服务、数据分析和财务报告等领域的各种劳动密集型任务。其秘诀在于运用预先构建的工具&#xff0c;例如用于图像分析的Amazon Rekognition或用于自然语言处理的AWS Comprehend。这样&#xff0c;就无须创建昂贵的定制软件系统。 《快速构…

【UE4】多人联机教程(重点笔记)

效果 1. 创建房间、搜索房间功能 2. 根据指定IP和端口加入游戏 步骤 1. 新建一个第三人称角色模板工程 2. 创建一个空白关卡&#xff0c;这里命名为“InitMap” 3. 新建一个控件蓝图&#xff0c;这里命名为“UMG_ConnectMenu” 在关卡蓝图中显示该控件蓝图 打开“UMG_Connec…

全志D1-H (MQ-Pro)驱动 OV5640 摄像头

内核配置 运行 m kernel_menuconfig 勾选下列驱动 Device Drivers ---><*> Multimedia support --->[*] V4L platform devices ---><*> Video Multiplexer[*] SUNXI platform devices ---><*> sunxi video input (camera csi/mipi…

<dependency> idea中为什么这个变黄色

在IDE中&#xff0c;当你的代码出现黄色高亮时&#xff0c;通常表示存在警告或建议的提示。对于Maven的<dependency>标签来说&#xff0c;黄色高亮可能有以下几种原因&#xff1a; 依赖项未找到&#xff1a;黄色高亮可能表示IDE无法找到指定的依赖项。这可能是由于配置错…

第 357 场力扣周赛题解

A 故障键盘 简单模拟 class Solution { public:string finalString(string s) {string res;for (auto c: s)if (c ! i)res.push_back(c);elsereverse(res.begin(), res.end());return res;} };B 判断是否能拆分数组 区间dp&#xff1a;定义 p i , j p_{i,j} pi,j​表示子数组 n…

uniapp echarts 点击失效

这个问题网上搜了一堆&#xff0c;有的让你降版本&#xff0c;有的让你改源码。。。都不太符合预期&#xff0c;目前我的方法可以用最新的echarts。 这个方法就是由npm安装转为CDN&#xff0c;当然你可能会质疑用CDN这样会不稳定&#xff0c;那如果CDN的地址是本地呢&#xff1…

Linux下共享windows 一键搞定

编写脚本 [rootlocalhost ~]# vim dd.sh#!/bin/bash yum -y install samba mkdir -p /home/shar sss dddecho " [share]comment Shared Folderpath /homebrowseable yeswritable yesguest ok yes " > /etc/samba/smb.confchmod x /home/* useradd qqqq s…

2023 电赛 E 题 激光笔识别有误--使用K210/Openmv/树莓派/Jetson nano实现激光笔在黑色区域的目标检测

1. 引言 1.1 激光笔在黑色区域目标检测的背景介绍 在许多应用领域&#xff0c;如机器人导航、智能家居和自动驾驶等&#xff0c;目标检测技术的需求日益增加。本博客将聚焦于使用K210芯片实现激光笔在黑色区域的目标检测。 激光笔在黑色区域目标检测是一个有趣且具有挑战性的…

AssetBundleBrowser导入报错解决方案

第一次导入AssetBundleBrowser遇到报错有 Assets\Scenes\AssetBundles-Browser-master\AssetBundles-Browser-master\Tests\Editor\ABModelTests.cs(13,7): error CS0246: The type or namespace name Boo could not be found (are you missing a using directive or an assem…

web系统测试思路

一、输入框 1、字符型输入框&#xff1a; &#xff08;1&#xff09;字符型输入框&#xff1a;英文全角、英文半角、数字、空或者空格、特殊字符“~&#xff01;#&#xffe5;%……&*&#xff1f;[]{}”特别要注意单引号和&符号。禁止直接输入特殊字符时&#xff0c;…

【项目多人协作的困扰】git-cli 解决 git merge 合并时 lock 文件变化,忘记重新安装依赖的问题

项目多人协作的困扰 相信大家多多少少都遇到过&#xff0c;当主线分支的代码&#xff0c;合入到自己的分支的时候&#xff0c;如果这时候&#xff0c;主线中有一些依赖的更新或者添加或者删除&#xff0c;如果合入之后&#xff0c;没有及时的install的话&#xff0c;项目启动的…

Stable Diffusion - Candy Land (糖果世界) LoRA 提示词配置与效果展示

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://spike.blog.csdn.net/article/details/132145248 糖果世界 (Candy Land) 是一个充满甜蜜和奇幻的地方&#xff0c;由各种各样的糖果和巧克力构成。在糖果世界&#xff0c;可以看到&…

如何搭建个人的GPT网页服务

写在前面 在创建个人的 GPT网页之前&#xff0c;我登录了 Git 并尝试了一些开源项目&#xff0c;但是没有找到满足我个性化需求的设计。虽然许多收费的 GPT网页提供了一些免费额度&#xff0c;足够我使用&#xff0c;但是公司的安全策略会屏蔽这些网页。因此&#xff0c;我决定…

2.4G芯片XL2408开发板,SOP16封装,芯片集成1T 8051内核单片机

XL2408开发板可用于2.4G芯片XL2408开发板的开发调试。XL2408烧录仿真需要使用WS_LINK。XL2408开发板烧录仿真需要接4根线&#xff1a;PA13:DIO&#xff0c;PA14:CLK&#xff0c;VCC&#xff0c;GND。 XL2408芯片集成射频收发机、频率收生器、晶体振荡器、调制解调器等功能模块,…

链表——LinkedList类的概述和实现

LinkedList类 1.1LinkedList类概述 LinkedList类底层是基于双向链表结构实现的&#xff0c;不同于ArrayList类和Vector类是基于数组实现的&#xff1b;LinkedList类是非线程安全的&#xff1b;LinkedList类元素允许为null&#xff0c;允许重复元素&#xff1b;LinkedList类插…

2023下半年软考初级网络管理员报名入口-报名流程-备考方法

软考初级网络管理员2023下半年考试时间&#xff1a; 2023年下半年软考初级网络管理员的考试时间为11月4日、5日。考试时间在全国各地一致&#xff0c;建议考生提前备考。共分两科&#xff0c;第一科基础知识考试具体时间为9:00到11:30&#xff1b;第二科应用技术考试具体时间为…

AWS 中文入门开发教学 49- S3 - 区域间复制

知识点 S3 存储桶内容在全球区域间进行复制官网 https://docs.aws.amazon.com/zh_cn/AmazonS3/latest/userguide/replication.html 实战演习 在东京区建立存储桶 Name: woyaofuzhi启用版本控制(完成区域间复制必须开启版本控制) 在新加坡区建立存储桶 Name: woyaofuzhibac…

Vue2源码分析-环境搭建

安装rollup 项目初始化 npm init -y安装pnpm npm i -g pnpm安装rollup以及相关插件 pnpm i rollup rollup/plugin-babel babel/core babel/preset-env --save-dev在根目录创建rollup.config.js文件&#xff0c;并且配置如下 import babel from "rollup/plugin-babel…

配置固定二级子域名远程访问内网群晖NAS 7.X版 【内网穿透】——“cpolar内网穿透”

配置固定二级子域名远程访问内网群晖NAS 7.X版 【内网穿透】 文章目录 配置固定二级子域名远程访问内网群晖NAS 7.X版 【内网穿透】前言1. 创建一条固定数据隧道2. 找到“保留二级子域名”栏位3. 重新编辑之前建立的临时数据隧道4. 进入“在线隧道列表”页面5. 在其他浏览器访问…