ubuntu下js框架如何搭建 - 问答

Ubuntu 下搭建常见 JS 框架的实用步骤

一准备环境

更新系统并安装基础工具：
- sudo apt update && sudo apt upgrade -y
- sudo apt install -y curl wget git build-essential
安装 Node.js 与 npm（两种常用方式，择一即可）：
- 使用 NodeSource 仓库安装（示例为 Node.js 14.x，如需其他版本将 14.x 替换为目标版本）：
  - curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -
  - sudo apt install -y nodejs
- 使用 Ubuntu 官方仓库安装：
  - sudo apt install -y nodejs npm
验证安装：
- node -v
- npm -v
可选优化：使用国内镜像加速（如 npmmirror）提升安装速度：
- npm config set registry https://registry.npmmirror.com
- 如需全局使用 cnpm：npm install -g cnpm --registry=https://registry.npmmirror.com

二搭建 Express 后端

初始化项目并安装依赖：
- mkdir my-express-app && cd my-express-app
- npm init -y
- npm install express
创建入口文件 server.js：
- const express = require(‘express’); const app = express(); const port = 3000; app.get(‘/’, (req, res) => res.send(‘Hello Express’)); app.listen(port, () => console.log(Server running at http://localhost:${port}/));
启动与热更新：
- 开发：node server.js
- 生产：使用进程管理工具 PM2
  - npm install -g pm2
  - pm2 start server.js --name “my-express”
可选：开放防火墙端口（如需外网访问）
- sudo ufw allow 3000
- 如需 HTTP/HTTPS：sudo ufw allow 80,443 && sudo ufw enable

三搭建 Vue 前端

全局安装 Vue CLI（Vue 3 推荐）：
- npm install -g @vue/cli
创建与启动项目：
- vue create my-vue-app
- cd my-vue-app
- npm run serve（开发环境，默认端口 8080）
生产构建与部署（配合 Nginx）：
- npm run build（生成 dist 目录）
- 将 dist 内容拷贝至 Nginx 站点目录（如 /var/www/html）
- 配置 Nginx（示例）：
  - server { listen 80; server_name your-domain.local; root /var/www/html; index index.html; location / { try_files $uri $uri/ /index.html; } }
- 重启 Nginx：sudo systemctl restart nginx

四搭建 React 前端 Umi Ant Design

环境要求：Node.js ≥ 10.13
初始化与启动：
- npx @umijs/create-umi-app
- cd my-umi-app && npm i
- npm start（默认端口 8000）
集成 Ant Design 与 Umi UI：
- npm i antd @umijs/preset-ui
- 在 .umirc.ts 中启用：
  - export default defineConfig({ dva: {}, antd: {} });
- 启动后在浏览器右下角可使用 Umi UI 快速生成页面与配置路由

五常见问题与建议

0 赞

0 踩