【ZHYP002】子涵优品开发日志
项目目录分析
输出项目文件根目录
先进入项目目录文件夹，在控制命令行窗口输出项目目录：
Microsoft Windows [版本 6.1.7601]
版权所有 (c) 2009 Microsoft Corporation。保留所有权利。C:\Users\Administrator\Desktop\project>echo %date% %time%
2022/03/30 周三 6:46:15.37C:\Users\Administrator\Desktop\project>dir驱动器 C 中的卷没有标签。卷的序列号是 285C-6DBEC:\Users\Administrator\Desktop\project 的目录2022/03/29 22:27 <DIR> .
2022/03/29 22:27 <DIR> ..
2022/03/29 17:12 <DIR> zhyp0 个文件 0 字节3 个目录 57,575,448,576 可用字节C:\Users\Administrator\Desktop\project>cd zhypC:\Users\Administrator\Desktop\project\zhyp>dir驱动器 C 中的卷没有标签。卷的序列号是 285C-6DBEC:\Users\Administrator\Desktop\project\zhyp 的目录2022/03/29 17:12 <DIR> .
2022/03/29 17:12 <DIR> ..
2022/03/29 16:39 214 .gitignore
2022/03/29 16:39 53 babel.config.js
2022/03/29 16:46 <DIR> node_modules
2022/03/29 16:40 512,533 package-lock.json
2022/03/29 16:39 905 package.json
2022/03/29 16:39 <DIR> public
2022/03/29 16:40 316 README.md
2022/03/29 16:39 <DIR> src
2022/03/29 22:16 1,661 vue.config.js6 个文件 515,682 字节5 个目录 57,575,448,576 可用字节C:\Users\Administrator\Desktop\project\zhyp>
解释项目根目录文件的作用
babel.config.js
配置文件（babel相关）
node_modules
项目依赖文件夹
package-lock.json
缓存性文件（各种包的来源）
package.json
作为项目的“身份证”，记录项目名称、项目依赖、项目运行
public
一般放置一些静态资源（图片），webpack进行打包的时候会原封不动的打包到dist文件夹中
Microsoft Windows [版本 6.1.7601]
版权所有 (c) 2009 Microsoft Corporation。保留所有权利。C:\Users\Administrator\Desktop\project\zhyp\public>echo %date% %time%
2022/03/30 周三 7:13:56.10C:\Users\Administrator\Desktop\project\zhyp\public>dir驱动器 C 中的卷没有标签。卷的序列号是 285C-6DBEC:\Users\Administrator\Desktop\project\zhyp\public 的目录2022/03/29 16:39 <DIR> .
2022/03/29 16:39 <DIR> ..
2022/03/29 16:39 4,286 favicon.ico
2022/03/29 16:39 545 index.html2 个文件 4,831 字节2 个目录 57,437,556,736 可用字节C:\Users\Administrator\Desktop\project\zhyp\public>
index.html
一个模板文件，作用是生成项目的入口文件，webpack打包的js，css也会自动注入到该页面中。我们浏览器访问项目的时候就会默认打开生成好的index.html
README.md
说明性文件
src
程序员源代码文件夹
Microsoft Windows [版本 6.1.7601]
版权所有 (c) 2009 Microsoft Corporation。保留所有权利。C:\Users\Administrator\Desktop\project\zhyp\src>echo %date% %time%
2022/03/30 周三 7:18:04.89C:\Users\Administrator\Desktop\project\zhyp\src>dir驱动器 C 中的卷没有标签。卷的序列号是 285C-6DBEC:\Users\Administrator\Desktop\project\zhyp\src 的目录2022/03/29 16:39 <DIR> .
2022/03/29 16:39 <DIR> ..
2022/03/29 16:39 511 App.vue
2022/03/29 16:39 <DIR> assets
2022/03/29 16:39 <DIR> components
2022/03/29 16:39 136 main.js2 个文件 647 字节4 个目录 57,436,958,720 可用字节C:\Users\Administrator\Desktop\project\zhyp\src>
App.vue
唯一的根组件，Vue当中的组件（.vue）
assets
一般也是放置静态资源（多个组件共用的静态资源），webpack会将这些静态资源当做一个模块，打包到js文件夹中
components
非路由组件（全局组件），其他组件放在views或者pages文件夹中
main.js
程序入口文件，也是整个程序当中最先执行的文件
vue.config.js
全局配置，如果修改这个文件的内容就要重新跑一下项目
项目文件之间的调用关系
main.js
假设上面是对的，我们应该先从main.js这个入口文件开始分析它们之间的调用关系
import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew Vue({render: h => h(App),
}).$mount('#app')
程序代码从上到下执行，那么首先是import Vue from 'vue'这条语句了：
import Vue from ‘vue’
最完整的写法是：
import Vue from "../node_modules/vue/dist/vue.js";
我们在控制台命令行窗口看一下这个是不是存在：
Microsoft Windows [版本 6.1.7601]
版权所有 (c) 2009 Microsoft Corporation。保留所有权利。C:\Users\Administrator\Desktop\project\zhyp\node_modules\vue\dist>echo %date% %t
ime%
2022/03/30 周三 9:50:50.40C:\Users\Administrator\Desktop\project\zhyp\node_modules\vue\dist>dir驱动器 C 中的卷没有标签。卷的序列号是 285C-6DBEC:\Users\Administrator\Desktop\project\zhyp\node_modules\vue\dist 的目录2022/03/29 16:40 <DIR> .
2022/03/29 16:40 <DIR> ..
1985/10/26 16:15 4,262 README.md
1985/10/26 16:15 322,047 vue.common.dev.js
1985/10/26 16:15 157 vue.common.js
1985/10/26 16:15 93,985 vue.common.prod.js
1985/10/26 16:15 316,953 vue.esm.browser.js
1985/10/26 16:15 93,419 vue.esm.browser.min.js
1985/10/26 16:15 328,185 vue.esm.js
1985/10/26 16:15 344,009 vue.js
1985/10/26 16:15 94,151 vue.min.js
1985/10/26 16:15 224,648 vue.runtime.common.dev.js
1985/10/26 16:15 173 vue.runtime.common.js
1985/10/26 16:15 65,104 vue.runtime.common.prod.js
1985/10/26 16:15 228,809 vue.runtime.esm.js
1985/10/26 16:15 240,172 vue.runtime.js
1985/10/26 16:15 65,270 vue.runtime.min.js15 个文件 2,421,344 字节2 个目录 56,724,623,360 可用字节
实验证明，vue.js这个文件是存在，接下来就到import App from './App.vue'这条语句了：
import App from ‘./App.vue’
我们通过命令行窗口看一下这个文件是否存在：
Microsoft Windows [版本 6.1.7601]
版权所有 (c) 2009 Microsoft Corporation。保留所有权利。C:\Users\Administrator\Desktop\project\zhyp\src>echo %date% %time%
2022/03/30 周三 9:57:33.49C:\Users\Administrator\Desktop\project\zhyp\src>dir驱动器 C 中的卷没有标签。卷的序列号是 285C-6DBEC:\Users\Administrator\Desktop\project\zhyp\src 的目录2022/03/29 16:39 <DIR> .
2022/03/29 16:39 <DIR> ..
2022/03/29 16:39 511 App.vue
2022/03/29 16:39 <DIR> assets
2022/03/29 16:39 <DIR> components
2022/03/30 09:31 150 main.js2 个文件 661 字节4 个目录 56,723,632,128 可用字节C:\Users\Administrator\Desktop\project\zhyp\src>
实验证明，App.vue这个文件是存在。
$mount(’#app’)
$mount(’#app’) ：手动挂载到id为app的dom中的意思
该方法是直接挂载到入口文件index.html 的 id=app 的dom 元素上的
整个过程就是新建一个Vue实例对象，顺便把根组件给渲染了，最后就是将Vue实例对象挂载到id为app的DOM节点上。
APP.vue
上面说了，我们要把这个根组件引入到main.js这个入口文件，现在我们到这个文件里看看：
在上面这张截图我们可以看到，这个组件还引入了一个组件HelloWorld.vue组件，同时它把它自己和子组件暴露出来。
图解项目文件之间的调用关系
根据上面，我们可以对项目文件之间的调用关系有个大概的了解，于是就有了这张图：
总结
根据上图我们来概述一下Vue新建一个页面的过程，第一步，子组件HelloWorld.vue对外暴露了自己，像葫芦娃那样喊着：“爷爷，快来找我啊！”；第二步，根组件App.vue找到了子组件HelloWorld.vue，葫芦娃爷爷把葫芦娃揣到口袋里，接着同时把自己和子组件HelloWorld.vue暴露出来；第三步，vue.js和App.vue依次引入到main.js入口文件main.js中；第四步，将vue实例对象挂载到index.html文件中id为app的容器上，最后应该是浏览器渲染index.html这个文件了。
【ZHYP002】子涵优品开发日志相关推荐
- 【ZHYP004】子涵优品开发日志
footer部分 footer这里出现了一点问题,也给自己一个提醒,在遇到一些复杂的布局时,先别着急着写结构,先分析一下它的布局是什么样的,还需要画一下它的结构图,通过结构图来写HTML结构,同一层级 ...
- 【ZHYP005】子涵优品开发日志
标题栏的标题和icon修改 熟练使用Photoshop软件PS一张logo图片和icon图片: 主体部分的实现 主体部分总布局的拆分 通过观察,我们可以看到,这一部分是单独存在的: 排行榜部分布局拆分 ...
- 哔哩哔哩-尚优品项目开发记录
尚优品开发项目记录,本次记录仅当作个人总结 使用的编辑器为Vscode 版本为vue2 目前使用到的技术栈有 vue-router.vuex.axios element-ui 首先创建一个Vue2项目 ...
- 京东案例开发之居家优品
京东切分三框布局: 效果: 代码: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF ...
- 瀚升优品app翰林优商系统开发功能介绍
最近新开发了一套(瀚升优品app)翰林优商系统,其主要功能有商城系统,会员系统,任务系统,支付系统,积分管理系统,在线咨询系统等等. 瀚升优品app特点: 1.精选美服在线特约手机购物软件,实时更新各 ...
- 优品汇系统开发机制介绍
优品汇系统通过通过消费增值模式,促进商品流通,打造中g最大的供应链.作为对政策的回应,绿点刺激实体经济.前期通过科学合理的业务体系,将大部分利润分配给客户和朋友,从而快速创造人气和粉丝数据.中期将逐步 ...
- ue4 无限地图_RPG游戏开发日志13：无限地图的实现
写在前面 本项目同步上传于coding上,国内读者可以通过在coding下载项目. 也欢迎你加入我的UE4学习交流QQ群:872537977.如果你喜欢我写的文章,也希望你点赞.收藏.转发.谢谢! 如 ...
- 【干货下载】聚美优品、中商惠民、倍全，如何让数据驱动“新零售”落地？...
本文提炼自神策数据创始人 & CEO 桑文锋在第五届中国全渠道峰会上发表的主题为<大数据驱动线上线下场景融合>的演讲.PPT 干货获取请点击文末"阅读原文". ...
- PyFlink 在聚美优品的应用实践
精选30+云产品,助力企业轻松上云!>>> 大家好,我是来自聚美优品刷宝大数据部门的吴攀刚,本文将跟大家分享 PyFlink 在刷宝的应用,包括:背景介绍.架构演进.技术选型以及一个 ...
最新文章
- Linux加法简单程序,Android应用程序的开发目录——简单的加法计算示例
- 模拟服务器和客户端交互的python脚本
- python中的记录指针_使用Python向C语言的链接库传递数组、结构体、指针类型的数据...
- 地理空间数据Geometry在MySQL中使用（二）
- swift 引用其他类_浅谈swift中闭包修饰符 weak？unowned？ 或什么都不用
- 远程调试Hadoop
- python实训报告5000字_20193420 实验一 《Python程序设计》实验一报告
- mysql导入报错1071_导入sql文件报错：1071 Specified key was too long; max key length is 767 bytes...
- 再送 5000 份红包封面！
- Python 语言创建 Abaqus inp 文件
- InletexEMC 多人屏幕共享工具
- 汽车电子功能安全标准ISO26262解析（六）——硬件集成测试
- 【步步到位】mysql安装教程 8.0.26
- 博弈逻辑与布尔判断题
- 常用传感器讲解二--火焰探测器-KY-026(FLAME)
- 精通Web Analytics 2.0 （7） 第五章：荣耀之钥：度量成功
- 自动排课系统V2.0基本完善了
- 【黄啊码】vue配合PHP实现导出excel进度条显示
- 中兴笔试题目总结（四）软件工程部分
- MeshLab 2022.02 源码编译教程