本篇文章将对作者目前正在使用的前端技术栈做一个总结与梳理，如果你对基本的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.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
└─ pug@2.0.3
info All dependencies
├─ @types/babel-types@7.0.4
... 一大堆的依赖 ...
└─ yargs@3.10.0
Done in 19.06s.
- 基本语法对比 更多对比参见这里
| pug | html |
|---|---|
a(href='baidu.com') 百度 |
<a href="baidu.com">百度</a> |
#main pug天下第一 |
<div id="main">pug天下第一</div> |
.main pug天下第一 |
<div class="main">pug天下第一</div> |
- vue引用 将组件template块的lang属性设置为pug即可
<template lang="pug">
#container
a(href='https://pugjs.org/') pug官网
</template>
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
└─ stylus@0.54.5
info All dependencies
├─ amdefine@1.0.1
... 一堆依赖 ...
└─ stylus@0.54.5
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即可
<style lang="stylus" scoped>
...
</style>
细节
当你熟悉了上一小节的内容后你就可以完成健壮可靠的项目了，接下来的内容可以让你的开发更加快速方便。
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 " > element-ui@2.4.10" has unmet peer dependency "vue@^2.5.2".
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 7 new dependencies.
info Direct dependencies
└─ element-ui@2.4.10
info All dependencies
├─ async-validator@1.8.5
... 一小点依赖 ...
└─ throttle-debounce@1.1.0
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地图介绍
网友评论