前端项目技术栈总结

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

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

img_c98e86139ea77478c172e5c1b33473f7.png
前端技术栈

概述

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

在阅读本文时可以参考 - 项目实践源码

img_83b576425d46ca1b3438aca82f9eb2ad.gif
效果展示

基础

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

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,这里完全取决于你。
下载地址

img_731ab7bd74d9a3ba31c458c3099724f1.png
官网截图

ESLint - 代码风格检查

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

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

架构

vue - 主体框架

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

img_bdfad56068c39cb19f9e32fee9168557.png
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地图介绍

目录
相关文章
|
5天前
|
JSON 前端开发 API
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
29 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
|
14天前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
37 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
16天前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
121 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
24天前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
75 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
26天前
|
缓存 前端开发 IDE
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
27 0
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
27天前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
116 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
29天前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
79 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
1月前
|
前端开发 Java 开发工具
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
81 18
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
|
1月前
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
36 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
2月前
|
人工智能 移动开发 前端开发
WeaveFox:蚂蚁集团推出 AI 前端智能研发平台,能够根据设计图直接生成源代码,支持多种客户端和技术栈
蚂蚁团队推出的AI前端研发平台WeaveFox,能够根据设计图直接生成前端源代码,支持多种应用类型和技术栈,提升开发效率和质量。本文将详细介绍WeaveFox的功能、技术原理及应用场景。
1517 66
WeaveFox:蚂蚁集团推出 AI 前端智能研发平台,能够根据设计图直接生成源代码,支持多种客户端和技术栈

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    详解智能编码在前端研发的创新应用
  • 5
    巧用通义灵码,提升前端研发效率
  • 6
    智能编码在前端研发的创新应用
  • 7
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 8
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
  • 10
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    29
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    51
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    93
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    141
  • 6
    详解智能编码在前端研发的创新应用
    96
  • 7
    智能编码在前端研发的创新应用
    83
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    121
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75