Vue.js进阶【4-1】分析vue-cli创建的Welcome to Your Vue.js App工程结构!!! 2018-10-26

使用vue-cli创建vue工程:https://blog.csdn.net/calmreason/article/details/82720355

结论:本篇文章告诉你由vue-cli构建的单页面应用的工程结构和页面结构以及交互原理。

本篇文章中不包括多组件传递数据需要的Vuex  2018-10-12更

下面就来对这个典型的自动生成的工程进行介绍。

这个工程可以说麻雀虽小五脏俱全,留给你足够丰富的扩展可能,同时对Vue全家桶的用法又足够的标准,可以说是难得的一个Demo,必须好好分析。百度网盘下载

分析这个工程需要不少Vue全家桶成员的了解,相关的基础作者以及做了初步了解,现在有能力来解剖这个工程了。文中会把需要的知识点的连接接过来,让你省心。

先来看看工程文件的结构:

下面从一次用户访问主页来介绍中间都发生了什么

首先,用户访问:http://localhost:8080

这个地址会自动变成:http://localhost:8080/#/

也就是下面的样子:

首页分析:

1 首页为何与官网DEMO不同:这个文件显示的和官方的显示略有不同,我特意为了显示开发文件关系将所有显示文本的地方改成了代码所在工程中的位置。

2 首页的标题:从上图可以看出,这个页面的标题是index.html,也就是说这个页面呈现的HTML文件实际上是index.html这个文件本身。我在index.html里面把标题部分改成了:index.html

3 从首页正文一开始的“index.html body”是我加入到index.html文件中的:   

index.html body
。。。。。

4 首页中的Welcome to HelloWorld.vue来自于一个叫HelloWorld.vue的单文件组件SFCs 。

5 单文件组件的内容是:template(构成HTML骨架) 、script(数据交互事件响应)、style scoped(受限作用域的CSS样式)

6 组件内嵌:单文件组件中的内容可以作为一个页面中的一部分,而不需要是一个完整的页面。通常单文档应用都是这么处理的,页面的变化是由不同的组件渲染出来的,而不需要实际意义上的页面跳转。

我们来看一下HelloWorld.vue里面有哪些内容:




                    
                    

你可能感兴趣的:(Vue.js进阶教程)