目录

npm（Node Package Manager）

💡tip
  • 全局安装：npm install -g <package-name> 安装位置：操作系统的系统目录（例如 macOS/Linux 的 /usr/local/lib/node_modules 或 Windows 的 %AppData%\npm\node_modules），而不是当前项目的 node_modules。安装后，该包的命令行工具（CLI）可以在任何目录下终端直接使用。package.json 无变化。不会记录在当前项目的 package.json 中。
  • 本地安装：npm install <package-name> 是将模块下载到当前命令行所在目录。安装位置：当前项目目录下的 node_modules 文件夹。只有当前项目可以使用。package.json 会记录依赖信息（配合 --save 系列参数）。

package.json

💡s
  • 依赖分类的本质是“运行时是否需要”。
    • 需要：代码逻辑里 import 了，浏览器或 Node 运行时需要它 → 写在 dependencies。
    • 不需要：只有构建、lint、测试时需要，运行代码时不需要 → 写在 devDependencies。
  • 一个包不可能既“运行时需要”又“运行时不需要”。
{
  "name": "my-project",  // 项目名
  "version": "1.0.0",   // 版本
  "description": "A sample project",  // 项目描述
  "main": "index.js",  // 主文件路径
  "scripts": {  // 脚本命令集合
    "start": "node index.js",
    "test": "mocha test/*.js"
  },
  "dependencies": {  // 生产依赖项
    "express": "^4.17.1"
  },
  "devDependencies": {  // 开发依赖项
    "mocha": "^9.1.3"
  },
  "author": "Your Name",  // 作者
  "license": "ISC"  // 许可证类型
}


{
  "name": "my-vue-project",
  "version": "1.0.0",
  "private": true,
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "eslint . --ext .vue,.js,.ts --ignore-path .gitignore"
  },
  "dependencies": {
    "vue": "^3.3.4",
    "vue-router": "^4.2.4",
    "pinia": "^2.1.6"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "vite": "^4.4.9",
    "typescript": "^5.0.2",
    "sass": "^1.63.6",
    "eslint": "^8.45.0",
    "eslint-plugin-vue": "^9.15.1"
  },
  "engines": {
    "node": ">=16.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

npm 相关配置

npm config set prefix "c:\00nodejs\nodejs\node_global" 
npm config set cache " c:\ 00nodejs\nodejs\node_cache"
npm config get prefix  //查看npm全局安装保存路径
npm config get cache   //查看npm安装缓存cache路径
ℹ️note

vite

前端运行逻辑

ESM

// 1. 静态结构 
// ✅ ESM 合法
import { foo } from './bar.js';

// ❌ ESM 非法 (SyntaxError)
if (condition) {
  import { foo } from './bar.js';
}

// ✅ CommonJS 合法
if (condition) {
  const foo = require('./bar');
}

// 2. live Bindings
// counter.js
export let count = 0;
setTimeout(() => { count = 1; }, 1000);

// main.js (ESM)
import { count } from './counter.js';
console.log(count); // 0
setTimeout(() => {
  console.log(count); // 1 (因为 count 是引用绑定，值变了这里也能看到)
}, 1500);
ℹ️note
  • 因为 ESM 是静态的，构建工具（Webpack/Vite/Rollup）可以在不执行代码的情况下，通过静态分析（Static Analysis）立刻画出完整的依赖图谱（Dependency Graph）。这是 Tree Shaking（摇掉无用代码）能实现的前提。

vite 原理

[浏览器] 
   | 1. 请求 <script src="/src/main.ts">
   v
[Vite Dev Server (Node.js)] <--- 这里发生“拦截”
   | 2. 中间件 (Middleware) 捕获请求
   | 3. 识别文件后缀 (.ts)
   | 4. 调用 Esbuild/SWC 将 TS 转为 JS
   | 5. 返回 Content-Type: application/javascript
   v
[浏览器] 接收到的已经是标准 JS 代码，直接执行

// 源代码
// src/main.ts
import React from 'react'; 
import { add } from './utils';

// 浏览器实际收到的 (URL 被重写了)
import React from '/node_modules/.vite/deps/react.js'; // ✅ 变成了浏览器能懂的路径
import { add } from './utils.js'; // ✅ 自动补全了后缀

vite 典型配置

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue' // 支持 .vue 文件
import { resolve } from 'path'

export default defineConfig({
  // 1. 基础配置
  root: '.',                    // 项目根目录
  base: mode === 'production' ? '/myapp/' : '/',  // 开发/生产资源基础路径, 以 / 开头和结尾
  mode: 'development',          // 模式（可被命令行覆盖）

  // 2. 插件
  // Vite 本身只处理原生 ES 模块，要支持 .vue、.tsx、PostCSS 等，必须通过插件
  plugins: [
    vue() // 支持 Vue 单文件组件
  ],

  // 3. 开发服务器配置
  server: {
    host: '0.0.0.0',           // 监听所有地址（局域网可访问）
    port: 3000,                // 端口
    open: true,                // 启动时自动打开浏览器
    cors: true,                // 启用 CORS
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },

  // 4. 构建配置
  build: {
    outDir: 'dist',             // 输出目录
    assetsDir: 'static',        // 静态资源目录
    sourcemap: false,           // 是否生成 sourcemap
    minify: 'terser',           // 压缩方式
    chunkSizeWarningLimit: 500, // 分块大小警告阈值（KB）
    rollupOptions: {            // 自定义 Rollup 打包配置（分包、入口等）
      input: {
        main: 'index.html',
        admin: 'admin.html'
      },
      output: {
        manualChunks: {
          vendor: ['vue', 'vue-router'],
          charts: ['echarts']
        }
      }
    }
  },

  // 5. 路径别名
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
      '@components': resolve(__dirname, 'src/components')
    }
  },

  // 6. 环境变量前缀，只有以 VITE_ 开头的环境变量才会被暴露到客户端
  envPrefix: 'VITE_'
})

相关概念

console.log(import.meta.env.MODE)

// Vite 在开发时替换为：
console.log('development')

// 在构建时替换为：
console.log('production')

interface ConfigEnv {
  mode: string        // 当前模式
  command: 'serve' | 'build'  // serve=开发，build=生产
  isPreview?: boolean // 是否是 vite preview
}

// main.js（运行在浏览器中）
console.log(import.meta.env.VITE_API_URL) // ✅ 输出: https://api.example.com
console.log(import.meta.env.SECRET_KEY)   // ❌ undefined

各种工具

Vue CLI（脚手架）

create-vue（脚手架）

Rollup（打包工具）

webpack（构建工具）

Vite（构建工具）

my-vue-app/
├── README.md
├── package.json
├── tsconfig.json
├── vite.config.ts
└── src/
    ├── assets/
    ├── components/
    ├── main.ts
    ├── App.vue
    └── index.html

init vs create

[开发者终端]
    │
    ├── 敲命令 (如 `vite`)
    │     │
    │     ├── 1. 查系统 PATH (全局安装目录) ✅ 优先
    │     └── 2. 找不到？ → 提示 npx 临时运行
    │
    └── 跑脚本 (如 `npm run dev`)
          │
          ├── 1. 查 ./node_modules/.bin (局部安装) ✅ 优先 (项目隔离)
          └── 2. 找不到？ → 查系统 PATH (全局安装) ⚠️ 不推荐依赖
          
[npx 命令]
    │
    └── 查 ~/.npm/_npx (缓存目录) → 下载 → 运行
          (不在 PATH 中，只能主动调用)