零基础手把手玩vue3.0+element+net5(三)
cac55 2024-10-11 11:03 22 浏览 0 评论
上次已经创建成功的项目，现在我们通过vs code来打开项目(vs code的安装这里就不介绍了，有需要的请留言或私信)，vs code打开文件夹即可
点击终端，新终端，运行项目：npm run dev
报错了，查看本机环境变量中是否包含：
C:\Program Files\nodejs\node_modules\npm\bin
删除，重启电脑，再运行，项目启动成功：
项目运行起来之后怎么停止，快捷键：Ctrl+C，终端页面会提示是否终止，输入：Y，即可。
接下来分析下整个项目的结构，从下到上解析下每个文件的作用：
1、vite.config.js
使用vite创建的项目，会生成vite.config.js文件，vite配置可参照官网进行修正(具体使用后面会根据项目来讲解)
https://vitejs.dev/config/
2、package.json
package.json文件，定义了这个项目所依赖的包，记录项目所需要的各种模块，以及项目的配置信息。
3、package-lock.json
package-lock.json 是在 npm install时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号；
在执行npm install时，先读取package.json中的依赖，再读取package-lock.json中的版本号，从而来决定安装和更新。
与package.json的区别就是，package.json文件只能锁定大版本，也就是版本号的第一位，并不能锁定后面的小版本，package-lock.json会锁定到具体的小版本，也就是说，package-lock.json版本更精细和具体点。
4、index.html
主页，项目入口，项目运行起来，访问地址打开的就是index.html
5、.gitignore
顾名思义，.gitignore就是git提交时忽略的文件或文件夹
6、main.js
main.js是项目的入口文件；这里需要稍微说明下main.js和index.html的关系：
在项目运行中，main.js作为项目的入口文件，运行中，找到其实例需要挂载的位置(id="app"，挂载在了index.html的app标签上)，即index.html中。
把两个文件结合起来看就很好理解了，main中创建应用实例(每个 Vue 应用都是通过用 createApp 函数创建一个新的应用实例开始的)，然后将应用实例挂载(mount)到index.html的#app标签上
7、src文件夹
src文件夹中就是项目所有的页面及资源了，一般assets下放置资源文件，图片、js、css文件等等，components中放置自定义组件，其他页面结构可根据实际的业务创建目录(文件夹)来区分。
8、public
public文件夹下也是放置一些资源文件，与assets下的区别就是：
①assets目录中的文件会被webpack处理解析为模块依赖；
②public目录下的文件并不会被Webpack处理，它们会直接被复制到最终的打包目录（默认是dist/static）下，必须使用绝对路径引用这些文件
9、node_modules
node_modules下放的是npm依赖的包(项目依赖的模块)，每个项目都是独立的。
相关推荐
- 如何屏蔽色情网站?_怎么能屏蔽网站
-
一、基础防御：全网DNS劫持阻断1.修改全网DNS服务器推荐DNS：安全DNS：CleanBrowsing（成人内容过滤）：185.228.168.168/185.228.169.168Open...
- 容器、Pod、虚拟机与宿主机网络通信全解:看这一篇就够了
-
在日常开发与部署过程中，很多人一开始都会有这样的疑惑：容器之间是怎么通信的？容器怎么访问宿主机？宿主机又如何访问容器？Kubernetes中Pod的网络和Docker容器一样吗？容器跨机器是...
- Win11专业版找不到共享打印机的问题
-
有很多深度官网的用户，都是在办公室上班的。而上班就需要使用打印机，但更新win11系统后，却出现同一个办公室里面的打印机都找不到的问题，这该如何处理呢？其实，可能是由于我们并没有打开共享打印机而造成的...
- 常用电脑快捷键大全，摆脱鼠标依赖，建议收藏
-
Ctrl+C复制Ctrl+X剪切Ctrl+V粘贴Ctrl+Z撤销Ctrl+Y重做Ctrl+B加粗Ctrl+A全选所有文件Ctrl+S保存Ctrl+N新建Ctrl+O打开Ctrl+E...
- Win11实现自动追剧Jellyfin硬解，免NAS复杂操作
-
大家好，欢迎来到思赞数码。本期将详细介绍如何通过安装和配置Sonarr、Radarr、Prowlarr、qBittorrent和Jellyfin，打造一套自动化的影视管理系统。很多人认为，要实现自动追...
- 微软Win11安卓子系统WSA 2308.40000.3.0更新推送下载
-
IT之家9月21日消息，微软官方博客今日宣布，已面向所有WindowsInsider用户推送了Windows11安卓子系统的2308.40000.3.0版本更新。本次更新和之前...
- 路由器总掉线 一个命令就能猜出八九分
-
明明网络强度满格或有线图标正常，但视频卡成PPT、网页刷不开、游戏动不了，闲心这些问题很多小伙伴都碰到过。每次都要开关路由、宽带/光猫、插拔网线……一通忙。有没有啥办法能快速确定故障到底在哪儿，方便处...
- windows电脑如何修改hosts文件?_windows怎么修改hosts
-
先来简单说下电脑host的作用hosts文件的作用：hosts文件是一个用于储存计算机网络中各节点信息的计算机文件；作用是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”，当用户在浏览器中...
- win10广告弹窗ShellExperienceHost.exe
-
win10右下角老是弹出广告弹窗，排查为以下程序引起，但是这个是系统菜单的程序不能动：C:\Windows\SystemApps\ShellExperienceHost_cw5n1h2txyewy\S...
- Win10 Mobile预览版10512/10166越狱解锁部署已被黑客攻破
-
看起来统一的WindowsPhone和Windows越加吸引人们的关注，特别是黑客们的好奇心。XDA论坛宣称，在Win10Mobile预览版10512/10166上，已取得越狱/解锁部署突破，比如可...
- 6款冷门小众软件，都是宝藏，建议收藏
-
真的很不错(。-ω-)zzzBearhttps://bear.app/cn/Bear是一个漂亮，灵活的Markdown的写作工具。它一样只支持苹果家的全平台。它一出现就惊艳四方，就被AppSto...
- 如何让不符合条件的设备升级Windows 11
-
如果你是最近（6月24日之后）加入WindowsInsider项目并且你的设备并不符合升级条件，那么当你在尝试升级Windows11的时候可能会看到以下错误：你的PC不符合Wi...
- windows host文件怎么恢复?局域网访问全靠这些!
-
windowshost文件怎么恢复？windowshost文件是常用网址域名及其相应IP地址建立一个关联文件，通过这个host文件配置域名和IP的映射关系，以提高域名解析的速度，方便局域网用户使用...
- Mac Hosts管理工具---SwitchHosts
-
switchhosts!formac是一款帮助用户快速切换hosts文件的工具，switchhosts!formac能够帮助你快速方便的打造个人专用的网络环境，支持本地和在线两种方式，并且支持...
- 「浅谈趣说网络知识」 第十二弹 老而不死的Hosts，它还很有用
-
【浅谈趣说网络知识】第十二弹老而不死的Hosts，它还很有用什么时候才觉得自己真的老了，不是35岁以上的数字，不是头上的点点白发，而是不知觉中的怀旧。风口上的IT界讲的就是"长江后浪推前浪...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 如何绘制折线图 (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)