没时间学 Vue (10) —— 实践（一）：第一个 Vue 项目

之前我们已经把 Vue 中最为核心的 “绑定”、“渲染” 和 “事件处理” 中最常用和基本的内容，都掰碎过了一遍。

接下来，我们要稍微脱离一下 Vue 的官方资料，讲一讲实战中如何快速上手 —— 你会发现，跟之前看到的例子很不一样。

时间宝贵，我们等不到武装到了牙齿才开着飞机去轰炸地上的绵羊，现在手里有了 AK47 就可以在实战中快速成长了。

不过，我们仍然重申一下前面提到的几个最基本的原则，它们不能保佑你刀枪不入战无不胜，但是可以给你指明前进的方向。

花时间掌握关键点 —— 思路总体正确即可，其余的交给搜索引擎

第一性原理：
1）理解本质 —— HTML 原生的元素是怎么用的;
2）推导用法 —— 试着用 Vue 来简化 HTML 的用法，同时写一些简单的测试代码来验证我们推导出来的用法。

默念三遍，咱们开始进入正题。

 

1、前端代码要做什么？

---

我们先来回顾一下 JSP 或者 Spring WebMVC 等没有专用前端（也就是前后端不分离、或者说服务器端渲染）的情况下，提交表单的典型处理方式。

这种处理最大的问题在于，每次都要渲染整个页面，不仅速度慢、让人抓狂，而且会出现画面闪烁、用户体验不好。

当然，还有开发者需要掌握 Java、渲染引擎的语法、原生HTML、CSS 等很多知识，门槛高，效率低，Bug 多的问题。

于是出现了一种不渲染整个页面，而是从后端获取数据、前端使用 JavaScript 按需更新页面中相关区域的技术，也就是大名鼎鼎的 AJAX 。

最开始 AJAX 是微提出来的、也只在 IE 系列上可用（基于  IE 的 XMLHttpRequest（XHR）对象）；后来其他主要浏览器也都支持了，不过底层的对象完全不一样。

好在有各种各样的插件来实现跨浏览器的支持，后来 JavaScript 中也（被迫）有原生的 API 请求函数 Fetch，不过广泛使用的还是功能更强的 axios 组件库。

自此开启了各种前后端分离的时代，后端只负责处理请求、返回数据，前端则负责发送请求、将数据显示到画面中 —— 也就是客户端渲染。

这种分工的细化，也降低了前后端开发者各自的技术栈要求，提升了开发效率。

尤其是后端出现了 Spring Boot、前端出现了 Angular、React 和 Vue 这些开箱即用的框架之后，

开发者需要掌握的知识更少了、需要写的代码也更少了 —— 只需要按照这类框架的教程来做，也能很快做出一些简单常用的功能来。

除了框架，还有格式各样的组件库，拿来就可以做出看起来比较专业的画面了，比如：Element 、Vant、Ant Design of Vue、Vuetify 和 Quasar(只有英文版) 等。

（世道轮回，仿佛又回到了当年 VB6 里面拼 OCX 的年代了 ......）

为了进一步提升用户体验，还出现了 单页面应用 (Single Page Application, SPA) 的技术，即使切换页面内容也不需要刷新整个页面了。

 

相应的，虽然前端用起来越来越简单，底层技术和工具链却是越来越复杂。

尤其是随着 NodeJS 的成熟和广泛应用，现在已经可以使用 JavaScript 来写服务器级别的代码了，也有很多只使用 JavaScript 的全栈开发者。

这又进一步推进了同样使用 JavaScript 的前端代码的模块化以及 “后端化”，包括依赖管理、对象、异步等，很多原本 JavaScript 不支持的功能也都快速出现了。

这也倒逼 JavaScript 规范快速升级，所以我们实际使用的 “JavaScript” （ES6 或者更高版本），早已不是 jQuery 时代的 JavaScript （ES5）了。

悲催的是，还有部分浏览器只能支持 ES5，所以出现了 Babel 这类 JavaScript 编译转码工具，会把 ES6 转换降级成 ES5 ......

这就是当前前端开发者所面临的 “战场”，不过幸好有各种各样的脚手架工具，我们只需要了解和记住基础的东西，就能很快上手。

不过后面的文章里，也会假定你没有足够的时间来做这些功课，会提到一些关键的知识点。

先记下几个链接，我们继续突击。

• 对象、class、模块的导入导出 （务必了解）
• axios （务必了解）
• Element 
• 现代 JavaScript 教程
• ES6 入门教程
• MDN CSS 教程

 

2、创建第一个 Vue 项目

---

1）首先，你需要安装 NodeJS 。

     https://nodejs.org/zh-cn/。建议使用长期支持版本，比较稳定。

    我们主要使用 NodeJS 的包管理器 npm，类似于 maven，以后会大量用到。

    唯一的问题是，这一系列工具都是命令行的，所以接下来你得大量跟命令行打交道。

2）然后，你需要修改 npm 的仓库地址。

否则从国内访问会慢死你 —— 比访问 maven 中央仓库还要慢一个数量级。

需要以管理员权限运行 “命令控制台”，执行以下命令。

REM 设置 npm 的默认仓库
npm config set registry https://registry.npm.taobao.org

REM 安装 cnpm (淘宝仓库)
npm install -g cnpm --registry=https://registry.npm.taobao.org

3）接下来，安装 Vue 的脚手架。

REM 安装 vue 2.x 脚手架
npm i -g @vue/cli

比较老的项目，也能会安装老版本的脚手架 vue-cli。

@vue/cli 的详细说明，可以参照 Vue 官方文档：https://cli.vuejs.org/zh/。

4）这样，我们就可以创建第一个 Vue 项目了。

先找一个比较 “吉利” 或者 “顺眼” 的目录，比如说桌面。

REM 进入目录
cd /d 吉利或者顺眼的目录，如：我的桌面

REM 创建 Vue 项目（使用默认设置）
vue create -d vue-test-1

创建时会下载 Vue 项目的模板，以及使用到的 npm 组件包，因此稍微会花点儿时间。创建完成时，能看到类似下面的提示（注意最下面绿色的那两行）。

5）运行刚才创建的项目，看看效果。

REM 进入项目所在目录
cd vue-test-1

REM 启动项目（开发调试）
npm run serve

运行时会对各种文件（JavaScript、CSS等）进行提取、编译和打包，也会稍微花一点儿时间。

运行起来后，会有这样的提示：

这样，我们就可以在浏览器里，看到我们的第一个 Vue 项目的画面效果了。

6）最后，我们来打包和发布。

上面的运行方式，就跟我们在本地开发调试时通过 IDE 中启动 C/C++、Java 代码一样，无法使用在生产环境中的。

我们得先使用下面的打包命令，将整个项目编译成一组静态资源文件（HTML、JS、CSS、图片等），然后把它们发布到生产环境的静态文件服务器中（如：nginx）。

npm run build

打包生成的文件，会保存到 dist 子目录中。大概是这样的：（注意看 js 文件的内容）

如图所示，打包时做了很多很多的事情 —— 但是现在不用深究，只要知道有 打包 这么一回事情。

还需要记住 Vue 打包用的是 webpack，其中可以配置很多插件（比如说上图中压缩 JavaScript 代码的）—— 而 Vue 的脚手架里面把大部分的配置都共通化然后隐藏了。

可以类比 C/C++ 项目使用的 make 、Java 项目使用的 ant 和 maven 来理解 webpack，将来调整时可以参照：https://webpack.docschina.org/concepts/。

另外，虽然 dist 子目录中全是静态资源、而且包括 index.html，不过并不能直接在浏览器中打开 —— 直接打开后画面显示是空的。

要想看到内容，我们需要一个静态文件服务器 —— nginx 是老牌也是最常用的，但是配置稍微有点儿麻烦，而且 Linux 版的很多功能在 Windows 版不支持。

不过 npm 中有很多简易版的 —— 比如：http-server，我们可以直接拿来用（还是得敲命令行）。

REM 安装 http-server，如果已经安装过了跳过
npm i -g http-server

REM 启动 http-server 解析 dist 目录的内容
http-server .\dist

这样我们就能在浏览器中，通过 http://127.0.01:8080 来访问打包好的页面了 —— 跟开发启动时的画面效果是一样的。

严格意义来说，Vue 的整个打包机制，都是建立在 npm 的基础之上的 —— 就是我们之前的命令行中各种使用的 npm 。

现在也不用深究，将来需要定制或者深入理解的时候，可以参照： http://nodejs.cn/learn/an-introduction-to-the-npm-package-manager。

 

3、项目构成

---

一般来说，各个项目都定制自己的项目构成，也有自己的编码规约和开发指南 —— 前端的架构或者技术大拿会把这些事情做了，进项目后照着规约来做就行。

不过核心的东西都大同小异，理解后也能在项目中快速上手。

上面的 Vue 项目的主要构成如下：

目录和文件	描述	补充说明
bable.config.js	ES6 转 ES5 的配置	我们开发的时候用的 JavaScript 的版本是 ES6 的，但是有些浏览器只支持 ES5。所以需要使用 Babel 这类工具做个转换。
package.json	项目配置文件	类似于 make 文件或者 maven 的 pom.xml 文件。 其中包含了项目的描述信息、使用的第三方组件库(以及版本)、以及编译打包指令。 具体参照：http://nodejs.cn/learn/the-package-json-guide
package-lock.json	将第三方组件库的版本明确化后的配置文件	跟 maven 不同，npm 中引用第三方组件库不需要指定其确切的版本，而是可以指定某个区间。 比如说，~1.1 这种版本，表示 1.1.1、1.1.2、...、1.1.N 都可以，但是 1.2 不可以。具体参照：https://www.xncoding.com/2018/05/07/web/npm-version.html 。 这种就有可能导致不同时间点进行编译打包时，实际使用的第三方组件库的版本不一致。因此就有了 package-lock.json 文件，把实际使用的各个版本都明确下来。 具体参照：http://nodejs.cn/learn/the-package-lock-json-file。 这个文件很特殊，不要删除，更不要手工修改。
public \	无需 webpack 的资源	这个目录中的文件，会直接拷贝到 dist 目录中，而不会被 webpack 处理。 比如说，在这个目录中放一个 js 文件，那么打包时这个 js 是不会被压缩的。 如果是使用老版本的 vue-cli 脚手架生成的项目的话，没有 public 目录，但是会有 static 目录，功能一样。（想想 Java 项目中的 static 目录） 那为什么 public 目录中的文件能获此 “优待” 呢？那是因为 Vue 脚手架中默认的 webpack 配置文件里就是这么写的，换了其他的脚手架就可能没有这种优待了。
index.html	主页面模板	<div id="app"> 就在里面定义的。
src \	代码和资源目录	类比一下 maven 项目中的 src 目录
main.js	前端程序入口	所有的初始化处理都是在这里做的，包括生成 Vue 实例。看起来是不是有点儿眼熟？
App.vue	主页面（主组件）	也就是 main.js 中使用到的 “组件”，注意是文件后缀是 .vue。 现在有个印象就行，我们在之后的章节中会详细说明。   如果你就是很好奇，可以参照以下资料： https://cn.vuejs.org/v2/guide/single-file-components.html https://cn.vuejs.org/v2/guide/components.html https://cn.vuejs.org/v2/guide/components-registration.html
assets \	存放代码之外的数据	如：CSS 文件、Font 文件、图片文件等。 这些文件打包时会被 webpack 处理，比如说小的图片可能直接被转换成 base64 的格式嵌入到 JS 或者 CSS 文件中。
components \	存放所有的组件	绝大部分代码都在其中
router \	存放路由配置	先种个草，单页面应用 (SPA) 的时候会用到。 https://router.vuejs.org/zh/
store \	存放 vuex 配置	还是先种个草，一时半会儿可能都不会讲到 —— 状态管理，很容易绕死新手的东东。 https://vuex.vuejs.org/zh/

 

4、准备开发环境

---

这个也基本上是各个项目都有自己的定制，网上也有各种各样的教程。

自己本地用的时候，只要安装 Visual Studio Code 就行：https://code.visualstudio.com/download。

（JetBrains 的 WebStorm 也是个很好的 IDE，不过只能免费试用 30 天）

装完 Visual Studio Code 之后，推荐安装以下插件。

• Debugger for Chrome （跟 Chrome 直接联调测试用）
• Prettier - Code formatter （代码格式化工具）
• Vetur （Vue 开发支撑工具，主要靠它）
• ESLint （静态代码检查工具）
• Vue 2 Snippets （Vue 2.x 代码片段库）
• vscode-element-helper （Element 代码片段库）
• Auto Close Tag （自动补全结束的 tag）
• Auto Rename Tag （自动重命名对应 tag）
• Better Comments （注释生成工具）
• Bracket Pair Colorizer 2 （更醒目的括号范围提示）
• GitLens — Git supercharged （Git 增强工具）
• Live Server （小型WEB服务器）

 

5、思考题

---

本期的思考题比较简单，

1）手动创建一个 Vue 项目；

2）修改 src\components\HelloWorld.vue 文件，试着把上一篇或者之前的代码放进去。

     —— 虽然还没有对 “模块” 做详细说明，可以先试着改改看，你会发现还是很容易的。