甘肃省住房和建设厅网站首页池州网站seo

主要参考资料：
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 核心优势

1. 闪电般启动：毫秒级冷启动

2. 即时热更新：保持应用状态的热替换

3. 开箱即用：
   TypeScript 支持
   CSS 预处理器
   文件系统路由

4. 多框架支持：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,         // 启用 CORShost: '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}}}
})