Vue简单项目文件夹和文件联系

Vue简单项目文件夹和文件联系

这是我创建好了的Vue基础项目截图

我们一般在src文件夹中玩Vue

首先说一哈我对Vue的简单理解，Vue是前端的一种技术框架，浏览器上显示的东西其实还是html文件，为什么这么说，且看我慢慢道来：

先看public文件夹下的index.html文件中的

和main.js中的$mount(’#app’)

所对应的是src文件夹下的main.js中的$mount('#app') （图中目录文件夹的api，util是我后边创建的，忽略不看，App1.vue是我改了的，原本是App.vue,改了后看起来更容易对比看） 上图中的App0其实就是给App1.vue取了个别名，render：h=> h(App0)起到的效果是将App1.vue挂载，通过main.js文件将我们的路由，最外层的vue组件（就是App0.vue）状态机等封装到Vue对象，然后将Vue对象内容与index.html中的id=”app”相联系，我们浏览器加载index.html文件，index.thml文件根据这个id选择器id=”app”找到这个Vue。

接下来看App1.vue的内容

Home的标签就是要连接的路由，to属性是路由中配置的相对路径，这里的Home是在浏览器上显示的样子，说起来抽象，直接上运行图

可以看到浏览器上展示的页面最外层就是App1.vue的内容，那个Home和About就是App1.vue中的Home这些标签中的Home，About。

看到上图是点击在About上的，浏览器直接把About中的内容给显示出来了，这可以理解为vue的第二层，最外层是挂载的App1.vue ,在App1.vue 中通过路由标签挂载第二层Home.vue和About.vue
我们看About.vue的内容：

内容非常简单，浏览器也输出了对应的简单的内容

然后我们来看看路由的内容：

我们在一个vue1文件中使用路由标签引入另一个vue2文件之前必须要在路由中注册该vue2的连接路由信息，这样路由才可以通过to属性去找到这个vue2。

还有一个components文件夹也用的非常多，这个文件夹中存放的也是Vue文件，只是存放在这的vue一般是用作组件存在，比如父子，兄弟组件，这里不谈论。

最后说一说Vue文件内容结构一般是啥

创建一个空白的vue文件，可以发现他一般是由三部分组成：
template：就是这个vue的标签内容，我把它理解为组件骨架部分。
script：就是写脚本的地方，组件脚本。
style：就是组件样式的地方，组件样式。
对于vue组件可以在https://element.eleme.cn/官网复制，这里有很多现成的组件；
以上是我对vue非常简单的项目结构中的文件夹和文件之间的简单联系的看法，也希望可以让初次接触vue的你找点感觉，不至于看到很多文件找不到下手点，谢谢