一起学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就可以继续进行了,不过要深入了解的话,还是需要再看更详细的资料以及查阅官方文档,去理解这些代码的意思。
——————————^~^我是萌萌哒分割线^~^————————————————
下一篇: