图：Alexey Kuvaldin

今年太特别了，过得飞快，年夜饭的香味与内心的恐惧仿佛都还没有散尽。今年增长的除了年纪，还有几撮白发。我曾经很自信地说自己不会染头发，但现在却怕父母看见了会多想。今天是宁皓网第九个年头，当年那个小么子，已经成 “蜀黍” 了。

JavaScript 社区里面提供了很多现成的包，包里面都提供了一些功能或者工具，我们可以直接把它们用在自己的项目里，这样很多功能我们就不用自个儿去开发了。管理项目里使用的包会用到一个包管理工具叫 npm。后面我们会在项目里用到一些包，所以下面可以先了解一下包与包管理到底是怎么一回事儿。

包（Package）

把一些东西打成一个包（Package），这个包可以提供一些功能，然后在其它地方可以使用这个包提供的功能，这个包里面主要就是一些用 JavaScript 语言写的代码文件。比如在我们自己开发的应用里，可以安装一些包，然后使用它们里面提供的功能。可以把它们想成是一些零部件，或者功能模块。

前面我们用 Node.js 做了一个 Web 服务器，启动以后大家就可以通过网络使用这个 Web 服务了。这就扯出来一些跟网络相关的概念，地址里的 HTTP 是什么意思，Localhost 是啥玩意，端口号是又干什么用的。这一章我们就来了解一点网络的基础，这会有助于我们以后开发服务端的应用。

传输协议（HTTP）

协议（Protocol）是网络上的设备之间签订的合同，大家都要遵守、履行这个合同才可以正常沟通、交流、合作。也可以把协议想成是一套协调商议出来的方法，比如先干什么，再干什么，怎么干等等，大家可以用这套方法来相互协作，交换数据。

HTTP（HyperText Transfer Protocol） 就是一种传输数据用的协议。客户端与服务端，服务端与服务端之间都可以通过这种协议传输数据。我们之前搭建了一个 Web 服务，这个服务遵照了 HTTP 协议的要求，所以客户端可以使用 HTTP 这种协议使用我们的 Web 服务。

服务端应用在服务器上运行，提供了一些服务，比如发布内容，上传文件的服务。如果想让大家可以通过网络使用这些服务，在这台服务器上就必须要运行一个 Web 服务器。下面我们就来看看，如何写几行代码，创建一个 Web 服务器，提供一个简单的服务。

准备

任务：准备项目<web-server>

在项目里，项目所在目录的下面，基于 develop 分支，创建并且切换到一个新的分支，名字叫 web-server。

git checkout -b web-server

语法

require()

Node.js 里面自带了很多模块，它们都提供了不同的功能，在我们的项目里可以直接使用这些模块提供的功能。首先要在想在使用这些模块的文件里导入它们，导入模块的时候用的就是 require() 这个函数，一般我们还会给导入的模块起个名字。

开发语言（程序语言）是一种写作语言，不同的开发语言都有各自的书写方法，如果你想用某种开发语言表达自己的想法，开发应用，就需要了解这种语言规定的书写方法，也就是语法。

一开始，不推荐大家在学习书写方法这种事儿上花太多的时间，只需要了解一些基本的写法就可以了，剩下的可以在实际工作中学习，带着需求去学习，效率会更高。不同的开发语言虽然各有不同，但很多概念都是通用的，所以只要学会其中一门开发语言，再去学习其它的语言就很容易了。

在这一章里，我们先做一些基础的语言训练，了解一下在任何开发语言中都可能会经常出现的一些概念，这样再去做后面的任务就会轻松很多。

语言训练场地

现在我们要学习的是 JavaScript 这种开发语言，找个可以运行这种语言的环境就可以学习它了。浏览器里都带着一个 JavaScript 引擎，所以可以在浏览器上学习这门语言。 之前我们在本地电脑上安装过一个 Node.js，所以也可以在这个环境里学习 JavaScript 这门开发语言。

如果选择在浏览器上学习，推荐使用 Chrome 浏览器，打开浏览器以后，再打开它的开发者工具，然后打开 Console（控制台）这个选项卡，这样就可以直接在控制台上执行 JavaScript 代码，而且可以立即得到执行的结果。

虽然我们现在只写了一个两行代码的小应用，它现在只能说 “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。您要有更好的选择，也欢迎您在评论区留言，制作课程的时候我会考虑加上 ：）