虽然我们现在只写了一个两行代码的小应用，它现在只能说 “hello ~”。不过可以想像的是，在未来我们的应用可能会包含很多行代码，放在许多文件里。所以我们需要一种管理这些源代码的工具还有方法，Git 是我们选择要用的源代码管理工具。

对于开发的项目，我们可以说要对这个项目做 “源代码管理”，或者也可以说要做 “版本控制”，它们指的是一个意思。做源代码管理或版本控制用的工具叫源代码管理工具（SCM），或者叫版本控制系统（VCS），它们指的是一种东西，Git 就是其中一种可以做源代码管理或版本控制用的工具。

我们对项目对了一些修改，比如添加了一个小功能，修复了某个 Bug 等等，你可能希望要保存一下项目当前的这个状态，这样以后遇到问题的时候，我们可以把项目恢复到保存的这个状态。如果不用源代理管理工具，要保存项目的当前状态，可以复制一份整个项目，然后重命名一下这个目录，以后出了问题，想要恢复项目的时候，可以用这个复制品替代正在开发的项目。

先准备一下，搭建一个 Vue 应用的开发环境，创建并且运行一个 Vue 项目，然后理解 Vue 的组件。接着我们就准备一个服务端应用接口，学会在 Vue 应用里请求使用服务端应用接口获取应用需要的数据。再去了解怎么在 Vue 里创建路由器，定义应用的路由（Vue Router），最后要学会一套应用状态的管理方法（Vuex ），最终我们会准备好一个能够应对复杂应用的应用结构。

第一章：启动与预热

前置知识

学习使用 Vue 开发前端应用或者小程序，前置知识就是最基本的 Web 老三样：HTML，CSS 与 JavaScript。如果您打算成为一名开始者，强烈推荐先学它们仨，最长久，最实用，可以用它们做很多事情。只需要学会基础即可，不用学太多，理解了核心概念以后，可以随用随学。

Vue 做的就是应用的界面，界面的内容结构用的就是 HTML  组织出来的。你要知道一块界面如何用 HTML 组织好。HTML 提供了很多标签（元素），不同的标签在浏览器上会呈现出不同的样子，标签也可以称为元素。用 CSS 可以设计界面的样式，比如元素的定位，长度，宽度，排版，背景，边框，字号，文字颜色等等。

带上基本的开发工具，配置好应用在本地的开发环境，我们就可以启动此次开发之旅了。

命令行界面

在开发工作中，有相当多的任务要在命令行界面下面完成，就是要通过输入一些文字命令来完成一些事情。比如远程连接管理服务器，创建或者启动应用，做源代码管理等等，执行这些文字命令的地方叫命令行界面。命令行是每一位开发者必备的工具，要尽早熟悉这种工作方式。

命令行界面是执行命令的地方，命令行工具指的是在命令行界面下可以做的一些事情，它们是一些没有图形化界面的小程序。你要使用操作系统提供的服务，要么可以通过图形化界面，要么就是通过命令行界面，无论是图形化界面还是命令行界面，它们都是一种用户界面，也就是用户可以通过这个界面完成一些事情，这个用户界面还有个名字叫 Shell（壳）。

比如我们要打开一个目录，查看目录里的东西。在图形化界面里，完成这个任务就是用鼠标双击打开这个目录，这样就会在图形化界面上显示这个目录里的东西。在命令行界面下完成这个任何要执行对应的命令，比如先要用 cd 这个命令进入到想要查看的目录，然后用 ls 命令列出这个目录里的资源。

Vue 应用里的组件可以管理自己的状态，在组件内部可以声明它需要用的数据，通过组件内部的一些方法可以修改组件需要的数据，改变组件的状态，组件的状态发生变化以后它就会重新被渲染，显示更新之后的状态。在复杂的应用里，组件之间可能需要共享一些状态，比如当用户在评论组件里发表了一条新的评论，内容组件上的评论数量可能需要更新一下。这种情况就需要引入一套应用整体的状态管理解决方案。

对于一个简单的 Vue 应用来说，引入状态管理解决方案会让应用变得复杂一些，但是相信我，您只要打算正经用 Vue 开发个应用，就一定需要一套状态管理的解决方案，目前 Vue 官方提供的方案就是使用  Vuex 这个东西。这篇文章我们就一块儿了解一下基于 Vuex 的状态管理。

Vuex

Vuex 是 Vue 官方提供的一套应用状态管理解决方案。先把它安装在我们的 Vue 项目里。

安装  Vuex

package.json<修改>

Vue 3 发布以后，我重制了之前全系列的 Vue 课程，几乎可以覆盖 90% 你在开发复杂应用的时候需要的技术、工具、概念 ...   这是一套干系（不掺水）课程，也就是课程内容都是直击要害，用最清晰的方式展示与解释最核心的概念，尽量减小学习时的干扰，这种课程看起来不漂亮（几乎无样式），但是最有效。课程已全部录制完成，会陆续发布在宁皓网上。

现在学会使用 Vue ，除了可以开发出前端应用，还可以开发出各种平台的小程序。后面我打算再补上两节这样的课程，比如使用 uniapp 或者 Taro.js。您要有更好的选择，也欢迎您在评论区留言，制作课程的时候我会考虑加上 ：）

访问某个地址，显示 Vue 应用里的某个特定的组件（页面），这个就是 Vue Router 提供的路由功能。这里说的组件，我们也可以理解成是一个页面，比如用户登录页面，内容列表页面，显示单个内容的页面，这些页面组件跟一般的组件没什么区别，对于 Vue 来说，它们都是组件（Component）。

Vue Router

安装 Vue Router

打开项目根目录下的 package.json ，在项目的依赖里添加一个 vue-router。

  "dependencies": {
    // ...
    "vue-router": "^4.0.0-0"
  },

在终端，Vue 项目所在目录的下面，执行 yarn 或者 npm install ，准备好项目依赖的东西，包管理工具会把新添加的 vue-router 下载安装到我们的项目里。

路由器

给 Vue 项目装好 vue-router 以后，可以先去创建一个路由器，然后告诉应用使用一下这个路由器就可以了。后面我们会再去定义一些路由，再把这些路由放到这个路由器里。

在 Vue 应用上处理数据要请求服务端应用接口，比如在内容列表组件上请求服务端的内容列表接口获取到内容列表数据，然后在组件的模板里循环绑定输出这组数据。Vue 应用也可以把用户在应用界面上生产出来的数据交给服务端应用接口，把数据永久的存储在应用的数据仓库里。

应用的客户端（Vue 应用）与服务端交换数据的时候，一般就是通过 HTTP  协议。客户端对服务端发出 HTTP 请求，服务端根据客户端请求的地址（接口）做出不同的响应，如果客户端请求获取数据，服务端会把客户端需要的数据放在响应的数据里，客户端收到了响应就可以从响应里拿到它需要的数据了。

如果客户端想把用户生产出来的数据交给服务端去处理，可以在发送请求的时候，把用户数据放在请求里，这样服务端收到请求以后，就可以从请求里拿到它需要的数据，服务端可以处理这些数据，比如把它放到数据仓库里保存起来。

如果你想开发一个完整的应用，你需要同时开发应用的客户端与服务端。客户端可以基于 Vue 框架开发，服务端可以基于 Node.js 开发。在宁皓网上有个系列课程介绍了怎么基于 Node.js 开发一个服务端应用，你可以从零开始做出一个能发布内容，评论，用户登录，上传文件，打标签，点赞的服务端应用。

最近用 Vue 做了个项目，总结了一些经验，做成了一个系列课程，陆续会在宁皓网发布。这里先给大家划个学习重点，您在学习 Vue 开发应用的时候可以作为参考。避免学习陷阱的方法就是少看视频多实践。

用 Vue 做出来的东西就是应用的界面，也就是应用的客户端，也可以叫前端应用。在应用的界面上要显示的数据一般都来自服务端，也就是 Vue 应用可以对服务端应用接口发出 HTTP 请求，然后把请求回来得到的数据放到界面上展示出来。Vue 也可以把用户在界面上生产出来的数据交给服务端去处理，服务端可以把数据永久地存储到应用的数据仓库里。

Vue 3 给大家提供了一种新的创建组件的方法，就是通过 Composition API。之前咱们经常用的是使用 Options API  创建应用的组件。平时开发的时候不会看到这些名词，所以你不必太在乎，你只要知道现在有两种创建组件的方法就行了。两套方法都可以造出你想要的应用，掌握其中任意一套方法即可。对于 Vue 的初学者来说，我推荐先从 Options API 开始。这篇文章我们就先介绍一下用 Vue 的 Options API 创建组件。

这是宁皓网的一个应用开发实战课程的配套项目，项目基于 xb2-node 这个项目创建。这个 xb2-node 是我们在一个应用开发课程里一起开发的项目，在这个项目的基础上我们会根据实际需求再去做一些改进。

本地开发

1：把克隆到本地

git clone https://github.com/ninghao/ravent-node

这是宁皓网在页面设计实战课程里做的一个项目，课程的目的是熟悉网页设计，项目里用了一些社区提供的资源，比如 Semantic UI 样式框架，Material Design 小图标，Slick Carousel 幻灯片 ... 项目主要的样式是我们自己一步一步写好的，写样式的时候用了 Sass ，这个实战课程里包含了大量的页面设计技巧，完整的展示了页面设计流程。

之前的开发流程比较复杂，很多同学反应配置开发环境的时候出了很多问题。我们重新修改了开发流程，让整个项目只有一个依赖（Sass），极大简化了开发流程，大家可以专注于页面设计本身。

演示地址：https://demo.ninghao.net/landrover-ui
课程地址：https://ninghao.net/package/website