博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue入坑——vue-cli(脚手架)代码详解
阅读量:6533 次
发布时间:2019-06-24

本文共 1116 字,大约阅读时间需要 3 分钟。

hot3.png

一起学vue——

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

前言

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

src文件夹

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

100432_x8WX_3802541.png

一个个来看

(1)assets

是什么:存放静态文件的,里面会放一些比如js,css,图片之类的。

(2)components

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

是什么:存放组件的

这里面的HelloWorld.vue

101453_i5Uw_3802541.png

(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的路由是我下一步要学的,在这里就简单看一下他里面有些啥。

102642_BWOU_3802541.png

是什么:这里展示的是router文件夹下的index.js,很明显,是路由的配置文件。

(a)引入部分

104946_lLpn_3802541.png

(b)使用路由依赖

110651_iJjw_3802541.png

(c)配置路由

111003_wRDw_3802541.png

(4)App.vue

 

111249_izXv_3802541.png

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

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

(5)、main.js

112509_oy8s_3802541.png

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

结语

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

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

                                                                                        下一篇:

转载于:https://my.oschina.net/u/3802541/blog/1809405

你可能感兴趣的文章
CentOS 6.8无法启动图形界面
查看>>
linux 查找僵死进程,并杀死进程
查看>>
不使用注解配置SpringMVC环境
查看>>
更换DS4700控制器的悲与喜
查看>>
python 读取excel数据到mysql
查看>>
滴滴发布智慧交通战略产品“交通大脑”
查看>>
nginx 1.8.1安装使用
查看>>
如何选购无线路由器
查看>>
AGG第二十八课 rasterizer的填充规则
查看>>
nginx高可用,构建LNAMMP架构
查看>>
PIX配置手册一(简单配置命令)
查看>>
mysql5.6.36主从复制报错1872
查看>>
Centos7.4 安装 Inception
查看>>
LG电子Cinema 3D,在乐天世界5万观看者的赞叹
查看>>
阿里云高性能AI服务 -- 基于Docker和EGS一键创建高性能Tensorflow分布式训练
查看>>
jquery动态生成bootstrap表格
查看>>
使用Scom监控Linux主机
查看>>
jquery动态创建表格
查看>>
Mysql区分某个字段大小写解决方案
查看>>
grep过滤用法介绍(三)
查看>>