【零基础入门Vue0004】_Vue官网使用指南

196 阅读4分钟

一、概要

网址后缀为org的一般是开源的

英文官网:vuejs.org/

中文官网3.0:cn.vuejs.org/

中文官网2.0【本教程使用】:v2.cn.vuejs.org/

Vue团队为了让Vue更加好用,写了一些文档,也维护了一些与Vue相关的周边网站。

随后,Vue团队把文档和网站进行了分类,形成了一个导航区,如下图所示:

image.png

如果对导航区比较了解,我们在找东西时,就不会盲目了,就大概知道,哪些东西大概出现在哪些分类里面。

二、学习

教程和API是这里所有的导航中最重要的东西。

2.1 教程

有第一个Vue的小案例。

教程里面所有的案例、方法的调用,都在遵循API的规范

2.2 API

是一本Vue的字典,就像我们书架上使用的字典一样,不会的字找字典。

在编写Vue的时候,遇到一些不会的方法,找API就行。

image.png

2.3 风格指南

Vue会教我们写出更加优雅的代码。

这里是官方的 Vue 特有代码的风格指南。注意,不是JavaC语言的风格指南,只是针对于Vue而言。

不过我们也不确信风格指南的所有内容对于所有的团队或工程都是理想的。我觉得这样做挺好,我把我的这个推荐告诉你,但是,如果你的团队里面不是这种风格,也可以不采用。所以根据过去的经验、周围的技术栈、个人价值观做出有意义的偏差是可取的。

例如:Vue官方推荐你写???,然而,你根据团队里面的编码特点,以及你使用周围技术栈的特点,有可能你写成这种方式#???,这就是有意义的偏差,你可以和别人说明白为什么需要加#,就是有意义的偏差。

Vue团队把规则划分了几个类:

image.png

自己下去不用先看风格指南,因为想要通读风格指南,必须保证把Vue的所有写法都学会了。

2.4 示例

Vue团队写的一些小案例。

image.png 当点击dev时,下面的列表就会发生改变。怎么变的?

image.png

发送网络数据请求,找到Github的服务器,把上面这个图中的内容要回来的。

image.png

2.5 Cookbook

直译:菜单、食谱

Vue在教我们一些编码的技巧,这个技巧主要是两方面的。

第一方面:JavaScript的基本功。

第二方面:针对Vue设计出来的一些小技巧。

image.png

2.6 视频教程

Vue官方有合作的视频教程。

image.png

三、生态系统

3.1 帮助信息

自己了解就行。

Vue发展至今,拥有自己的论坛【相当于百度贴吧】、聊天室、聚会。

信息是每隔一段时间,Vue给我们推送点小周刊、Vue的未来发展路线RoadMapVue最近的活动、Twitter的主页等。

image.png

3.2 工具

3.2.1 Vue CLI

开始学习Vue的时候,在html中引入vue.js,然后编写vue代码。

公司中干活,使用Vue脚手架、Vue Router。

3.3 核心插件

四、团队

第一个肯定是Vue的作者尤雨溪。

后面是团队的其他成员。

能够出现在这里的人物,都是很重要的人。

image.png

五、资源列表

5.1 合作伙伴

谁跟Vue有合作

5.2 主题

Vue帮助我们写好一些样式和结构。

结构和样式都有了,往里面加入自己的组件即可。

里面有一些是收费。在国内,有更加优秀的方案去替代它,所以不怎么使用它,使用频率不多。

image.png

5.3 Awesome Vue

Awesome直译是令人惊奇的,了不起的。即 了不起的Vue

点击会跳到一个Github地址

image.png

Vue发展至今,有很强大的生态。例如:写着写着Vue,需要做报表,即给人家形成一个图形图表,让别人一看就知道每一个衣服、每一鞋子,库存是多少,月销量是多少。涉及到柱形图等。一般我们就使用成型的第三方库去做,来生成报表。

如果自己能力足够强,使用JavaScriptCanvas画,封装出很多有用的方法。

点击Charts,会得到一个Vue官方觉得不错的Vue周边库。官方整理比较好用的包。

image.png

5.4 浏览和Vue相关的包

Awesome Vue差不多,只不过效果比Awesome Vue更好一点。

点进去,跳到一个特别好的网站。

这里看到的都是与Vue相关的:awesomejs.dev/for/vue/

image.png

如果把vue改为react,例如:awesomejs.dev/for/react/ ,这里看到所有的东西,都是和React相关的。

image.png