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. 学生提问与解答功能 学生提问: 提问时指定标签和回…

Centos中pip install mysqlclient失败

pip install mysqlclient 错误详情如下 pip install mysqlclient Looking in indexes: http://mirrors.tencentyun.com/pypi/simple Collecting mysqlclient Using cached http://mirrors.tencentyun.com/pypi/packages/de/9c/b176826e8994551ce826404dab97e305a4bb76c8b0a4e0…

【《快速构建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…

【stream的使用】使用stream.filter过滤List对象

Stream初相识 概括讲&#xff0c;可以将Stream流操作分为3种类型&#xff1a; 创建Stream Stream中间处理 终止Steam 每个Stream管道操作类型都包含若干API方法&#xff0c;先列举下各个API方法的功能介绍。 开始管道 主要负责新建一个Stream流&#xff0c;或者基于现有的数组…

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;…

Python如何执行cmd命令和批处理文件

一、Python如何执行cmd命令 方法:使用os.system(command) 完整代码示例&#xff1a; import osos.system(path)二、Python如何执行批处理文件 1、导入subprocess模块 import subprocess2、创建Popen对象并传入.bat文件 subprocess.Popen(rC:\Test\test1.bat)完整代码示例…

Nginx常用功能

Nginx 介绍 Nginx 是开源、高性能、高可靠的 Web 和反向代理服务器&#xff0c;而且支持热部署&#xff0c;几乎可以做到 7 * 24 小时不间断运行&#xff0c;即使运行几个月也不需要重新启动&#xff0c;还能在不间断服务的情况下对软件版本进行热更新。性能是 Nginx 最重要的…

java 两个数比较大小

多个自然数比较大小 package compare; public class Compare { public static void main(String[] args) { int [] c {3,2,5,8,6,4,9}; //找出最大数 //方法 int max0 ; //定义一个变量 for(int i0;i<c.length;i){ //遍历数组 f…

java中的垃圾收集机制

推荐 1 1 垃圾回收 1.1 java的gc堆中的对象而言&#xff0c;什么时候对象会从待回收状态变为激活状态&#xff08;垃圾变成非垃圾对象&#xff09; 当然可以。首先&#xff0c;为了使用 try-with-resources&#xff0c;您需要一个实现了 AutoCloseable 或 Closeable 接口的…

【项目多人协作的困扰】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;我决定…