前端框架

一、node.js

配置淘宝镜像源

1	npm config set registry https://registry.npm.taobao.org

可以使用npm config list命令来确认镜像地址是否已成功更改。

如果需要将配置的镜像恢复为默认的npm官方源，可以执行以下命令：

1	npm config delete registry

二、vue

1、创建Vue项目

1.1 使用Vue-CLI

https://blog.csdn.net/weixin_45647685/article/details/123557666

官网：https://cli.vuejs.org/zh/
Github：https://github.com/vuejs/vue-cli

Vue-CLI已经处于维护模式了，官方推荐使用Vite创建Vue项目。

使用Vue-CLI创建项目：

1 2	// 注意项目名不能大写 vue create xxx项目名

这里创建的是vue3项目

启动项目：

访问：http://localhost:8080/

1.2 使用Vite

GitHub：https://github.com/vitejs/vite
Vite官网：https://vitejs.dev/
文档：https://cn.vitejs.dev/guide/

Vite 是一个轻量级的、速度极快的构建工具，对 Vue SFC 提供第一优先级支持。使用 Vite 来创建一个 Vue 项目：

1	npm create vue@latest

或者，如果需要支持 IE11，可以使用以下命令创建 Vue 2 项目：

1	npm create vue@legacy

注意，标签名称（@latest 或 @legacy）不得省略，否则 npm 可能会解析为包的缓存且过时的版本。

这个命令会安装和执行 create-vue，它是 Vue 提供的官方脚手架工具。跟随命令行的提示继续操作即可。

运行：

1
2
3

npm install vite -g	# 全局安装vite
npm install # 安装依赖
npm run dev # 运行，或者直接点击package.json中 "dev": "vite"旁边的按钮

{
  "scripts": {
    "dev": "vite", // 启动开发服务器，别名：`vite dev`，`vite serve`
    "build": "vite build", // 为生产环境构建产物
    "preview": "vite preview" // 本地预览生产构建产物
  }
}

访问 http://localhost:5173/

1.3 可视化创建

https://blog.csdn.net/qq_38393535/article/details/125416107

可视化创建的Vue项目是基于 Vue-CLI 的，即在vue cli的基础上封装而成的

vue ui

这里创建的是Vue3项目。

添加插件router

启动项目：

访问 http://localhost:8080/ 路径中默认会带个符号#，可以在路由 index.js 中修改

2、与后台交互

2.1 基本步骤

Spring Boot后端和Vue前端项目之间可以通过以下步骤进行交互:

（1）Spring Boot项目配置

使用Spring MVC开发RESTful API接口
在Application类添加@RestController注解开启Web功能
定义接口如@GetMapping返回JSON数据
启动项目后会自动注册Swagger文档

（2）Vue项目配置

使用npm添加axios依赖发起HTTP请求
根据接口定义发GET/POST等请求
在main.js入口文件全局引入axios

（3）跨域处理

在Spring Boot后端添加CorsFilter跨域处理
或者返回Header中加入Access-Control-Allow-Origin

（4）请求封装

在Vue中封装接口请求函数export出去
使用try/catch处理异常返回

（5）数据交互

前端发起请求,后端返回JSON数据
前端解析JSON数据进行页面渲染

（6）调试跨域

使用Chrome开发者工具、Network查看网络请求
Spring Boot后端打印日志调试请求参数

（7）发布部署

Spring Boot打war包部署到Tomcat等应用服务
Vue项目打包构建生成静态文件
Nginx反向代理前端应用与后端API

2.2 Vue-CLI与后台交互

2.3 Vite与后台交互

三、React

GitHub：https://github.com/facebook/react
官网：https://react.dev/
中文官网：https://react.docschina.org/
笔记：https://dayudn.gitee.io/2022/11/27/react%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/#

React是Facebook开发的一个前端开源库,用于高效构建用户界面的MVC框架。2013年6月:React 0.1版本发布。

创建 React 脚手架项目：

1
2
3

npx create-react-app demo
cd demo
yarn start

访问：http://localhost:3000/

四、ant design

官网：https://ant-design.antgroup.com/index-cn

Vue版本

Ant Design Vue

https://github.com/vueComponent/ant-design-vue-pro

https://pro.antdv.com/

react版本

Ant Design of React

https://github.com/ant-design/ant-design-pro

https://pro.ant.design/zh-CN/

UmiJS

Ant Design是一个中台设计语言和Vue/React实现库。

下面这个参考：https://blog.csdn.net/z449077880/article/details/114255870 使用的是umi，而不是ant-design pro框架
1
2
npm create umi
# 文档 https://umijs.org/docs/guides/routes
执行
1
yarn start

搭建ant-design-vue-pro

1	git clone --depth=1 https://github.com/vueComponent/ant-design-vue-pro.git ant-design-vue-pro

1	yarn install

1	yarn run serve

nodejs版本如果高于17，运行时可能会出现这个错误

1	Error: error:0308010C:digital envelope routines::unsupported

解决https://www.cnblogs.com/asplover/p/17188483.html，在 package.json 中修改

scripts": {
  "serve": "vue-cli-service serve",
  ……
  }

1
2
3

scripts": {
    "serve": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service serve",
}

访问http://localhost:8000/

开发文档：https://pro.antdv.com/docs/getting-started

五、element UI

官网：vue2 https://element.eleme.cn/#/zh-CN vue3 https://element-plus.org/zh-CN/#/zh-CN
文档：vue2 https://element.eleme.cn/#/zh-CN/component/installation vue3https://element-plus.org/zh-CN/guide/quickstart.html

Element UI是一个基于Vue.js开发的监控视图组件库。

六、material-ui

官网：https://mui.com/
第3版：https://v3.mui.com/getting-started/installation/
第4版：https://v4.mui.com/zh/getting-started/installation/
第5版：https://mui.com/material-ui/getting-started/

Material-UI是一个基于Material Design开发的React UI组件库。