Web大前端技术，是一项使用范围非常广泛的技术，以JavaScript脚本语言为主使用，由于其本身开源的特点，可以使用的轮子非常的多，一些特定轮子，具有不错的商业价值，本文介绍从布局开始，逐步介绍这些轮子，借鉴这些轮子。

1.Node环境安装

简单的说 Node.js就是以JavaScript为脚本语言的运行环境，基于 Chrome JavaScript 运行时建立的一个平台，Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境，基于 Google 的 V8 引擎，V8 引擎执行 Javascript 的速度非常快，性能非常好。
下载网址：https://nodejs.org/en
选一个稳定版本，下载安装即可。
输入命令：

node -v

如下图所示，测试是否安装成功。

2.Node环境配置

进入nodejs安装目录，cmd启动命令行，定位到该目录，如下图所示：

更新镜像为国内镜像数据源。这样下载包会快很多。在此安装目录下创建文件夹node_global和node_cache，作者是为了方便管理，在其它位置创建也可以，修改nodejs默认的全局文件夹和缓存文件夹为node_global和node_cache。如下所示：

npm config set registry https://registry.npmmirror.com #设置镜像
npm config get registry #查看镜像

#设置缓存目录
npm config set prefix "E:\work\CurrentProject\nodejs\node-v16.14.0-x86\node_global"
npm config set cache "E:\work\CurrentProject\nodejs\node-v16.14.0-x86\node_cache"

3.新建项目

新建空白项目目录，shell定位到该目录，输入如下命令，初始化包管理配置文件 package.json：

npm init -y

查看全局模块安装目录

npm root -g

4.安装常用包

4.1.vue安装

输入如下命令进行包安装

npm install vue -g
npm i @vue/cli -g

验证vue

vue -V

如下图所示：

然后使用webstorm创建vue项目，如下图所示：

注意项目名称不要使用大写字母，vue项目名称不允许使用大写字母。
成功之后如下所示：

4.2.安装webpack

webpack分成四个部分，期中最核心的就是入口和出口，当然在入口和出口配置的同时我们还需要一些加载器和插件，这就是我们所谓的webpack配置文件。这个配置文件我们习惯把其命名为webpack.config.js ，还有webpackfile.js 。详细配置在后文中详细描述。

npm install webpack -g
npm install --save-dev css-loader
npm install --save-dev style-loader
npm install --save-dev less-loader less
npm install --save-dev file-loader
npm install --save-dev babel #ES6转ES5的babel。

5.总结

前端简单显示到大前端复杂布局，这是一个大趋势，可以充分利用前端浏览器的计算能力来分担一部分工作，做到更有效的利用资源。