Vue(15) —— vue-cli项目文件解析

最新推荐文章于 2024-07-10 22:45:00 发布

原来是小别扇

最新推荐文章于 2024-07-10 22:45:00 发布

阅读量644

点赞数 2

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/Jzandth/article/details/108802199

版权

21 篇文章 1 订阅

订阅专栏

index.html：我们访问http://localhost:8080/ 返回的请求资源文件，这不就和javaweb项目的web文件夹下的index.jsp一个道理？整个项目只有这一个 html 文件，所以这是一个 单页面应用；当我们打开这个应用，表面上可以有很多页面，实际上它们都只不过在一个html文件中的一个 div ，这个div显示的内容被vue对象接管，或者说vue对象的数据挂载到这个div上
main.js：main.js是我们的入口文件，即程序/项目跑起来的时候从main.js这个文件开始执行
App.vue：根组件；说它是根组件的原因就是这个组件就是index.html页面上唯一的那个div挂载的组件

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

从上面的组件套用效果来看，它的实质就是将子组件套用在根组件/父组件中，最后父组件统一汇集在根组件的数据模板中使用，这样index.html挂载的根组件就能将所有想要显示的视图效果在index.html上展示出来
上面这样的开发模式就是vue官方文档上推荐的模块化开发，在第7篇将组件的博客中就说到了
并且这样的开发方式将所有的组件都按照一个组件一个文件的方式进行组织和实现，如果有嵌套使用，我们只需要关注父与子组件之间的嵌套使用，或者说我们需要编写的两个组件之间的嵌套不会超过两代，当出现新的嵌套的时候只会是两个组件之间的事情；这样逻辑就会很清晰
所以我们开发的顺序就有两种，自顶向下和自底向上，在Java的MVC模式经验来看，自底向上更加符合我们编写的习惯，因为在写当前层的时候，需要调用的子组件都已经写好了，直接嵌套进来，就可以测试当前的效果了

在这里插入图片描述

export default是ES6中的新特性，它用于将一个js文件中的一个属性/对象/方法进行默认的导出，这么做其实就是为了简便导出步骤，再import的时候还可以任意的为这个导入的属性/对象/方法重命名，虽然正常导出和导入也可以随意重命名，但是使用export default导出不需要使用{ }来指明import的属性/对象/方法的接口名称(接口名称就是它向外export的名称)
export default 命令 .
vue对象template属性的作用

在这里插入图片描述

至于index.html和main.js是怎么关联起来的，我没有搜到一篇博客把它讲清楚了，我自己也不是很清楚，但是在查看vue-cli项目配置文件的时候我发现了一个可能的情况，如下图；注意：这只是我的猜测，是不是正确的还有待商榷，主要是我自己也一直想知道怎么联系上的，所以找了一个勉强可以说服自己的理由；记的时候暂时记成index.html和main.js是通过配置文件关联上的( 参考链接.)

在这里插入图片描述