前端架构选择及环境搭建

前言

有了接口文档以后，我们就可以开始选择合适的前后端架构来准备正式开发项目。本篇带着大家选择合适的前端架构并搭建起前端开发环境。

知识准备

在搭建前端架构前，我们先来了解一下这几个概念：Vue.js、Node.js（Vue.js 运行的环境）、Vue CLI（Vue.js 开发的标准工具）。

Vue.js

Vue.js 官网上是这么描述的：

Vue（读音 /vjuː/，类似于 view）是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue 是一种渐进式的前端框架，易用、灵活、速度快，支持的工具和插件非常多，现在已经形成了一个完整的生态链。Vue 出现地比较晚，吸取了 React、Angular、Polymer 等框架的精华，是当前前端开发的主流框架。

Vue.js 官网：https://cn.vuejs.org/

Node.js

Vue.js 运行在 Node.js 环境下，Node.js 官网上是这么描述的：

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。

官网地址：https://nodejs.org/zh-cn/

Vue CLI

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，提供：

• 通过 @vue/cli 搭建交互式的项目脚手架。
• 通过 @vue/cli + @vue/cli-service-global 快速开始零配置原型开发。
• 一个运行时依赖
• 一个丰富的官方插件集合，集成了前端生态中最好的工具。
• 一套完全图形化的创建和管理 Vue.js 项目的用户界面。

Vue CLI 官方描述如下：

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

Vue CLI 官网：https://cli.vuejs.org/zh/

开发环境

云笔记项目对于前端开发环境要求不高，开发工具可以选用 HBuilderX、VS Code，我本机的开发环境如下：

• HBuilderX 2.5.1
• Node.js 8.11.3
• Vue CLI 4.1.0

浏览器兼容性：Vue 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。

Vue 浏览器兼容性一览：

说明：这是 caniuse 对 ECMAScript 5 浏览器兼容性的的检测报告。

caniuse：一个针对前端开发人员定制的一个查询 CSS、JS 在个中流行浏览器钟的特性和兼容性的网站，可以很好地保证网页的浏览器兼容性。

项目搭建

安装 Node.js

Node.js 下载地址：

http://nodejs.cn/download/

根据你的电脑配置选择不同的安装包即可，傻瓜式安装，下一步下一步就行了。

安装完毕后打开命令行窗口（Windows 的 cmd 命令行，macOS 的终端），输入 npm -V，如果出现以下提示信息，Node.js 已正确安装了。

  npm -v
6.13.4

安装 Vue CLI

Node 版本要求

Vue CLI 需要 Node.js 8.9 或更高版本（推荐 8.11.0+），使用如下命令安装即可：

# Vue CLI 安装
npm install -g @vue/cli

安装之后，使用 vue --version 查看版本号，出现下面的结果，表示安装完成：

# 查看 vue 版本号
vue --version
@vue/cli 4.1.2

注意事项

在 Mac 上安装、升级 Node.js 和 Vue CLI 时，如果报 errno 13 的错误时，都是因为用户权限问题，需要切换到管理员权限，命令前加 sudo 即可，如：

# 执行 npm 命令安装 vue cli  报错
npm install -g @vue/cli
npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /Users/yangkaile/.npm/_cacache/content-v2/sha1/a7/d0
npm ERR! errno -13
npm ERR!
npm ERR! Your cache folder contains root-owned files, due to a bug in
npm ERR! previous versions of npm which has since been addressed.

# 切换到管理员用户即可，提示输入密码，输入开机密码即可
sudo npm install -g @vue/cli

创建项目

至此，我们的前端开发环境已经安装完毕，接下来就是创建项目、书写代码了。选择一个文件夹，使用命令 vue create 项目名 即可创建一个 Vue 项目：

# 在当前目录下使用 Vue CLI 创建一个名称为 web 的 Vue.js 项目
vue create web

项目文件说明

项目创建完毕后，使用编辑器打开，项目文件结构如下：

这就是使用 Vue CLI 创建的项目，相当与一个 HelloWorld 模板，主要目录有：

• dist：编译后的项目文件
• node_modules：引用的第三方资源
• public：静态资源文件夹
• src：项目代码存放的文件夹

文件说明：

• index.html：主页，里面有一个 id 为 app 的 div，用于挂载 vue.js
• main.js：启动类，相当与 Java 中的主类
• App.vue：项目根组件

项目运行时，main.js 启动，将 App.vue 组件挂载到 index.html 上的 div 里。

编译运行

打开终端，进入项目目录，运行 npm run serve 即可：

浏览器访问 http://localhost:8080：

至此，前端项目搭建起来了，我们接下来就可以在这里正式书写代码了。

源码地址

本篇完整源码地址：

https://github.com/tianlanlandelan/KellerNotes/tree/master/3.前端架构选型/web

小结

本篇带领大家使用 @vue/cli 搭建起前端开发环境，并讲解项目目录结构、重要文件，最后对项目进行编译并运行。目前来说，选择使用 @vue/cli 脚手架快速搭建 Vue 项目，是 Vue.js 开发的首选方式。