学习链接

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学习第一天 ------ 临时笔记的更多相关文章

  1. vue学习第二天 ------ 临时笔记

    学习链接: vue.js官方文档: https://cn.vuejs.org/v2/guide/index.html vue.js API: https://cn.vuejs.org/v2/api/# ...

  2. vue学习第一篇 hello world

    计划近期开始学习vue.js.先敲一个hello wolrd作为开始. <!DOCTYPE html> <html lang="en"> <head& ...

  3. Vue学习第一天:Vue.js指令系统

    1. 如何使用Vue.js? 1.1 直接引入 - <script src="./statics/vue.min.js"></script> - 引入之后在 ...

  4. 前端-Vue学习思维导图笔记

    看不清的朋友右键保存或者新窗口打开哦!喜欢我可以关注我,还有更多前端思维导图笔记有vue结构分析,JS基础,JQ,JS高级,Angular,git等等

  5. VUE学习第一天,安装

    vue生命周期好文章: http://www.zhimengzhe.com/Javascriptjiaocheng/236707.html

  6. vue学习第一天:v-bind的使用(让属性绑定变量)

    v-bind的使用 v-bind: 是vue中,提供用于绑定属性的指令  例: <input type="button" value="按钮" title ...

  7. Vue学习笔记-1

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里 ...

  8. vue 学习笔记(二)

    最近公司赶项目,一直也没时间看 vue,之前看下的都快忘得差不多了.哈哈哈,来一起回顾一下vue 学习笔记(一)后,继续向下看嘛. #表单输入绑定 基础用法 v-model 会忽略所有表单元素的 va ...

  9. Vue学习笔记十三:Vue+Bootstrap+vue-resource从接口获取数据库数据

    目录 前言 SpringBoot提供后端接口 Entity类 JPA操作接口 配置文件 数据库表自动映射,添加数据 写提供数据的接口 跨域问题 前端修改 效果图 待续 前言 Vue学习笔记九的列表案例 ...

随机推荐

  1. git pull 命令

    作用:取回远程主机某个分支的更新,再与本地的指定分支合并 格式:git pull  <远程主机名> <远程分支名>:<本地分支名> 1. 如果与当前分支合并,则可省 ...

  2. Atcoder CF 2017 TR I

    Atcoder CF 2017 TR I 给定一个有n个点,m条边的图,求为每条边定向,使得从1出发和2出发的两个人可以见面的方案数. 先把问题转换成求all-不能见面的方案数.那么可以把图划分成这样 ...

  3. CF1096G Lucky Tickets 快速幂套FFT

    \(\color{#0066ff}{ 题目描述 }\) 一个\(n\)位数,每位可以是给出的\(k\)个数码中的一个数,可以有前导\(0\),输出前\(n/2\)位之和与后\(n/2\)位之和相等的方 ...

  4. 使用windows服务修改CPU型号(重启依然有效)

    此项目基于.net framework 4.0 效果如下: 服务运行前: 服务运行后: 思路大概是这样: 通过修改注册表可以修改CPU型号,把服务设置成本地服务,并且开机自动启动,来实现开机自动修改处 ...

  5. git commit 操作

    查看提交历史 然后在此项目中运行 git log,应该会看到下面的输出:   合并commit 信息 我们需要将 2dfbc7e8 和 c4e858b5 合并成一个 commit,那么我们输入如下命令 ...

  6. Spring Boot学习资料汇总

    1. SpringFramework 重点学习 IOC容器,Web MVC framework,AOP 等    官网文档  http://docs.spring.io/spring/docs/cur ...

  7. Python 基础学习之if语句

    cars=['audi','xiali','bwm','benz',] ##根据要求bmw全部为大写,其他的首字母为大写 for car in cars: if car=='bmw': print(c ...

  8. vi或vim下按方向键改变方向变成ABCD这类字符

    遇到这种问题肯定很恼火,按方向键改变文本的方向有时候变成输入ABCD,有时候并不是我们想要的结果 解决方法: $ echo "set nocp" >> ~/.vimrc ...

  9. windows 远程到ubuntu桌面

    Windows remote connect ubuntu desktop 1. install xRDP sudo apt-get update sudo apt-get install xrdp ...

  10. 多线程编程_读写锁ReadWriteLock

    Lock比传统线程模型中的synchronized方式更加面向对象,与生活中的锁类似,锁本身也应该是一个对象.两个线程执行的代码片段要实现同步互斥的效果,它们必须用同一个Lock对象. 读写锁:分为读 ...