博客

访问某个地址，显示 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

（极速演示）详细内容参考：https://ninghao.net/course/8552

今天跟大家聊一下网页设计怎么做。网站仍然是用户最容易接触到你的产品与服务的平台，只需要一个地址，不用下载与安装，就能立即使用你提供的产品与服务。用前端框架开发出来的应用极大改善了网站的使用体验，很多事情你可能也只想在网站上完成，比如我最近经常用的一个叫  Quip 的写作工具，它提供了不同平台的应用，但我只想使用 Quip 的网站。

你打算做一个网站，开发一个前端应用，你可以先把应用的界面做出来。你的应用要在浏览器上运行，界面的样子主要是由 HTML 与 CSS 组成，处理界面的行为会用到 JavaScript。一开始，我们可以不考虑界面上的行为，只专注应用界面的样子，你可以先用设计工具画出界面的样子，然后用 HTML 与 CSS 把界面表达出来。

最近发现几样好东西，忍不住跟大家分享一下，顺便也寻了些视频，足够让同学们可以起动使用这些东西。我发现了一个很好的用户界面原型与设计工具：Adobe XD，CSS 的网格（Grid）布局，还有一个叫卡夫卡（Kafka） 的东西。（这个标题是不是有点标题党的嫌疑 ：）

用户体验设计（Adobe XD）

在动手编写应用代码之前，你可以选择一款设计与原型工具，把网站或者应用的样子还有状态先做出来看看。Adobe XD 就是这样一款用户界面与用户体验的设计与原型工具。它跟 macOS 上用的 Sketch 应用是同一类的东西。不过我觉得有了 XD ，我的 Sketch 应该可以搁起来了。

在双方都不加装插件的情况下，XD 的使用体验要胜过 Sketch。它让我重新觉得做设计与原型是件挺快乐的事儿，虽然 XD 能做的，在 Sketch 上安装一些插件之后也大概可以做到，但是使用体验还是不能相比。

参加小白兔的开发之路自由行的同学们，现在你可以自己在本地架设一个学习网站，启动本次的开发之旅：）

网站预览：https://xb2.ninghao.net

终于完成了史上最完整的应用开发学习路线的录制工作，目前已耗时 650+ 小时，无数杯咖啡，整理的文字资料有 40+ 万字符，490+ 个视频，内容覆盖开发工具、语言，框架与思路，这是一条真正的可以从零开始跟着走的应用开发学习路线。现在只是完成了录制，还得做后期制作，1 分钟的视频大概需要用 6 分钟的后期制作与编辑的时间。

我们在这条学习路线里，会基于 Node.js 架构开发一个服务端应用。一切以实际需求出发，需要什么就学什么。我们会学习几种开发语言，比如  JavaScript，TypeScript 还有  SQL（数据查询），还要学习在任何应用开发工作流程里都会用到的工具，比如命令行，版本控制（Git），Github...

最终我们会在阿里云购买一台云服务器，练习使用 Linux 类型的操作系统，充分理解以后，我们再去搭建一个应用的生产环境，比如安装配置各种需要的服务，配置反向代理，申请 SSL 证书等等。然后再把应用迁移到这个生产环境上运行。

在这条应用开发学习路线里，我把每个关键的概念，语法，思路都做了解释。也就是你不仅可以跟着操作，也能清楚的知道自己正在做什么，为什么要这么做。