Mac快速搭建前端情况&创建前端项目【Vue】
Mac快速搭建前端情况&创建前端项目官网：
[*]vue：https://cn.vuejs.org/
[*]vue-router：https://www.axios-http.cn/
[*]pinia：https://pinia.vuejs.org/zh/getting-started.html
[*]axios：https://www.axios-http.cn/
[*]ant-design：https://www.antdv.com/
1 开发情况搭建
①安装node（nvm）
下载：https://nodejs.org/en
Mac可以安装配置nvm（管理node的工具）
[*]https://github.com/nvm-sh/nvm
[*]假如安装过程中出现443，表明大概被墙了
[*]解决：打开网站https://www.ipaddress.com/
查询一下 raw.githubusercontent.com对应的IP 地点，然后修改本机的vim /etc/hosts文件
185.199.108.133raw.githubusercontent.com
### nvm安装及使用
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
# 配置环境变量
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
# 完成后输入nvm，出现node version manger表示安装成功
nvm
# 使用：
## 1 安装node( nvm ls-remote| grep 18 查看有哪些node版本)
nvm install 13.0.1
## 2 查看是否安装成功
nvm list | grep 13
## 3 切换版本
nvm use 13.0.1
https://img-blog.csdnimg.cn/direct/dd6c8f5257414c16bfa7563ed48bd9f2.png
②配置npm
# 配置npm
npm config set registry https://registry.npmmirror.com#设置国内阿里云镜像源
npm config get registry#查看镜像源
npm init： 项目初始化；
npm init -y：默认一路yes，不用挨个输入信息
npm install 包名：安装js包到项目中（仅当前项目有效）。指定 包名，或者 包名@版本号
npm install -g： 全局安装，所有都能用
可以去 npm仓库 搜索第三方库
npm update 包名：升级包到最新版本
npm uninstall 包名：卸载包
npm run：项目运行
③安装vite（脚手架）
vite：快速创建前端项目脚手架。包罗react、vue等项目
官网：https://cn.vitejs.dev
npm create vite #根据向导选择技术栈
npm install #安装项目所有依赖
npm install axios #安装指定依赖到当前项目
npm install -g xxx # 全局安装
# 项目启动
npm run dev #启动项目
# 项目打包
## 前后分离方式：需要把 dist 文件夹内容部署到如 nginx 之类的服务器上。
## 前后不分离方式：把 dist 文件夹内容复制到 SpringBoot 项目 resources 下面
npm run build #构建后 生成 dist 文件夹
https://img-blog.csdnimg.cn/direct/6a3395918cc14e74a46dff90fa6deef1.png
问题：假如出现报错：node:77305) Warning: require() of ES modules is not supported.，表明node版本过低不支持。通过nvm升级node版本即可。nvm use v18.20.2
④vue欣赏器插件：Vue.js devtools
https://img-blog.csdnimg.cn/direct/9748ec05be4547c69acd88502a8e9c6b.png
利用：
https://img-blog.csdnimg.cn/direct/e1762c7fac094c53bc6e70bf1407c735.png
⑤VSCode/WebStorm
[*]VSCode官网（轻量级）：https://code.visualstudio.com/Download
https://img-blog.csdnimg.cn/direct/12c77f60d5614442a0e1d8d714873759.png
[*]WebStorm官网：https://www.jetbrains.com/webstorm/download/#section=mac
https://img-blog.csdnimg.cn/direct/de9756ec44e143d9932f203bec8fb61b.png
2 快速搭建浅易登录页面
利用技术：vue+vue-router-pinia+axios+ant-design
官网：
[*]vue：https://cn.vuejs.org/
[*]vue-router：https://www.axios-http.cn/
[*]pinia：https://pinia.vuejs.org/zh/getting-started.html
[*]axios：https://www.axios-http.cn/
[*]ant-design：https://www.antdv.com/
页:
[1]