Node.js入门

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

目录 一、什么是 Node.js？二、包管理器 npm三、构建工具 Vite3.1 为什么选择 Vite？3.2 快速创建项目3.3 核心优势 四、使用 Vite 搭建 Vue 3 项目的完整指南4.1 环境准备4.2 项目初始化4.2.1 快速创建项目4.2.2 项目结构解析 4.3 配置文件详解4.3.1 vite.config.js 基础配置4.3.2 配置环境变量 4.4 核心开发流程4. 4.1 启动开发服务器4.4.2 创建 Vue 组件4.3 路由配置（需安装 vue-router）4.4.4 状态管理（推荐 Pinia）4.5 生产构建与优化4.5.1 构建命令4.5.2 性能优化配置

一、什么是 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= api.example

在代码中使用：

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 } } } })