零基础手把手玩vue3.0+element+net5(二)
cac55 2024-10-11 11:02 30 浏览 0 评论
今天首先从前端开始，搭建vue3.0项目，直接参照官网进行：
安装教程：https://v3.cn.vuejs.org/guide/installation.html
官方文档上介绍有三种引用vue.js的方式：
- 在页面上以 CDN 包的形式导入。
- 使用 npm 安装它。
- 使用官方的 CLI 来构建一个项目，它为现代前端工作流程提供了功能齐备的构建设置 (例如，热重载、保存时的提示等等)。
这里就不去搬运官网的内容了，反正都是中文，自行点击上面的链接进入官网教程，都可以很清楚地看懂，有不明白的可以私信一起交流交流。下面我使用Vite工具来创建项目，Vite是尤大大又一力作，是一种新型的前端构建工具，可显着改善前端开发体验。
首先在电脑上创建一个目录，存放vue项目，直接文件路径中输入cmd，按Enter键
$ npm init @vitejs/app test01
$ cd test01
$ npm install
$ npm run dev直接执行报错：
1error code ENOLOCAL
error Could not install from "Files\nodejs\node_cache\_npx\18016" as it does not contain a package.json file.
先在网上查了查答案：大多数是说node路径带有空格(D:\Program Files确实带有空格)
直接执行：(目录名称可自行定义，执行完之后会发现D盘下多了文件夹Program~1)
npm config set cache "D:\Program~1\nodejs\node_modules\npm\node_cache"--global执行完之后，确实是可以的，进入选择项目模板界面(按上下选择)
这里我选择的是vue项目模板，创建完项目，本地目录将按照模板生成如下文件：
切换到项目目录(cd test01)，安装依赖(npm install)，运行项目(npm run dev):
出错了，求助度娘之后，有些人说是NodeJs版本低了，查了下(node -v)，我电脑上当前版本为：10.15.3，这是很早之前安装的版本，我们来升级下
直接到官网下载windows安装包即可(http://nodejs.cn/download/)，我下载的是node-v14.16.0-x64.msi，直接双击运行，一直下一步下一步到安装完成。
再次运行：npm run dev，发现项目启动成功了
在浏览器中启动：http://192.168.56.1:3000/
至此，vue项目从创建到运行就启动起来了，下一篇将进入如何用vs code来进行vue项目开发。
相关推荐
- 高中生又来卷我们了!手搓 Android 浏览器，可高度定制+脚本支持
-
回想一下，你曾经的暑假，是怎么度过的？可能是无尽的娱乐时光，或者是懒洋洋的休息日。然而，对于这位Gitee上的高中生来说，他选择在这个暑假里独立开发一款Android浏览器——Vie浏览器，...
- 网页加载CAD图纸的两个方案对比说明(网页浏览编辑DWG)
-
一．说明梦想控件提供两种技术在网页中加载CAD图纸，一个是OCX技术方案，另一个是HTML5技术方案，它们各有优缺点，用户需根据实际情况进行选择，下边分别说明一下。1、ocx技术方案（1）OCX技术是...
- 前后端分离的开源在线考试系统调试实战
-
开篇在我们的教育生涯中，或多或少的都接触过在线考试系统。例如大学里最常见的各种软件考试，上机考试等，那么有没有开源的这样的系统呢？当然是有了，今天就来调试个开源的在线考试系统。本文重点是调试，因为很多...
- 网友:小松鼠长大了!UC浏览器推出18周年专版logo引热议
-
近日，互联网厂商logo更新再次引发热议。作为国内手机浏览器的代表性厂商，UC浏览器的标志性logo小松鼠悄然发生了变化，在网友中引发了关注和讨论。依照UC微博官方账号的说法，这个全新的形象是UC18...
- 超多案例!谷歌AI模型Nano Banana的5个实用+趣味玩法
-
再不用这个AI修图神器，你的同行明天就把订单抢光了。谷歌刚放出的NanoBanana，能在一张照片里把背景、姿势、衣服一次换完，脸还是那张脸。实测把地铁照改成海边大片，只用一句话，三秒出图，不用PS来...
- 2025年最佳Windows数据恢复软件解决方案前5名
-
您是否正在寻找互联网上排名前五的WindowsPC最佳数据恢复软件解决方案？其实，网上有很多工具可以恢复已删除的文件。但并非所有应用程序都值得使用。值得信赖的文件恢复工具可以帮助您快速检索丢失、删...
- 电脑数据恢复软件推荐:10个顶级数据恢复软件分享
-
在数字化的工作与生活中，电脑文件误删除的情况时有发生，这不仅会引发我们的焦虑情绪，更可能导致重要数据的丢失。不过，幸运的是，借助正确的数据恢复软件，我们仍有机会找回那些被误删的文件。10个顶级数据恢复...
- 更懂国内APP的开源智能体!感知定位推理中文能力全面提升
-
更懂国内APP的开源智能体！感知定位推理中文能力全面提升“帮我点外卖，别点到广告位。”一句话，说出了多少人对手机自动化的真实期待。浙大和美团刚扔出来的开源项目UItron，就是冲着这句吐槽来的——它真...
- 美光首家推出采用EUV技术的1γ DDR5 DRAM芯片
-
美光科技宣布已开始向部分生态系统合作伙伴和客户出货1γ（1-gamma）16GbitDDR5DRAM芯片。美光声称，它是第一个采用1-gamma（1γ）节点的公司，该节点指的是DRAM工艺技术的第...
- DDR4的PCB设计及仿真_ddr pcb
-
以下文章来源于鼎阳硬件智库，作者王彦武DDR4关键技术和方法分析1.1DDR4与DDR3不同之处相对于DDR3,DDR4首先在外表上就有一些变化，比如DDR4将内存下部设计为中间稍微突出，边缘变...
- DDR4和DDR5内存的性能差距有哪些?
-
DDR4和DDR5内存的性能差距主要体现在带宽、延迟、能效及未来扩展性上，以下是关键差异的总结及选择建议：1.带宽与频率DDR4：主流频率为2133MHz–3600MHz，带宽约25.6–30.2...
- DDR5内存一根和两根的区别，建议收藏观看。
-
大家好，我是海韵，DDR5内存条，单条和双条有什么区别，如何选择，DDR5单条和双条内存在性能上存在差距，单条内存保持在64个通道，但内部升级为32乘以2，虽然出口速度相同，但内部运行略有提升，...
- Kingston FURY叛逆者DDR5 RGB CUDIMM内存评测 强势突破9000MT/s!
-
【ZOL中关村在线原创评测】当8000MT/s从当年的液氮超频艰难达成，到如今XMP轻松开启，DDR5内存频率的极限探索似乎看不到终点。在早先，我们曾为大家带来KingstonFURY品牌的叛逆者D...
- SK海力士将在年内推出1bnm 32Gb DDR5内存颗粒
-
IT之家4月25日消息，据韩媒NEWSIS报道，SK海力士在今日的2024年一季度财报电话会议上表示将在年内推出1bnm32GbDDR5内存颗粒。32Gb颗粒意味着消费级的...
- DRAM史上最大代际倒挂继续:三星将延长DDR4生产期限至2026年
-
IT之家8月6日消息，韩媒TheElec今天（8月6日）发布博文，报道称三星决定延长DDR41zDRAM的生产期限至2026年，一方面在DRAM史上最大代际倒挂中进...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 如何绘制折线图 (52)
- javaabstract (48)
- 新浪微博头像 (53)
- grub4dos (66)
- s扫描器 (51)
- httpfile dll (48)
- ps实例教程 (55)
- taskmgr (51)
- s spline (61)
- vnc远程控制 (47)
- 数据丢失 (47)
- wbem (57)
- flac文件 (72)
- 网页制作基础教程 (53)
- 镜像文件刻录 (61)
- ug5 0软件免费下载 (78)
- debian下载 (53)
- ubuntu10 04 (60)
- web qq登录 (59)
- 笔记本变成无线路由 (52)
- flash player 11 4 (50)
- 右键菜单清理 (78)
- cuteftp 注册码 (57)
- ospf协议 (53)
- ms17 010 下载 (60)