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 是大写的。如果输出为下面的图片中的内容,则代表你安装正确。
vue学习第一天 ------ 临时笔记的更多相关文章
- vue学习第二天 ------ 临时笔记
学习链接: vue.js官方文档: https://cn.vuejs.org/v2/guide/index.html vue.js API: https://cn.vuejs.org/v2/api/# ...
- vue学习第一篇 hello world
计划近期开始学习vue.js.先敲一个hello wolrd作为开始. <!DOCTYPE html> <html lang="en"> <head& ...
- Vue学习第一天:Vue.js指令系统
1. 如何使用Vue.js? 1.1 直接引入 - <script src="./statics/vue.min.js"></script> - 引入之后在 ...
- 前端-Vue学习思维导图笔记
看不清的朋友右键保存或者新窗口打开哦!喜欢我可以关注我,还有更多前端思维导图笔记有vue结构分析,JS基础,JQ,JS高级,Angular,git等等
- VUE学习第一天,安装
vue生命周期好文章: http://www.zhimengzhe.com/Javascriptjiaocheng/236707.html
- vue学习第一天:v-bind的使用(让属性绑定变量)
v-bind的使用 v-bind: 是vue中,提供用于绑定属性的指令 例: <input type="button" value="按钮" title ...
- Vue学习笔记-1
前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...
- vue 学习笔记(二)
最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...
- Vue学习笔记十三:Vue+Bootstrap+vue-resource从接口获取数据库数据
目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...
随机推荐
- 从理论认识J2EE
前言 在学习J2EE这块,看了成套的视频,感觉,感觉,感觉收获不是特别大,没用马老师讲得好,但是多少还是和J2EE打了个招呼,比如J2EE著名的十三个规范,他们有的人说不算什么规范,顶多可以理解为十三 ...
- 牛客寒假算法基础集训营4 I Applese 的回文串
链接:https://ac.nowcoder.com/acm/contest/330/I来源:牛客网 自从 Applese 学会了字符串之后,精通各种字符串算法,比如……判断一个字符串是不是回文串. ...
- centos操作---搭建环境 安装python
1.安装python3.6.2 安装依赖 yum -y groupinstall "Development tools" yum -y install zlib-devel bzi ...
- git push fatal: HttpRequestException encountered
原因: github禁用了TLS1.0/1.1协议 截至2018年2月22日,GitHub禁用了对弱加密的支持,这意味着许多用户会突然发现自己无法使用Git for Windows进行身份验证(影响版 ...
- P2264 情书
传送门 正常会想到字典树 然鹅数据怎么小直接map也能过 然后就写map暴力匹配了 毫无思维难度,毫无代码难度 注意逗号算单词分隔符,如果有句号就算另一句 同一句的单词重复出现只计算一次贡献 再开个m ...
- BestCoder Round #64 1001
Numbers Accepts: 480 Submissions: 1518 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 6553 ...
- 6-----BBS论坛
BBS论坛(六) 6.1.优化json数据的返回 (1)新建utils/restful.py # utils/restful.py from flask import jsonify class Ht ...
- Linux 文件锁flock 实现两个进程相互监听存活状态
表头文件 #include<sys/file.h> 定义函数 int flock(int fd,int operation); 函数说明 flock()会依参数operation所指 ...
- 安装、使用eclipse+CDT编译C++程序
我想安装.使用eclipse+CDT的初衷在看live555的源码,需要方便管理源码的工具: 使用eclipse编译和管理live555源码 http://blog.csdn.net/nkmnkm/a ...
- 在IE8下background-image不显示的解决方法
刚写一个页面,在chrome,FF里调试完后,忽然想起ie来,放到Ie里其它还好了,但是有个背景图片显示不出来. 调试N遍后,只好上stackoverflow去找一下,果然找到了. 最初是这样写的: ...