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文件
  

1. 185.199.108.133  raw.githubusercontent.com

复制代码

1. ### nvm安装及使用
2. curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
4. # 配置环境变量
5. export NVM_DIR="$HOME/.nvm"
6. [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh"
8. # 完成后输入nvm，出现node version manger表示安装成功
9. nvm
11. # 使用：
12. ## 1 安装node( nvm ls-remote  | grep 18 查看有哪些node版本)
13. nvm install 13.0.1
14. ## 2 查看是否安装成功
15. nvm list | grep 13
16. ## 3 切换版本
17. nvm use 13.0.1

复制代码

②配置npm

1. # 配置npm
2. npm config set registry https://registry.npmmirror.com  #设置国内阿里云镜像源
3. npm config get registry  #查看镜像源
5. npm init： 项目初始化；
6. npm init -y：默认一路yes，不用挨个输入信息
7. npm install 包名：安装js包到项目中（仅当前项目有效）。指定 包名，或者 包名@版本号
8. npm install -g： 全局安装，所有都能用
9. 可以去 npm仓库 搜索第三方库
10. npm update 包名：升级包到最新版本
11. npm uninstall 包名：卸载包
12. npm run：项目运行

复制代码

③安装vite（脚手架）

   vite：快速创建前端项目脚手架。包罗react、vue等项目
官网：https://cn.vitejs.dev

1. npm create vite #根据向导选择技术栈
3. npm install #安装项目所有依赖
5. npm install axios #安装指定依赖到当前项目
6. npm install -g xxx # 全局安装
8. # 项目启动
9. npm run dev #启动项目
11. # 项目打包
12. ## 前后分离方式：需要把 dist 文件夹内容部署到如 nginx 之类的服务器上。
13. ## 前后不分离方式：把 dist 文件夹内容复制到 SpringBoot 项目 resources 下面
14. npm run build #构建后 生成 dist 文件夹

复制代码

问题：假如出现报错：node:77305) Warning: require() of ES modules is not supported.，表明node版本过低不支持。通过nvm升级node版本即可。nvm use v18.20.2
④vue欣赏器插件：Vue.js devtools

利用：

⑤VSCode/WebStorm

   

• VSCode官网（轻量级）：https://code.visualstudio.com/Download
  
  
  
  

   

• WebStorm官网：https://www.jetbrains.com/webstorm/download/#section=mac
  
  
  
  

  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/