前端基本技术栈总结

本篇文章将对作者目前正在使用的前端技术栈做一个总结与梳理，十分的基础，如果你对基本的JS/HTML/CSS框架有所了解，但是又对目前流行的web框架，更直接说是能够就业的技术不甚了解或是感到迷茫，那么相信大家看了本文之后会够有所收获。

前端技术栈

概述

不要感觉需要的东西很多，一大堆不认识的东西密密麻麻的，其实只有加粗显示的两项技术（vue、element）是重点，而且这两者都是相互结合的，理解起来并不难，其他有很多也是会最基本的运用即可。正文内容将按照安装的顺序进行讲解，点击每一项的标题都可以直接跳转至其官网。另外一提，在接下来的阅读中不可避免的会接触到全英文的网站，所以请提前做好翻译工作，这里我强烈推荐Chrome浏览器（下载点这里），自带翻译功能的同时还拥有世界上最好的开发者调试工具，谁用谁知道。

在阅读本文时可以参考

• 项目实践源码
• 在线预览

效果展示

基础

这一部分包括了这个前端框架最基本的结构，完成这一小节的安装与配置后，你将可以进行最基本的前端项目开发。

nodejs - 一切的核心

简单来说，nodejs就是javascript的服务器版本，它轻量又高效，而且和js的语法几乎完全一样，如果你之前了解js的话，那么nodejs的学习成本就几乎为零，nodejs还包含了一个插件管理器叫做npm，用于安装和使用数量庞大的第三方包而完全不用关心是怎么下载的。更棒的是，当你安装完nodejs之后就完全不用理会它了，让它默默的在底层发光发热吧，至于怎么安装，看下一节。

nvm - 版本管理

nvm（Node Version Manager ）是nodejs的版本控制器。在实际项目的开发中，我们经常会遇到项目所需的nodejs版本和我们现在正在用的版本不一样的情况，nvm就很好的解决了这个问题，nvm可以快速安装/切换/删除nodejs的不同版本。

安装与使用

下载地址 - windows 安装完成后在cmd输入nvm version后弹出版本号即为安装成功

nvm version
# -> 1.1.7

nvm为纯命令行操作 在任何位置的cmd中都可运行nvm，更多命令请键入nvm -h查看

主要命令	介绍
nvm install node版本号	安装nodejs和对应版本的npm，安装完成后会自动配置path
nvm list [available]	可以查看已经安装的node，加available查看所有的node版本
nvm use node版本号	使用对应版本的nodejs
nvm uninstall 已安装的node版本号	删除对应版本的nodejs

yarn - 更好的包管理

什么？我们不是有npm了么？为什么还要用这个我听都没听说过的yarn？答案是因为它更好用，yarn的使用更加更加简单、安全可靠、提示也更加友好。而且没错，它也是纯命令行操作。

安装与使用

访问官网下载安装之后在命令行键入yarn -v，显示版本号即为安装成功。

yarn -v
# -> 1.9.4

下列命令请在项目工程的目录中使用，更多命令请键入yarn -h查看

主要命令	介绍
yarn	安装当前目录下已经存在的依赖
yarn add 包名	为当前目录下的项目安装指定包
yarn global add 包名	全局安装包（多用于安装工具）
yarn remove 包名	删除指定包
yarn config set registry 'https://registry.npm.taobao.org'	切换为淘宝源，下载更快

编辑器及插件

好了，通过上面的安装你已经可以正常的在记事本里完成自己的项目了，什么？记事本？这可忍不了。于是，当当当当，世界第二强的编辑器闪亮登场。

VS Code - 好用的编辑器

vscode不用多说了，小到忽略不计的安装包（44M）、简洁的界面、完全免费、海量的插件、内建git、遁入智瞳的禅模式，完全开源，都让这个编辑器成为我们的首选。当然，初次之外你还有很多选择，webStorm、IDEA又或者是vim，这里完全取决于你。
下载地址

官网截图

ESLint - 代码风格检查

ESLint是一个用于统一风格的代码检查器，它内置了许多的规则，比如最大嵌套不能超过五层，变量定义之后必须使用、switch 语句必须包含 default等，让每个人都可以写出统一风格的代码来，从而避免一些细小但致命的bug和增加可读性。

如果你使用的是VSCode的话，具体的安装与配置可以参见这里 使用 VSCode + ESLint 实践前端编码规范

架构

vue - 主体框架

vue可以说是整个体系的核心了，也是需要重点学习的地方。vue是一个前端框架，建立在nodejs的基础上，使用yarn来管理其数量庞大的组件，例如下文提到的element和v-chart。vue是一个组件化、数据驱动的框架，它可以让代码更易于维护，也可以让开发者更专注于内容的创作上，而不是在细枝末节上浪费时间，你可以通过阅读下方的文章来更加深入的了解vue。

• 安装vue
• 关于vue的详细介绍

VUE.JS

pug - 更好的HTML

pug是一种模板语言，它比传统的html语法更简洁，写起来更加的舒服

• 安装 在项目目录下命令行中键入yarn add pug即可安装

> yarn add pug
yarn add v1.9.4
info No lockfile found.
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved lockfile.
success Saved 55 new dependencies.
info Direct dependencies
└─ [email protected]
info All dependencies
├─ @types/[email protected]
... 一大堆的依赖 ...
└─ [email protected]
Done in 19.06s.

• 基本语法对比 更多对比参见这里

pug	html
a(href='baidu.com') 百度	百度
#main pug天下第一	pug天下第一
.main pug天下第一	pug天下第一

• vue引用 将组件template块的lang属性设置为pug即可

stylus

stylus是一种预编译样式语言，用于替代css，stylus相对css同样更加简洁、更加易于阅读和维护

• 安装 在项目目录下命令行中键入yarn add stylus即可安装

> yarn add stylus
yarn add v1.9.4
warning package.json: No license field
warning No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 18 new dependencies.
info Direct dependencies
└─ [email protected]
info All dependencies
├─ [email protected]
... 一堆依赖 ...
└─ [email protected]
warning No license field
Done in 4.31s.

• 基本语法对比 更多对比参见这里

stylus 省略花括号、分号、冒号，缩进控制结构、使用函数复用

border-radius(arg)
  -webkit-border-radius arg
  -moz-border-radius arg
  border-radius arg

body
  font 12px Helvetica, Arial, sans-serif

a.button
  border-radius(5px)

css 臃肿、繁琐，重复性劳动

body {
  font: 12px Helvetica, Arial, sans-serif;
}
a.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

• 在vue中使用 将组件style块的lang属性设置为stylus即可

细节

当你熟悉了上一小节的内容后你就可以完成健壮可靠的项目了，接下来的内容可以让你的开发更加快速方便。

elementUI - UI组件库

elementUI是基于vue框架的一套UI组件库，有点类似与bootStrap，由饿了么开发。可以让你轻轻松松就可以搭建出漂亮的页面来。它的组件使用也是需要重点学习一下，详细的组件介绍参见这里。

• 安装 在项目目录下命令行中键入yarn add element-ui即可安装

> yarn add element-ui
yarn add v1.9.4
warning package.json: No license field
warning No license field
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning " > [email protected]" has unmet peer dependency "vue@^2.5.2".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 7 new dependencies.
info Direct dependencies
└─ [email protected]
info All dependencies
├─ [email protected]
... 一小点依赖 ...
└─ [email protected]
warning No license field
Done in 12.95s.

• 在vue中使用elementUI 在main.js中添加如下代码即可

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

v-chart - 简单好看的图表

v-chart是基于echart封装的一套vue图表组件，echart是一套前端非常流行非常强大的图表显示组件，但是强大的同时也带来了繁琐的配置项，v-chart将复杂的配置进行了简化以更方便使用。

具体的使用可以参见我的这篇文章 使用V-chart时踩过的一些坑

leaflet - 轻量级的地图

leaflet是一个轻量级的开源地图组件，比高德百度更加的易于使用。

具的使用可以参见我的这篇文章 leaflet地图介绍