工程化实战
用 NPM 管理一个完整前端项目：装 Vue + 构建工具 + 依赖、写脚本、打包部署。这是现代前端开发的标配流程。
完整流程
- npm init -y 初始化
- 装 vue + vite（开发依赖）
- scripts 配 dev/build/preview
- npm run dev 开发，npm run build 打包
- dist 目录部署到 Nginx
代码示例
# 初始化并安装
npm init -y
npm install vue
npm install -D vite @vitejs/plugin-vue
# index.html + src/main.js + vite.config.js（略）
# vite.config.js
# import { defineConfig } from "vite";
# import vue from "@vitejs/plugin-vue";
# export default defineConfig({
# plugins: [vue()]
# });
# 跑起来
npm run dev # 开发：http://localhost:5173
npm run build # 构建：产出 dist/
# 部署 dist 到 Nginx
# sudo cp -r dist/* /var/www/html/📚 Shell 命令速查
常用条目速查，完整版见对应教程章节。可复制代码到在线运行中测试。
| 写法 / 语法 | 作用 |
|---|---|
ls / ls -la | 列出文件（-la 显示隐藏和详情） |
cd 目录 | 切换目录 |
pwd | 显示当前目录 |
mkdir -p 目录 | 创建目录（-p 自动建父级） |
touch 文件 | 创建空文件 |
cp -r 源 目标 | 复制（-r 递归复制目录） |
mv 源 目标 | 移动 / 重命名 |
rm -rf 目录 | 删除（危险，慎用） |
cat 文件 | 查看文件内容 |
less 文件 | 分页查看文件（q 退出） |
grep "关键词" 文件 | 按关键词搜索 |
find . -name "*.php" | 按名称查找文件 |
chmod 755 文件 | 修改权限 |
ps aux | 查看进程 |
kill 进程号 | 结束进程 |
top | 实时资源监控 |
df -h / free -m | 磁盘 / 内存占用 |
tar -czf a.tar.gz 目录 | 打包压缩 |
tar -xzf a.tar.gz | 解压 |
curl 网址 | 请求网址（测试接口） |
wget 网址 | 下载文件 |
ssh 用户@主机 | 远程登录 |
scp 文件 用户@主机:/路径 | 远程传文件 |
sudo 命令 | 以管理员执行 |
crontab -e | 编辑定时任务 |