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=32 给页面经过 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/1

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

put 操做 /api/v1/love/1

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

delete 操做 /api/v1/love/1

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

由上述例子可知，咱们实现了5种操做，但只用了两个接口地址， /api/v1/love 和 /api/v1/love/1 。因此，采用这种接口风格，能够大幅的简化咱们的接口设计。

 

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环境

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

2.官方网站的文档操做 命令行安装 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 是大写的。若是输出为下面的图片中的内容，则表明你安装正确。