npm i -g @vue/cli-init 区别 pm install -g vue-cli

在Ubuntu上搭建Vue环境，可以按照以下步骤进行操作: 1. 首先，更新软件源和软件列表，可以在命令行中输入以下命令来完成： sudo apt update 2. 安装Node.js，可以在命令行中输入以下命令来完成： sudo apt install nodejs 3. 检查Node.js的版本，可以在命令行中输入以下命令来完成： node -v 4. 安装npm (Node包管理器)，可以在命令行中输入以下命令来完成： sudo apt install npm 5. 检查npm的版本，可以在命令行中输入以下命令来完成： npm -v 6. 由于npm的下载速度较慢，建议安装cnpm (淘宝镜像的npm)，可以在命令行中输入以下命令来完成： sudo npm install -g cnpm --registry=https＊＊＊pm -v 8. 安装Vue脚手架工具vue-cli，可以在命令行中输入以下命令来完成： sudo cnpm install -g vue-cli 9. 检查Vue的版本，可以在命令行中输入以下命令来完成： vue -V 10. 创建Vue项目，可以在命令行中输入以下命令来完成： sudo vue init webpack demo 11. 进入项目文件夹，可以在命令行中输入以下命令来完成： cd demo 12. 安装项目依赖，可以在命令行中输入以下命令来完成： sudo cnpm install 13. 运行项目，可以在命令行中输入以下命令来完成： sudo npm run dev 至此，你的Vue环境已经搭建完成。你可以通过访问项目的地址来查看项目。请注意，这个地址只能在你的电脑上进行访问。如果你想要在服务器上部署Vue项目以便外网访问，请参考相关教程。

### 项目结构设计 在开始开发之前，需要明确前后端项目的结构。通常基于 Vue3 和 Node.js 的项目可以分为两个独立的部分： - **前端部分**：使用 Vue3 框架构建用户界面，通常使用 Vite 或 Vue CLI 进行项目初始化。 - **后端部分**：使用 Node.js 构建 API 接口服务，通常搭配 Express、Koa 等框架实现 RESTful API。 ### 前端（Vue3）搭建步骤 1. 安装 `vite` 脚手架工具： ```bash npm install -g create-vite ``` 2. 创建 Vue3 项目： ```bash create-vite my-vue-app --template vue cd my-vue-app npm install ``` 3. 启动本地开发服务器： ```bash npm run dev ``` 4. 使用 Axios 发送 HTTP 请求与后端交互： ```javascript import axios from 'axios'; const apiClient = axios.create({ baseURL: 'http://localhost:3000', // Node.js 服务的地址 timeout: 5000, }); export default { getExampleData() { return apiClient.get('/api/example'); } }; ``` ### 后端（Node.js）搭建步骤 1. 初始化 Node.js 项目： ```bash mkdir my-node-server cd my-node-server npm init -y ``` 2. 安装 Express 并创建基本服务器： ```bash npm install express ``` 创建 `server.js` 文件： ```javascript const express = require('express'); const app = express(); const port = 3000; app.use(express.json()); app.get('/api/example', (req, res) => { res.json({ message: 'Hello from the backend!' }); }); app.listen(port, () => { console.log(`Server is running on http://localhost:${port}`); }); ``` 3. 启动服务器： ```bash node server.js ``` ### 前后端交互配置 1. **跨域请求处理**：由于前端和后端运行在不同的端口上（如前端 `localhost:5173`，后端 `localhost:3000`），需要配置跨域支持[^2]。在 Express 中可以使用 `cors` 插件： ```bash npm install cors ``` 修改 `server.js`： ```javascript const cors = require('cors'); app.use(cors()); ``` 2. **接口调用测试**：在 Vue3 组件中调用后端接口并展示数据： ```vue <script setup> import { ref, onMounted } from 'vue'; import api from './services/api'; const message = ref(''); onMounted(async () => { try { const response = await api.getExampleData(); message.value = response.data.message; } catch (error) { console.error('Error fetching data:', error); } }); </script> <template> <div>{{ message }}</div> </template> ``` ### 部署建议 - **前端部署**：将 Vue3 项目打包为静态文件： ```bash npm run build ``` 将生成的 `dist` 文件夹部署到 Nginx、Apache 或 CDN 上。 - **后端部署**：将 Node.js 应用部署到服务器（如使用 PM2 管理进程）： ```bash npm install pm2 -g pm2 start server.js ``` - **集成部署方案**：也可以将前端静态资源整合进后端服务中，例如通过 Express 提供静态资源： ```javascript app.use(express.static(path.join(__dirname, '../my-vue-app/dist'))); app.get('*', (req, res) => { res.sendFile(path.join(__dirname, '../my-vue-app/dist/index.html')); }); ```