vue学习第一天 ------ 临时笔记

学习链接

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（一）基础知识概述
http://blog.csdn.net/fungleo/article/details/77575077

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（二）安装 nodejs 环境以及 vue-cli 构建初始项目
http://blog.csdn.net/fungleo/article/details/77584701

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版（三）认识项目所有文件
http://blog.csdn.net/FungLeo/article/details/77585205

1.前后端分离开发模式

　

设计师设计页面设计稿
前端工程师和后端工程师以及其他技术人员约定项目开发接口规范
后端工程师按照约定接口规范开发相应接口
前端工程师开发页面，并对接后端接口（可能先期采用假接口）开发页面

2.SPA：single page web application（ 单页应用程序 或 单页Web应用）

 url 由以下部分组成：

http:// 规定了页面采用的协议。
www.fengcms.com 为页面所属的域名。
index.html 为读取的文件名称。
?name=fungleo&old= 给页面通过 GET 方式传送的参数
#mylove/is/world/peace 为页面的锚点区域

前面四个发生改变的时候，会触发浏览器的跳转亦或是刷新行为，而更改 url 中的锚点，并不会出现这种行为，
因此，几乎所有的 spa 应用都是利用锚点的这个特性来实现路由的转换。

所谓的路由地址是在 # 号后面的，也就是利用了锚点的特性。

3.RESTful 风格接口

前后端在约定接口

目前 github 也在主推 GraphQL 这种新的接口风格，但目前国内来说还是 RESTful 接口风格比较普遍。虽然它有一些缺陷

大多数操作都是对数据库的四格操作 “增删改查” 对应到我们的接口操作分别是：

post 插入新数据
delete 删除数据
put 修改数据
get 查询数据

假设，我们的接口是 /api/v1/love 这样的接口，采用 RESTful 接口风格对应操作是如下的：

get 操作 /api/v1/love

获取 /api/v1/love 的分页列表数据，得到的主体，将是一个数组，我们可以用数据来遍历循环列表

post 操作 /api/v1/love

我们会往 /api/v1/love 插入一条新的数据，我们插入的数据，将是JOSN利用对象传输的。

get 操作 /api/v1/love/

我们获取到一个 ID 为  的的数据，数据一般为一个对象，里面包含了  的各项字段信息。

put 操作 /api/v1/love/

我们向接口提交了一个新的信息，来修改 ID 为  的这条信息

delete 操作 /api/v1/love/

我们向接口请求，删除 ID 为  的这一条数据

由上述例子可知，我们实现了5种操作，但只用了两个接口地址， /api/v1/love 和 /api/v1/love/ 。所以，采用这种接口风格，可以大幅的简化我们的接口设计。

4.vue 是什么

官方解释：
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

大牛解释：
为了实现前后端分离的开发理念，开发前端 SPA 项目，实现数据绑定，路由配置，项目编译打包等一系列工作的技术框架

vue 不仅仅是 vue.js 这一个文件，而是围绕 vue.js 配套的一系列的工具。

vue.js 核心，不解释。
VueRouter2 实现路由组织工具。
webpack 项目打包以及编译工具。
nodejs 前端开发环境。
npm 前端包管理器。
axios ajax 接口请求工具。
sass-loader 和 node-sass css 预处理。
element 基于 vue 的后台组件库。
iview 基于 vue 的另一套后台组件库。
vue-cli vue 项目脚手架。一键安装 vue 全家桶的工具。
等等

5.命令行的重要性

CLI（command-line interface，命令行界面）

黑苹果的介绍：
https://baike.baidu.com/item/%E9%BB%91%E8%8B%B9%E6%9E%9C/5220943?fr=aladdin

大牛的建议：
1.抛弃 windows 操作系统，不管它是什么版本的 windows。
2.购买一台 macbook pro 没钱购买可以选择 黑苹果 ，可以参考我的系列博文 打造前端MAC工作站以及相关文章索引
3.如果不是 photoshop 的重度用户，并且想要更深层次的掌握更多内容，请使用 linux 系统。
ubuntu 操作系统还是比较简单上手的。有一定 linux 使用经验的同学，建议使用 arch linux 操作系统，新手不要尝试，因为你一定安装不上。
4.除了使用 atom 或 vscode 这样的现代编辑器，更推荐掌握 vim 这样基于cli的编辑器的基本使用。
能用到什么样的层次，取决于你自己的需求，相关内容可以参考：世界上最牛的编辑器： Vim系列博文。

6.安装nodejs环境

.在 https://nodejs.org/ nodejs 官方网站下载安装包，然后进行安装

.官方网站的文档操作 命令行安装 nodejs

测试安装是否成功
node -v
npm -v

npm config set prefix “d:\nodejs\node_global”

npm config set cache “d:\nodejs\node_cache”

进入环境变量对话框，在系统变量下新建”NODE_PATH”，输入”D:\nodejs\node_global\node_modules”。（ps：这一步相当关键。）

上面的用户变量都要跟着改变一下（用户变量”PATH”修改为“d:\nodejs\node_global\”），

要不使用module的时候会导致输入命令出现“xxx不是内部或外部命令，也不是可运行的程序或批处理文件”这个错误。

7.安装 vue-cli VUE的脚手架工具

npm install -g vue-cli

npm 是 nodejs 的官方包管理器。可以简单的理解为，用这个来管理所有的依赖包，虽然不仅仅是如此。
install 命令表示执行安装操作。
-g 是命令参数，代表，这个包将安装为系统全局的包。也就是说，在任何地方都可以用这个包。
vue-cli 是我们安装的包的命令。
安装完成后，我们在终端中输入：

vue -V

注意，这里的 V 是大写的。如果输出为下面的图片中的内容，则代表你安装正确。