Node.js 入门-EW帮帮网

主要参考资料：
nodejs官网: https://nodejs.org/zh-cn
deepseek:使用 Vite 搭建 Vue 3 项目的完整指南

一、什么是 Node.js？

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，让 JavaScript 可以脱离浏览器在服务端运行。它发布于2009年，彻底改变了 JavaScript 只能做网页特效的刻板印象。

主要特点：

事件驱动和非阻塞 I/O 模型
轻量高效，适合高并发场景
统一前后端开发语言（JavaScript）
拥有最大的开源生态系统（npm）

二、包管理器 npm

npm（Node Package Manager）是 Node.js 的默认包管理器，全球最大的开源库生态系统，包含超过 200 万个可重用代码包。

# 初始化项目（生成 package.json）
npm init -y

# 安装生产依赖
npm install lodash

# 安装开发依赖
npm install vite --save-dev

# 运行脚本
npm run dev

三、构建工具 Vite

3.1 为什么选择 Vite？

传统工具（如 Webpack）痛点：

冷启动慢（需打包所有资源）
热更新效率低（全量重载）

Vite 解决方案：

基于原生 ES Modules
按需编译（启动仅处理入口文件）
使用 esbuild 预构建依赖

3.2 快速创建项目

npm create vite@latest my-project
cd my-project
npm install
npm run dev

项目结构说明：
├── node_modules/ # 依赖库
├── public/ # 静态资源
├── src/ # 源代码
│ ├── main.js # 入口文件
│ └── App.vue # 根组件
├── index.html # 页面模板
└── vite.config.js # 配置文件

3.3 核心优势

闪电般启动：毫秒级冷启动
即时热更新：保持应用状态的热替换
开箱即用：
TypeScript 支持
CSS 预处理器
文件系统路由
多框架支持：Vue、React、Svelte 等

四、使用 Vite 搭建 Vue 3 项目的完整指南

4.1 环境准备

Node.js 18+ （推荐使用 LTS 版本）
包管理器：npm 9+ / yarn 1.22+ / pnpm 7+
代码编辑器：VS Code（推荐安装 Volar 扩展）

检查环境

node -v
# 应显示 v18.x.x 或更高版本

npm -v
# 应显示 9.x.x 或更高版本

4.2 项目初始化

4.2.1 快速创建项目

npm create vite@latest vue-demo -- --template vue
cd vue-demo
npm install

4.2.2 项目结构解析

├── public/ # 静态资源目录
│ └── favicon.ico
├── src/
│ ├── assets/ # 动态资源（图片、字体等）
│ ├── components/ # 公共组件
│ ├── App.vue # 根组件
│ └── main.js # 应用入口
├── index.html # 主页面模板
├── package.json # 项目配置
├── vite.config.js # Vite 配置文件
└── .gitignore # Git 忽略规则

4.3 配置文件详解

4.3.1 vite.config.js 基础配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
  server: {
    port: 5173,         // 开发服务器端口
    open: true,         // 自动打开浏览器
    cors: true,         // 启用 CORS
    host: 'localhost'   // 指定主机名
  },
  build: {
    outDir: 'dist',     // 构建输出目录
    assetsDir: 'assets', // 静态资源目录
    sourcemap: false     // 关闭 sourcemap
  }
})

4.3.2 配置环境变量

创建 .env.development 和 .env.production 文件：

# .env.development
VITE_API_BASE=http://localhost:3000/api

# .env.production 
VITE_API_BASE=https://api.example.com

在代码中使用：

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

4.4 核心开发流程

4. 4.1 启动开发服务器

npm run dev

4.4.2 创建 Vue 组件

<!-- src/components/HelloWorld.vue -->
<script setup>
defineProps({
  msg: String
})
</script>

<template>
  <div class="greeting">
    <h1>{{ msg }}</h1>
  </div>
</template>

<style scoped>
.greeting {
  color: #42b983;
}
</style>

4.3 路由配置（需安装 vue-router）

npm install vue-router@4

创建路由配置：

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/about',
    component: () => import('@/views/About.vue')
  }
]

export default createRouter({
  history: createWebHistory(),
  routes
})

4.4.4 状态管理（推荐 Pinia）

npm install pinia

创建 Store：

// src/stores/counter.js
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  actions: {
    increment() {
      this.count++
    }
  }
})

4.5 生产构建与优化

4.5.1 构建命令

npm run build

4.5.2 性能优化配置

// vite.config.js
export default defineConfig({
  build: {
    minify: 'terser',
    rollupOptions: {
      output: {
        manualChunks: {
          vue: ['vue', 'vue-router', 'pinia'],
          lodash: ['lodash-es']
        }
      }
    },
    terserOptions: {
      compress: {
        drop_console: true // 移除 console
      }
    }
  }
})

Node.js 入门

目录