【ZHYP002】子涵优品开发日志

最新推荐文章于 2024-09-14 15:19:40 发布

黃子涵

最新推荐文章于 2024-09-14 15:19:40 发布

阅读量251

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/qq_15299517/article/details/123859560

版权

项目目录分析

输出项目文件根目录

先进入项目目录文件夹，在控制命令行窗口输出项目目录：

Microsoft Windows [版本 6.1.7601]
版权所有 (c) 2009 Microsoft Corporation。保留所有权利。

C:\Users\Administrator\Desktop\project>echo %date% %time%
2022/03/30 周三  6:46:15.37

C:\Users\Administrator\Desktop\project>dir
 驱动器 C 中的卷没有标签。
 卷的序列号是 285C-6DBE

 C:\Users\Administrator\Desktop\project 的目录

2022/03/29  22:27    <DIR>          .
2022/03/29  22:27    <DIR>          ..
2022/03/29  17:12    <DIR>          zhyp
               0 个文件              0 字节
               3 个目录 57,575,448,576 可用字节

C:\Users\Administrator\Desktop\project>cd zhyp

C:\Users\Administrator\Desktop\project\zhyp>dir
 驱动器 C 中的卷没有标签。
 卷的序列号是 285C-6DBE

 C:\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.js
               6 个文件        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.10

C:\Users\Administrator\Desktop\project\zhyp\public>dir
 驱动器 C 中的卷没有标签。
 卷的序列号是 285C-6DBE

 C:\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.html
               2 个文件          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.89

C:\Users\Administrator\Desktop\project\zhyp\src>dir
 驱动器 C 中的卷没有标签。
 卷的序列号是 285C-6DBE

 C:\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.js
               2 个文件            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 = false

new 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.40

C:\Users\Administrator\Desktop\project\zhyp\node_modules\vue\dist>dir
 驱动器 C 中的卷没有标签。
 卷的序列号是 285C-6DBE

 C:\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.js
              15 个文件      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.49

C:\Users\Administrator\Desktop\project\zhyp\src>dir
 驱动器 C 中的卷没有标签。
 卷的序列号是 285C-6DBE

 C:\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.js
               2 个文件            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这个文件了。