【苍穹外卖】Day01—Mac前端环境搭建

目录

一、安装Nginx

(一)安装Homebrew

(二)Homebrew安装Nginx

1. 执行安装命令:

2. 验证安装:

(三)启动与停止Nginx

二、配置Nginx

1. 替换nginx.conf

2. 替换html文件夹

三、重启Nginx测试


一、安装Nginx

(一)安装Homebrew

若尚未安装Homebrew,需先执行以下命令(推荐国内用户使用镜像加速):

/bin/bash -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

安装完成后验证:

brew -v  # 输出版本号即成功  [1](@ref) [33](@ref)

(二)Homebrew安装Nginx

1. 执行安装命令

brew install nginx

安装完成后会提示关键路径:

  • 配置文件:/opt/homebrew/etc/nginx/nginx.conf (Intel芯片可能为/usr/local/etc/nginx/nginx.conf
  • 默认网页目录:/opt/homebrew/var/www 可通过brew info nginx查看具体路径

2. 验证安装

nginx -v  # 输出版本号即成功

(三)启动与停止Nginx

  • 启动
brew services start nginx  # 后台服务模式 
  • 停止
brew services stop nginx    # 终止后台服务
  • 重启/重载配置
brew services restart nginx

二、配置Nginx

1. 替换nginx.conf

右键访达,点击前往文件夹

输入nginx配置文件路径 /opt/homebrew/etc/nginx/,回车进入文件夹

把文件夹中的nginx.conf替换成资料里的nginx.conf

资料的nginx.conf:

直接拖到这里,替换

2. 替换html文件夹

前往/opt/homebrew/Cellar/nginx/1.27.5 (后面换成自己安装的版本)

还是把资料里的html文件夹替换这里的html文件夹,就成功了。

三、重启Nginx测试

brew services restart nginx   //重启nginx

打开浏览器输入:localhost:8080,下面页面正常显示代表前端部署成功

完结撒花🎉

### 苍穹外卖项目前端环境搭建概述 苍穹外卖项目的前端环境搭建通常会在后续的课程中详细介绍。根据已知的信息,该项目是一个基于微服务架构的设计案例[^2],其中涉及多个模块之间的协作。以下是关于 **苍穹外卖项目前端环境搭建 (Day 2)** 的可能内容及相关技术栈。 #### 技术准备 在进行前端开发之前,需要确保以下工具和技术已经安装并配置完成: - Node.js 和 npm/yarn:用于管理前端依赖项。 - Vue.js 或 React.js:作为主流的前端框架之一,Vue.js 更适合初学者快速上手[^1]。 - Element Plus 或 Ant Design Vue:UI 组件库的选择取决于团队的技术偏好和需求。 #### 环境搭建步骤说明 虽然具体的 Day 2 教程未提供,但可以推测其核心内容如下: 1. **初始化前端项目** 使用 `vue-cli` 初始化一个新的 Vue 项目或者通过脚手架工具创建基础结构。 ```bash vue create front-end-project cd front-end-project ``` 2. **集成 API 接口文档工具** 利用 Knife4j 工具生成后端接口文档,并将其嵌入到前端开发流程中以便于调试。 3. **引入 UI 库** 安装并配置前端所需的组件库,例如 Element Plus。 ```bash npm install element-plus --save ``` 配置文件中加载样式表: ```javascript import { createApp } from 'vue'; import App from './App.vue'; import ElementPlus from 'element-plus'; import 'element-plus/dist/index.css'; const app = createApp(App); app.use(ElementPlus); app.mount('#app'); ``` 4. **对接后端服务** 创建 Axios 实例来处理 HTTP 请求并与后端交互。 ```javascript import axios from 'axios'; export default axios.create({ baseURL: '/api', // 后端服务地址 timeout: 5000, }); ``` 5. **路由配置** 设置页面跳转逻辑,支持动态参数传递等功能。 ```javascript import { createRouter, createWebHistory } from 'vue-router'; import Home from '@/views/Home.vue'; const routes = [ { path: '/', name: 'Home', component: Home, }, ]; const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes, }); export default router; ``` #### 测试运行 启动本地服务器验证环境是否正常工作。 ```bash npm run serve ``` --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值