Vue入坑——vue-cli（脚手架）代码详解

上一篇：vue-cli目录结构认识

一块儿学vue——vue学习总路线

——————————^~^我是萌萌哒分割线^~^————————————————

前言

上一篇简单认识了脚手架的目录结构，这篇咱们来继续看看vue-cli里面的咱们须要编写的文件都是些什么。

src文件夹

先来看一下src文件夹里有些啥

一个个来看

（1）assets

是什么：存放静态文件的，里面会放一些好比js，css，图片之类的。

（2）components

前面学过语法应该知道这是什么吧，若是不知道的话，仍是建议先去看看语法哦，磨刀不误砍柴工嘛。

是什么：存放组件的

这里面的HelloWorld.vue

（a）、一个.vue文件由什么组成：template（模板）、js（script）、style（样式）

（b）、template：一个模板里面只能有一个父节点，好比咱们这里的class为hello的父节点div，他没有其余的兄弟节点。

（c）、script：vue一般使用es6来写这部分，而后使用export default导出，他里面能够写好比data，mounted，methods等等。其中，data必定要用return来返回。

（d）、style：跟咱们写样式表同样，都是使用<style></style>来包裹，不过，他这里是默认影响全局的，也就是说回影响到包含他的全部页面。这里的使用的是局部的，语法是<style scoped></style>，scoped的意思就是只做用于当前页面，不影响其余页面。

（3）router

vue的路由是我下一步要学的，在这里就简单看一下他里面有些啥。

是什么：这里展现的是router文件夹下的index.js，很明显，是路由的配置文件。

（a）引入部分

（b）使用路由依赖

（c）配置路由

（4）App.vue

 

这个页面结构和上面的helloworld.vue的页面结构同样，就不说了，只说一下里面的<router-view/>

这是用来展现路由页面内容的。若是想跳转的话就使用<router-link to='xxx'></router-link>

（5）、main.js

是什么：是这个工程的入口文件，使用了es6的模块化引入模块，他的做用就是引入vue框架，根组件及路由，以及定义vue实例。

结语

学到这里，就够初学者用的了，要继续学习vue就能够继续进行了，不过要深刻了解的话，仍是须要再看更详细的资料以及查阅官方文档，去理解这些代码的意思。

——————————^~^我是萌萌哒分割线^~^————————————————

                                                                                        下一篇：