QA自己动手写前端初识VUE

pycharm安装vue插件之后开始了新技能之旅，因为现在前后端都需要自己写了。
前后端交互的事情后面会更新，但这里不会涉及。

看了很多资料。最开始的三个目录App.vue、main.js、index.html，右边是我自己新建的项目，左边是一个已经比较成熟的项目。

这三个文件最熟悉的就是那个后缀为html的文件，毕竟之前写过最简单的静态页面来存放一些服务器的地址和一些内部网站的链接。
使用cnpm run dev启动vue，可以看到已经项目已经正常启动的提示。点击弹出的链接就可以打开大家都熟悉的那个vue页面。

点开看看，看到了这个叫title的标签。这个是打开网页的标签名称啊。下面有个body，但这个body里面什么都没有，除了一个div，但是我们在这个div里面什么都没有写啊，为什么这里会出现那么多超链接？什么都没有不应该是空白一张页面吗？
tips:index页面在以后的工作中确实用的很少，我对比了我们组内项目的目录文件，可以说基本用不到，不太需要在这里编辑。

于是我开始疯狂寻找网页中所显示的内容，一个是大大的logo,一个是…哎！直接F12

差不多可以看到，页面一共分为两个div和一个script，名字分别是app、hello。脚本文件是app.js。先找到内容。
首先找到了logo的资源，是放在文件App.vue中，

然后找到了下面各种连接的资源，放在了HelloWorld.vue里面，截图太长了。放一部分
template里面放的就是各种定义的div classname =“hello” head1\head2、连接信息等等。中间部分放的是script，包括script的名称和里面的数据处理方法，最下面的style就是设置样式的地方。
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200611183133365.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xlbW9faWNl,size_16,color_FFFFFF,t_70
这里有个神奇的地方就是，也是需要注意的地方vue文件中写的div这些id的值就是html中对应标签值其实有点说废话了，template本身替换的就是html里面指定地方的所有属性。要不然还要VUE干嘛！


到这里大概明白了，html和vue看上去没什么联系。通过js加载vue标签替换html文件中的标签之后，显示的就是VUE标签里面的东西，那么是什么来把html和vue关联起来的呐？答案是js

其实就是新的vue对象中定义的属性。js中定义的对象属性
和htmldiv的id要一致
通过这句话挂钩。也就是说:template: ‘’ 表示用替换index.html里面的

，然后index.html文件被初步解析为这种形式

到这里基本就差不多了，但是还有个地方就是我们的HelloWord.vue还没有登场，我开始的时候也在想为什么不统一放在一个vue里面，后来看了目录结构，我觉得是开发者别有用心的引入了router这个概念。HelloWord.vue这个文件是被定义在router文件下的index.js中。所以在App.vue中有一行

就是为了把他引入进来。或许你会说不写这个index.js行不行？那么就不能通过router这种方式把HelloWord.vue加载进来。最初的页面也就只会显示一个logo而已。
所以，VUE如何运行，主要就是分几个步骤。
1、index.html文件
2、main.js文件（调用vue）
3、要被加载的vue文件
4、router文件夹下的index.js文件
5、目标vue文件