此帖长期维护，各大框架更新都会体现，建议 收藏
本文讲解 在不报培训班的情况下，如何快速入门 WEB主流脚手架（CLI）搭建。
这篇文章新手不要妄想一次看完，慢慢看，可以收藏起来，一天看一个，然后实战一个。
一、难点
- WEB前端开发，新手最蛋痛的莫过于如何部署发布网站，全都是各种服务配置，还得学习windows server、linux等等。
- 更蛋痛的是学习WEB三大框架的时候还得搭建各种脚手架、编辑器、编辑器插件、软件破解一些问题。“满脑子都是问号和啥也不会。”
本文根据各大框架的历史排序，介绍了Angular、React、Vue 、Uisys 四大有技术含量的WEB开发方案。
二、 环境搭建
1. Angular2
有小伙伴纠结是不是该叫AngluarJS2，其实不是的，可能作者觉得不好听了，所以出第二版的时候就叫Angluar了，没有后面JS了，但是AngularJS 和 Angular 是一个框架，只是版本不同，如果深究Angluar为 AngluarJS 的第二版，功能变化很大哦，但是我看官网的名称上还叫AngularJS。
1.1 下载地址
第一步 下载 nodejs，点这里从官网下，选择下载 Recommended For Most Users 那个按钮。
1.2 安装
第一步 安装 nodejs，运行 nodejs 安装包，下一步、下一步…即可。
第二部 进入 CMD, 在键盘上按 WIN + R，在弹出的 运行 输入框 输入 cmd，然后回车。
第三步 安装 cnpm，输入命令 npm install -g cnpm --registry=https://registry.npm.taobao.org （国内开发者的下载速度慢，所以要安装）
第四步 安装 angular-cli，这是Angular的脚手架（辅助开发环境），在刚弹出来 CMD里面输入 cnpm install -g @angular/cli
第五部 查看 angular 版本，在 CMD 输入 ng version，命令列表如下：
$ npm install -g @angular/cli #终端执行安装 angular-CLI'
# 可能刚输入没有反应
Downloading @angular/cli to ~\AppData\Roaming\npm\node_modules\@angular\cli_tmp
Copying ...
#查看版本
$ ng version
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 9.1.3
Node: 12.16.1
OS: win32 x64
Angular:
...
Ivy Workspace:
Package Version
------------------------------------------------------
@angular-devkit/architect 0.901.3
@angular-devkit/core 9.1.3
@angular-devkit/schematics 9.1.3
@schematics/angular 9.1.3
@schematics/update 0.901.3
rxjs 6.5.5
1.3 运行
第一步 切换到 D:/ng/my-web/ 目录下（这个目录需要自己创建）。
第二步 创建一个工程，在CMD 里面输入 ng new my-web 命令。
（注意：第二步可能下载类库的时候特别慢，这时候你可以Ctrl + C 停止项目构建，然后用cnpm来构建项目，即在当前目录下输入cnpm install，这样类库就从国内镜像下载了）
第三步 启动工程，在刚才的 CMD 里面输入 npm start，启动成功后记住CMD里面提示的URL地址。
第四步 打开浏览器（可以不用打开，他也自己弹出浏览器的），输入 刚才CMD里的地址。
# 切换到D:/ng/my-web 目录下
$ cd D:/ng/my-web/
$ npm start
> [email protected] start D:\angular\my-web
> ng serve
Compiling @angular/animations : es2015 as esm2015
Compiling @angular/animations/browser/testing : es2015 as esm2015
Compiling @angular/animations/browser : es2015 as esm2015
Compiling @angular/common : es2015 as esm2015
Compiling @angular/common/http/testing : es2015 as esm2015
...
** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
: Compiled successfully.
2. React
React 是 facebook 退出的WEB框架，不过说起原理不能单纯说是框架，应该是WEB语言的升级，也就是改造了HTML的写法，其内部增加了渲染解析器，因此它并不能说是传统的框架（传统的框架都是建立在浏览器端，而React已经引入了服务端渲染的概念，这和后面要介绍的UISYS的思想是很像的）。
React 的 WEB解决方案也很完善，还提出了很多UI设计思想，例如flux。
2.1 下载地址
第一步 下载 nodejs，点这里从官网下，选择下载 Recommended For Most Users 那个按钮。
2.2 安装
安装 nodejs，运行 nodejs 安装包，下一步、下一步…即可。
react 可以采用 npx 命令构建，使用起来不用特意去安装cli（脚手架）,这点是很方便的。
因此这里我们仅需要安装nodejs即可。
2.3 运行
第一步 部 进入 CMD, 在键盘上按 WIN + R，在弹出的 运行 输入框 输入 cmd，然后回车。
第二步 切换到 D:\\react\ 目录下（自己创建这个目录），输入命令 npx create-react-app my-app
$ npx create-react-app my-app
npx: installed 98 in 149.303s
Creating a new React app in D:\react\my-app.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
> [email protected] postinstall D:\react\my-app\node_modules\babel-runtime\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> [email protected] postinstall D:\react\my-app\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"
> [email protected] postinstall D:\react\my-app\node_modules\core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"
+ [email protected]
+ [email protected]
+ [email protected]
+ [email protected]
added 1605 packages from 750 contributors and audited 931194 packages in 730.609s
58 packages are looking for funding
run `npm fund` for details
第三步，进入项目，通过 npm start 启动项目。
# 切换到项目内
$ cd my-react
# 启动项目
$ npm start
# 等待启动
> [email protected] start D:\react\my-app
> react-scripts start
You can now view my-app in the browser.
Local: http://localhost:3000
On Your Network: http://10.110.13.98:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
运行结果如下：
3. Vue
Vue 也是个不错的框架，思路比较清晰简洁，Github的关注超越React，很多人被“安利”过来的。有趣的是我身边接触的“安利”人都是后端人员，因为Vue相比上面两个学习成本低，所以很多人都跟从了，这对刚入门的新手简直是巨大的诱惑。
多说一句，框架的适用性不能光看难易，比如 Angluar，新手刚学可能都没看明白，但是并不代表Angluar 难，而是新手不懂的开发流程和团队配合，根本就不理解里面的东西，所以学习Angular就看不懂。
3.1 下载地址
第一步 下载 nodejs，点这里从官网下，选择下载 Recommended For Most Users 那个按钮。
3.2 安装
第一步 安装 nodejs，运行 nodejs 安装包，下一步、下一步…即可。
第二部 进入 CMD, 在键盘上按 WIN + R，在弹出的 运行 输入框 输入 cmd，然后回车。
第三步 安装 cnpm，输入命令 npm install -g cnpm --registry=https://registry.npm.taobao.org （国内开发者的下载速度慢，所以要安装）
第四步 安装 Vue-cli，这是Vue的脚手架（辅助开发环境），在刚弹出来 CMD里面输入 cnpm install -g @vue/cli
最后检查下安装是否成功，可以查看 vue 版本，在 CMD 输入 vue -V，命令列表如下：
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g @vue/cli #终端执行安装 Vue-CLI'
vue -V #查看版本
3.3 运行
第一步 切换到 D:/vue/ 目录下（这个目录需要自己创建）。
第二步 创建一个工程，在CMD 里面输入 vue create myweb 命令。
第三步 启动工程，在刚才的 CMD 里面输入 npm run serve，启动成功后记住CMD里面提示的URL地址。
第四步 打开浏览器（可以不用打开，他也自己弹出浏览器的），输入 刚才CMD里的地址。
$ vue create myweb
#可能会问你是否使用taobao镜像下载项目的类库，按 回车键 默认即可
Vue CLI v4.3.1
✨ Creating project in D:\\myweb.
⚙️ Installing CLI plugins. This might take a while...
# 这块需要从互联网下载类库，需要等挺长时间，耐心些。
> [email protected] install D:\\myweb\node_modules\yorkie
> node bin/install.js
setting up Git hooks
can't find .git directory, skipping Git hooks installation
> [email protected] postinstall D:\\myweb\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){
}"
> [email protected] postinstall D:\\myweb\node_modules\ejs
> node ./postinstall.js
added 1192 packages from 845 contributors in 283.722s
40 packages are looking for funding
run `npm fund` for details
� Invoking generators...
� Installing additional dependencies...
added 54 packages from 39 contributors in 36.723s
42 packages are looking for funding
run `npm fund` for details
⚓ Running completion hooks...
� Generating README.md...
� Successfully created project myweb.
� Get started with the following commands:
$ cd myweb
$ npm run serve
# 按照上面的最后提示命令提示输入
$ cd myweb
$ npm run serve
# 这块需要编译需要等待一段时间
DONE Compiled successfully in 5802ms
App running at:
- Local: http://localhost:8080/
- Network: http://10.110.13.98:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
4. airoot-uisys
uisys 的定位不是框架，它可以快速开发出框架，号称 “A powerful web ui tool”,强大的UI工具。
它是一个工具解决方案，你可以在其上用标准的HTML语言实现模块化、BEM、MVVM。
相比前面框架，uisys不需像React那样的虚拟DOM层，uisys直接切入浏览器BOM层。
感兴趣的话查看我的这篇文章 airoot-uisys” 释放前端开发活力
4.1 下载地址
地址 1. 国内的开发者到 Gitee 点这下载最新Release版本
地址 2. 国外的开发者到 Github 点这下载最新Release版本
4.2 安装
直接解压 airoot-uisys-v1.x.zip 就可以用了。
4.3 运行
第一步 我们新建一个文件，然后保存为 Demo.ui 到 D:/myweb/，在里面编写如下代码：
<!-- 保存到 D:/myweb/Demo.ui -->
<@pub/>
<h1>Hello World!</h1>
第二步 打开 uisys.exe , 在命令行里面输入：pub D:/myweb/ 命令。
第三步 打开浏览器输入 http://localhost/Demo.ui
pub D:/myweb/
Hello World!
当然，uisys 也提供了脚手架的创建项目方式，可以在命令行里输入如下命令：
# 创建 myweb01 项目
$ ctp myweb01
The [a0] added successfully.
The [a0] setted in [D:\\myweb01].
The project mount at[a0] server.
$ run a0 :90
The [a0] starting at [:90]
web server is a ui-system server.
WEB Server Started At: [:90]. Use protocol http
输入 http://localhost:90/
三、发布
1. Angular2
# 切换到工程目录内 cd D:/vue/myweb/
$ npm run build
> [email protected] build D:\angular\myweb
> ng build
Compiling @angular/common/http/testing : es2015 as esm2015
Compiling @angular/router/testing : es2015 as esm2015
Compiling @angular/platform-browser-dynamic/testing : es2015 as esm2015
Compiling @angular/platform-browser/animations : es2015 as esm2015
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.
chunk {
runtime} runtime-es2015.js, runtime-es2015.js.map (runtime) 6.16 kB [entry] [rendered]
chunk {
runtime} runtime-es5.js, runtime-es5.js.map (runtime) 6.16 kB [entry] [rendered]
chunk {
polyfills} polyfills-es2015.js, polyfills-es2015.js.map (polyfills) 141 kB [initial] [rendered]
chunk {
styles} styles-es2015.js, styles-es2015.js.map (styles) 12.9 kB [initial] [rendered]
chunk {
styles} styles-es5.js, styles-es5.js.map (styles) 14.4 kB [initial] [rendered]
chunk {
main} main-es2015.js, main-es2015.js.map (main) 56.5 kB [initial] [rendered]
chunk {
main} main-es5.js, main-es5.js.map (main) 58.9 kB [initial] [rendered]
chunk {
polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 689 kB [initial] [rendered]
chunk {
vendor} vendor-es2015.js, vendor-es2015.js.map (vendor) 2.4 MB [initial] [rendered]
chunk {
vendor} vendor-es5.js, vendor-es5.js.map (vendor) 2.79 MB [initial] [rendered]
Date: 2020-05-04T02:55:20.845Z - Hash: 2e08e84e67890ecf6b12 - Time: 49968ms
最后 D:\angular\myweb\dist\myweb 就是你的发布目录，直接考到nginx、tomcat、iis 下都可以。
2. React
# 切换到工程目录内 cd D:/react/my-app/
$ npm run build
> [email protected] build D:\react\my-app
> react-scripts build
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
39.39 KB build\static\js\2.b13ae2ad.chunk.js
771 B build\static\js\runtime-main.6a2302b0.js
646 B build\static\js\main.e25d084d.chunk.js
556 B build\static\css\main.d1b05096.chunk.css
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
Find out more about deployment here:
bit.ly/CRA-deploy
最后 D:/react/my-app/build/ 就是你的发布目录，直接考到nginx、tomcat、iis 下都可以。
3. Vue
# 切换到工程目录内 cd D:/vue/myweb/
$ npm run build
> [email protected] build D:/vue/myweb/
> vue-cli-service build
/ Building for production...
DONE Compiled successfully in 15497ms
File Size Gzipped
dist\js\chunk-vendors.b4c61135.js 89.16 KiB 31.92 KiB
dist\js\app.b6d8c892.js 4.62 KiB 1.65 KiB
dist\css\app.fb0c6e1c.css 0.33 KiB 0.23 KiB
Images and other types of assets omitted.
DONE Build complete. The dist directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
最后 D:/vue/myweb/dist 就是你的发布目录，直接考到nginx、tomcat、iis 下都可以。
4. airoot-uisys
# 查看项目在 airoot-uisys 内的挂在节点
$ ls
1. a0 Running 2020-04-29 09:28:10 D:\\myweb http://0.0.0.0:80/
----list over----
# 发布这个节点到指定目录
$ a0 release D:/myweb-release
release a0 D:/myweb-release
copy static file to [D:/myweb-release].
copy completed.
export:\Index | 8ms
use time: 27ms
----Release Complete----
最后 D:/myweb-release 就是你的发布目录，直接考到nginx、tomcat、iis 下都可以。
注意 uisys 发布的包要放在服务器的根目录发布，因为uisys里面的资源获取很多都是以 “/” 开头的。
扩展
uisys本身也支持作为静态服务器，因为uisys采用的Go HTTP Server，并发能力非常棒。
如果想用uisys作为静态服务器可以输入以下命令：
# 发布一个目录作为网站
$ pub D:/myweb-release :8080 -s
The [p1] setted in [D:\myweb-release].
The [p1] starting at [:8080]
web server is a static server.
WEB Server Started At: [:8080]. Use protocol http
最后 访问 http://localhost:8080
四、总结
总体来说，angular、react、vue 搭建环境的话都得需要安装nodejs，毕竟nodejs的兴起才带动cli的编写。三种框架的脚手架搭建大同小异，指的一体的时候react搭建更加人性化，不需要下载脚手架就可以初始化一个工程，这点其他两个就逊色了。
另外angular国内的网速确实很慢，我的很多同事都下不来类库，react和vue能强不少，速度还不错，建议国内就是用代理下载吧（上面的举例已经说明代理的设置）。
uisys的搭建最为简单，就是一个exe程序下来就可以用，并且自带web服务器，可以支持多个项目同时跑，对项目的挂在控制的非常到位，而且及支持原生项目的创建方式，也支持脚手架命令的模式，非常自由。
OK，给大家介绍这么多，后续还会有更新。
** 关注我！给我动力小伙伴们！**