nodejs和npm和vite

Nodejs

简单的说 Node.js 就是运行在服务端的 JavaScript。

Node.js 是一个基于 Chrome JavaScript 运行时建立的一个平台。

Node.js 是一个事件驱动 I/O 服务端 JavaScript 环境

用途：

Node.js 可以被看作是一个 JavaScript 运行时环境，专门用于在服务器端执行 JavaScript 代码。
同时Node.js是构建高性能Web服务器的强大工具。

nodejs具体包括：

V8 引擎:
Node.js 使用 Google Chrome 浏览器中的 V8 引擎，这是一个由 Google 开发的高性能 JavaScript 引擎。V8 引擎负责将 JavaScript 代码解释和编译为机器码。
libuv 库:
libuv 是一个跨平台的异步 I/O 库，用于处理事件循环、文件系统操作、网络通信等异步任务。它提供了 Node.js 的事件驱动和非阻塞 I/O 模型的基础。
核心模块:
Node.js 包含一些核心模块，这些模块是在安装 Node.js 时一同安装的。一些常见的核心模块包括：
fs：文件系统操作。
http、https：处理 HTTP 和 HTTPS 请求。
events：事件处理。
os：操作系统信息。
path：处理文件路径。
util：实用工具函数。
NPM (Node Package Manager):
NPM 是 Node.js 的包管理工具，用于安装、管理和共享 JavaScript 包。开发者可以使用 NPM 安装第三方库、工具和框架，也可以将自己的代码包分享给其他开发者。

NPM

安装模块命令

$ npm install <Module Name >

$ npm uninstall <Module Name>

安装好之后，包就放在了工程目录下的 node_modules 目录中，因此在代码中只需要通过 require('module_name') 的方式就好，无需指定第三方包路径。

html 复制代码

package.json
{
  "name": "vite-basics",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",//添加了vite自动添加的，启动开发服务器
    "build": "vite build",// 为生产环境构建产物
    "preview": "vite preview"// 本地预览生产构建产物
  },
  "dependencies": {
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "vite": "^4.4.5"
  }
}

package.json是npm包管理的核心，npm通过读取这个文件来进行安装依赖，dependencies是依赖，devDependencies是运行时依赖，scripts包含了一些启动运行等自定义命令。

node_modules文件夹是node的依赖文件夹，由npm管理。

package-lock.yaml或者pnpm-lock.yaml是依赖版本锁定文件，锁定了引入依赖的版本。

Vite

Node.js 提供了运行 JavaScript 代码的环境，而 Vite 则在此基础上构建了一套用于前端开发的工具链。具体而言，Vite 使用了 Node.js 的模块系统、npm 包管理工具等，同时利用了一些现代前端工具和技术，整体上，Vite 利用了 Node.js 强大的生态系统来提供一个快速、高效的前端开发体验。

用来构建架构和模块热替换

Vite 尤其适用于构建现代 Web 应用程序，如 Vue.js、React 和其他基于现代 JavaScript 框架的项目。

vite.config.js用于配置vite项目的构建和开发配置（插件配置，服务器配置，构建配置，路径配置）。
dist是构建后的项目文件夹，包含html，css和js，静态文件，都是可以部署的文件。
.vite是预构建项目的缓存文件。
public是可以直接访问的文件。
src是vue开发文件夹,src下的api是API接口文件夹，directives是全局指令文件夹，styles是全局样式文件夹，utils是工具函数文件夹，composables是组合函数，router，stores

使用vite：

npm create vite@latest

在开发期间 Vite 是一个服务器，而 index.html 是该 Vite 项目的入口文件。

结构示例

.
├── build                                       // webpack配置文件
├── config                                      // 项目打包路径
├── elm                                         // 上线项目文件，放在服务器即可正常访问
├── screenshots                                 // 项目截图
├── src                                         // 源码目录
│   ├── components                              // 组件
│   │   ├── common                              // 公共组件
│   │   │   ├── alertTip.vue                    // 弹出框组件
│   │   │   ├── buyCart.vue                     // 购物车组件
│   │   │   ├── computeTime.vue                 // 倒计时组件
│   │   │   ├── loading.vue                     // 页面初始化加载数据的动画组件
│   │   │   ├── mixin.js                        // 组件混合(包括：指令-下拉加载更多，处理图片地址)
│   │   │   ├── ratingStar.vue                  // 评论的五颗星组件
│   │   │   └── shoplist.vue                    // msite和shop页面的餐馆列表公共组件
│   │   ├── footer
│   │   │   └── footGuide.vue                   // 底部公共组件
│   │   └── header
│   │       └── head.vue                        // 头部公共组件
│   ├── config                                  // 基本配置
│   │   ├── env.js                              // 环境切换配置
│   │   ├── fetch.js                            // 获取数据
│   │   ├── mUtils.js                           // 常用的js方法
│   │   └── rem.js                              // px转换rem
│   ├── images                                  // 公共图片
│   ├── page
│   │   ├── balance
│   │   │   ├── balance.vue                     // 余额页
│   │   │   └── children
│   │   │       └── detail.vue                  // 余额说明
│   │   ├── benefit
│   │   │   ├── benefit.vue                     // 红包页
│   │   │   └── children
│   │   │       ├── commend.vue                 // 推荐有奖
│   │   │       ├── coupon.vue                  // 代金券说明
│   │   │       ├── exchange.vue                // 兑换红包
│   │   │       ├── hbDescription.vue           // 红包说明
│   │   │       └── hbHistory.vue               // 历史红包
│   │   ├── city
│   │   │   └── city.vue                        // 当前城市页
│   │   ├── confirmOrder
│   │   │   ├── children
│   │   │   │   ├── children
│   │   │   │   │   ├── addAddress.vue          // 添加地址页
│   │   │   │   │   └── children
│   │   │   │   │       └── searchAddress.vue   // 搜索地址页
│   │   │   │   ├── chooseAddress.vue           // 选择地址页
│   │   │   │   ├── invoice.vue                 // 选择发票页
│   │   │   │   ├── payment.vue                 // 付款页
│   │   │   │   ├── remark.vue                  // 订单备注页
│   │   │   │   └── userValidation.vue          // 用户验证页
│   │   │   └── confirmOrder.vue                // 确认订单页
│   │   ├── download
│   │   │   └── download.vue                    // 下载App
│   │   ├── find
│   │   │   └── find.vue                        // 发现页
│   │   ├── food
│   │   │   └── food.vue                        // 食品筛选排序页
│   │   ├── forget
│   │   │   └── forget.vue                      // 忘记密码，修改密码页
│   │   ├── home
│   │   │   └── home.vue                        // 首页
│   │   ├── login
│   │   │   └── login.vue                       // 登录注册页
│   │   ├── msite
│   │   │   └── msite.vue                       // 商铺列表页
│   │   ├── order
│   │   │   ├── children
│   │   │   │   └── orderDetail.vue             // 订单详情页
│   │   │   └── order.vue                       // 订单列表页
│   │   ├── points
│   │   │   ├── children
│   │   │   │   └── detail.vue                  // 积分说明
│   │   │   └── points.vue                      // 积分页
│   │   ├── profile
│   │   │   ├── children
│   │   │   │   ├── children
│   │   │   │   │   ├── address.vue             // 地址
│   │   │   │   │   └── children
│   │   │   │   │       ├── add.vue             // 新增地址
│   │   │   │   │       └── children
│   │   │   │   │           └── addDetail.vue   // 搜索地址
│   │   │   │   ├── info.vue                    // 帐户信息
│   │   │   │   └── setusername.vue             // 重置用户名
│   │   │   └── profile.vue                     // 个人中心
│   │   ├── search
│   │   │   └── search.vue                      // 搜索页
│   │   ├── service
│   │   │   ├── children
│   │   │   │   └── questionDetail.vue          // 问题详情
│   │   │   └── service.vue                     // 服务中心
│   │   ├── shop
│   │   │   ├── children
│   │   │   │   ├── children
│   │   │   │   │   └── shopSafe.vue            // 商铺认证信息页
│   │   │   │   ├── foodDetail.vue              // 商铺信息页
│   │   │   │   └── shopDetail.vue              // 单个商铺信息页
│   │   │   └── shop.vue                        // 商铺筛选页
│   │   └── vipcard
│   │       ├── children
│   │       │   ├── invoiceRecord.vue           // 购买记录
│   │       │   ├── useCart.vue                 // 使用卡号购买
│   │       │   └── vipDescription.vue          // 会员说明
│   │       └── vipcard.vue                     // 会员卡办理页
│   ├── plugins                                 // 引用的插件
│   ├── router
│   │   └── router.js                           // 路由配置
│   ├── service                                 // 数据交互统一调配
│   │   ├── getData.js                          // 获取数据的统一调配文件，对接口进行统一管理
│   │   └── tempdata                            // 开发阶段的临时数据
│   ├── store                                   // vuex的状态管理
│   │   ├── action.js                           // 配置actions
│   │   ├── getters.js                          // 配置getters
│   │   ├── index.js                            // 引用vuex，创建store
│   │   ├── modules                             // store模块
│   │   ├── mutation-types.js                   // 定义常量muations名
│   │   └── mutations.js                        // 配置mutations
│   └── style
│       ├── common.scss                         // 公共样式文件
│       ├── mixin.scss                          // 样式配置文件
│       └── swiper.min.css
│   ├── App.vue                                 // 页面入口文件
│   ├── main.js                                 // 程序入口文件，加载各种公共组件
├── favicon.ico                                 // 图标
├── index.html                                  // 入口html文件