基本理念

cnode.js 的公开 api 的列表，以及详情页面，实现一个超小型的项目实战，尽可能的掌握 vue 的项目入门的各项关键配置。 
本系列博文不涉及 vuex 的内容。因为这部分内容属于比较高阶的内容，并且在大多数中小型项目中是没有多大用处的。所以情况是，大多数情况下，你并不需要 vuex。当你需要的时候，你应该有看懂官方文档的水平。如果你没有看懂官方文档的水平，我说再多都是没有什么用的。并且在 vue 的入门文档中涉及这部分内容的话，会给新手徒增烦恼，所以本系列博文不涉及 vuex

基础概念论述

前后端分离开发模式

WEB

  1. 设计师设计页面设计稿
  2. 前端工程师切成 

html+css+js

  1. 后端工程师拿到前端工程师的做好的页面，利用模板引擎或其他技术嵌套进后端代码中，实现项目开发。

这种开发模式的缺点是，哪怕页面出现一点点小的改变，也需要前端人员和后端人员同时协调开发，并且后端人员不能把全部精力放在业务流程以及数据逻辑等方面，还必须和前端人员一起来处理各种兼容问题。开发效率不高，沟通繁琐。

所以，我们推崇前后端分离的开发模式。

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

与不分离的开发模式相比，对前端技术人员的技术要求高了很多，原先只需要会写静态页面即可，但是现在必须了解如何对接接口，以及其他很多内容。很多十年以上的前端开发人员在学习这些新内容的过程中，崩溃了。

我艹，现在前端开发都这个样子了。JS

SPA

single page web application 的缩写。中文翻译为 单页应用程序 或 单页Web应用。更多解释清参看 百度百科：SPAurl

http://www.fengcms.com/index.html?name=fungleo&old=32#mylove/is/world/peace
  • 1

urlhttp://www.fengcms.comindex.html?name=fungleo&old=32

  1.  给页面通过 

GET#mylove/is/world/peaceurl 中的锚点，并不会出现这种行为，因此，几乎所有的 spa 应用都是利用锚点的这个特性来实现路由的转换。以我们的 vue 项目为例，它的本地 url

http://localhost:8080/#/setting/task
  • 1

#

以上理解是我的个人描述，不代表百分百符合标准答案，但这样理解是没有问题的。

RESTful 风格接口

RESTfulgithub 也在主推 GraphQL 这种新的接口风格，但目前国内来说还是 RESTfulRESTful 接口风格之后，会深入的理解这种接口的优缺点，到时候，你自然会去想解决方案，并且在项目中实行新的更好的理念，所以，我这系列的博文，依然采用 http://cnodejs.org/ 网站提供的 RESTful

了解程序开发的都应该知道，我们所做的大多数操作都是对数据库的四格操作 “增删改查” 对应到我们的接口操作分别是：

postdeleteputget

get外的其他方法，没有什么区别，都是一样的。从深层来说包括 get

/api/v1/love 这样的接口，采用 RESTful

get 操作 /api/v1/love/api/v1/lovepost 操作 /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 的这一条数据

/api/v1/love 和 /api/v1/love/1

以上内容均为本人的认知与理解，与标准教科书肯定不一样。但有助于新人简洁明了的理解内容。更多内容，请查看：RESTful API 设计指南 
另外，RESTful 风格也不仅仅只有这几种操作，还有更多的操作。但我们常见的操作，就是这些。就好比我们不需要掌握了男女的全部卫生知识再去做爱一样，我一般崇尚的是，脱掉裤子，just do it now! 我们在不断的实践中，不断的提高我们的技术以及技巧，临渊羡鱼不如退而结网就是这个道理。

vue 是什么，以及我们为什么选择 vue

angular 正在新旧交替，江山未稳，因此我们当时尝试在两个项目中引用不同的技术路线 react 和 vuevue 的学习成本明显比 reactvue

所以，选择的理由特别的简单——只是因为它更简单！

vue

我不管官方的解释是什么，我的解释如下：

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

vue 不仅仅是 vue.js 这一个文件，而是围绕 vue.js 配套的一系列的工具。就好比我们说的 linux 不仅仅是 linux

具体如下：

vue.jsVueRouter2webpacknodejsnpmaxiossass-loader

  1.  和 

node-sasselementiviewvue-cli

其他还有很多，我们用到哪边，说哪边。

命令行的重要性

GUI 的图形界面中无法自拔，对于 CLIiview 的 iView Cli

并且，命令行

更好

更快

更强

更装逼

所以，无论如何，你都不应该排斥命令行，还要积极的拥抱它，学习它，掌握它。

shell

我对你的建议如下：

  1. 抛弃 

windows

  1.  操作系统，不管它是什么版本的 

windows

  1. 。
  2. 购买一台 

macbook pro

  1.  没钱购买可以选择 黑苹果 ，可以参考我的系列博文 打造前端MAC工作站以及相关文章索引
  2. 如果不是 

photoshop

  1.  的重度用户，并且想要更深层次的掌握更多内容，请使用 

linux

  1.  系统。

ubuntu

  1.  操作系统还是比较简单上手的。有一定 

linux

  1.  使用经验的同学，建议使用 

arch linux

  1. 除了使用 

atom

  1.  或 

vscode

  1.  这样的现代编辑器，更推荐掌握 

vim

  1.  这样基于

cli

  1. 的编辑器的基本使用。能用到什么样的层次，取决于你自己的需求，相关内容可以参考：世界上最牛的编辑器： Vim系列博文。

最后强调，别问我有关 windows 的问题，我很久没用过 windows 系统，并且关于系统底层的问题，我根本就不知道如何解决。

我说的，你不一定要全部掌握或者理解。但一定要有一个起码的概念。至少，知道我说的大概是一个什么样的玩意儿。

第一篇博文，基本没有涉及到任何代码的部分，但是下面，我们要开始干活儿了。