一、安装 node.js和npm

1. 安装 node.js

npm(Node Package Manager): node.js 下的包管理器
nodejs官网

前往 node.js 官网下载并安装压缩工具包，里面包含了nodejs和npm，然后开始先不要配置环境变量，进入nodejs的目录（这里是node.js官网下载的工具包解压开的路径）下，命令行输入以下命令测试是否安装成功，正确会出现版本号：node -v和npm -v，可以分别查看node和npm的版本号。

2. 新建本地库和缓存目录

先在 nodejs对应的根目录（这里是node.js官网下载的工具包解压开的路径）下新建 2 个文件夹: node_cache 和 node_global：

3. 配置环境变量

先新建系统变量：
NODE_HOME=C:\DevelopApp\node-v22.14.0-win-x64
再在PATH中添加：
%NODE_HOME%;%NODE_HOME%\node_cache;%NODE_HOME%\node_global;
这三个环境变量。
这时便可以在终端的任意路径下执行：node -v和npm -v，这里如果不成功，可以重启电脑再试一下。
注意：如果是mac，则环境变量要在~/.zshrc中进行配置，添加如下信息：

export PATH="/usr/local/node-v20.13.1-darwin-x64/bin:$PATH"

其中/usr/local/node-v20.13.1-darwin-x64就是解压到的文件目录。

4. 修改本地库和缓存目录

运行以下 2 条命令

npm config set cache "C:\DevelopApp\node-v22.14.0-win-x64\node_cache"
npm config set prefix "C:\DevelopApp\node-v22.14.0-win-x64\node_global"

看一下 npm 的本地仓库，输入命令npm list -global发现目录已经改变：

5. 配置下载源地址，更换为淘宝的镜像

输入以下命令配置淘宝镜像站：

npm config set registry\=http\://registry.npm.taobao.org

输入命令npm config list显示所有配置信息：
这里会发现，cache、prefix和registry均已被修改成功，如下图：

6. 更新 npm

利用npm install npm -g更新 npm，利用npm list -global再次查看 global 里有什么模块。

7.下载淘宝团队为中国开发者提供的 ​npm 镜像对应的命令行工具

npm install -g cnpm

二、node.js和npm的说明

1.node.js：

node.js是JavaScript的运行环境，有了它就可以：
1、脱离浏览器，直接在操作系统上运行JavaScript。
2、可以类似于后端语言一样，对操作系统下的文件和数据库等进行操作。
3、提供更多的前端框架如：Vue、React、Angular，

2.npm：

node.js的包管理工具。

1、初始化npm对项目的管理

在一个新建的项目里，比如：node_test1这个文件夹中，启动终端，先执行npm初始化命令npm init，否则npm在当前项目路径下的安装和卸载可能都不能生效，然后回车逐渐确定最后输入“yes”，或者可以缩略命令npm init -y，
最终在当前项目路径下生成文件：package.json

{
  "name": "node_test1",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": ""
}

这样当在当前项目路径下要新增包时，才可以有管理依赖的文件，依赖位置如下图所示：

{
  "name": "node_test1",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "jquery": "^3.7.1"
  }
}

新增才能成功。

2、npm的全局/项目的安装与卸载

启动终端执行下面命令（以jquery为例）：

命令	​作用	​执行目录	​写入 package.json	​适用场景
npm install jquery -g	全局执行安装jquery的命令	安装在node.js的解压目录下：C:\DevelopApp\node-v22.14.0-win-x64\node_global\node_modules	不会在当前项目目录node_test1\package.json内新增jquery依赖	命令行工具、跨项目共享
npm uninstall jquery -g	全局执行卸载jquery的命令	在node.js的解压目录下进行卸载：C:\DevelopApp\node-v22.14.0-win-x64\node_global\node_modules	不会在当前项目目录node_test1\package.json内删除jquery依赖	清理全局工具
npm install jquery --save	在当前所在项目的文件夹内，执行安装jquery的命令	node_test1\node_modules	会在当前项目目录node_test1\package.json内新增jquery依赖	生产环境必需的包（如 vue）!
npm uninstall jquery --save	会在当前项目的目录下进行卸载	node_test1\node_modules	会在当前项目目录node_test1\package.json内删除jquery依赖	移除不再需要的生产依赖！

注意：上面的 --save可以省略，默认会在当前项目路径下进行安装卸载。

3、npm通过package.json下载依赖

比如一个项目没有下载依赖，只有package.json文件如下：

{
  "name": "node_test1",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "jquery": "^3.7.1",
    "lodash": "^4.17.21"
  }
}

可以看到其依赖为"jquery": “3.7.1"和"lodash”: “4.17.21”，这时可以通过npm install指令，也可以简写npm i，直接把所有依赖下载回来，因此在代码管理上传中，只要上传package.json即可。

4、package.json的main

每一个引入的包（jquery）等也会有自己的package.json，打开可以观察到，package.json的main，指的是当前包的入口文件的路径，也就是在这里开始执行。

5、package.json的scripts

scripts的值的大括号内可以进行手动修改，我们直接使用一个vite的例子，其package.json是一样的，如下图：

根据上面package.json配置示例，项目路径下的终端中执行npm run test1，“gogogo my friend!”就会直接被执行打印。所以一般执行npm run dev，可以看到，就是走了这个“vite”的配置。而执行npm run foo，可以直接利用node执行my.js文件。

三、vite的使用

vite是新一代前端开发与构建工具。
下面的使用以windows系统为例：

1.vscode打开项目

新建项目目录，在目录的地址栏，如下图：

直接键入cmd，打开终端，在终端里输入code .，可以直接用vscode打开当前目录。

2.vscode的debug方式

点击ctrl+shift+p打开命令面板，输入debug open link，回车确定，然后录入要debug的前端页面url地址，就可以在vscode中打断点，对js代码进行debug。

3.引入vite方法一：命令行直接引入~1

进入vscode后，点击终端标签，新建终端，在终端输入npm init vue@latest，以前是使用 ​Vue-Cli（基于 Webpack），但现在也是基于vite。内容如下：

4.引入vite方法二：命令行直接引入~2

进入vscode后，点击终端标签，新建终端，在终端输入npm create vite@latest，对内部项目起名，这里也起了vite-project1，然后选择框架为vue，选择JavaScript（不要选择TypeScript），完成后，再次使用类似上面code .的code 点击table会直接补全刚才新建的项目名，回车确定后，会利用vscode打开刚才新建的vite项目，然后打开终端，看到新项目内文件如下图所示：

看到已有package.json，所以可以直接输入npm i来下载所有依赖。然后根据上面的package.json配置，输入npm run dev就可以启动vite项目了。
注意在打开终端开始输入指令时，可以在命令中直接附加项目名和模板参数，跳过交互式提问：

npm create vite@latest my-vue-app -- --template vue

my-vue-app​：项目名称（自动创建同名文件夹）。
​--template vue：指定使用 Vue 模板（其他选项如 react、svelte）（参数中的 -- 用于分隔 npm 和 vite 的参数（仅 npm 需要））。

对比npm init vue@latest和npm create vite@latest：

npm init vue@latest 会询问是否安装 Vue 生态工具，而 npm create vite@latest 仅选择模板。

5.引入vite方法三：手动新建项目

1、初始化项目

新建项目vite-project2，首先利用npm初始化项目npm init -y，得到package.json，其内部scripts内录入"dev":"vite"。然后可以修改描述description的内容。

2、引入依赖包

上面操作已有package.json，所以这里安装vite的依赖包npm i vite -D，和npm i vue的依赖包，其中-D代表只安装在开发环境：

{
  "name": "vscodetestproject_zero",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "vite"
  },
  "author": "harry",
  "description": "我的vite+vue项目",
  "devDependencies": {
    "vite": "^6.3.2"
  },
  "dependencies": {
    "vue": "^3.5.13"
  }
}

3、新建根组件App.vue

新建src/App.vue，其就是要展示的根组件，如下：

<template>你好</template>

4、新建index.html主页

index.html是整个项目的展示入口，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="./src/main.js"></script>
</body>
</html>

index.html中引入<script type="module" src="./src/main.js"></script>，这时终端录入：npm run dev可以直接打开此项目，并触发src/main.js。而<div id="app"></div>这里正好是main.js的挂载点。

5、新建main.js主js文件

src/main.js被主index读取的js文件，如下：

import {createApp} from "vue" //引入vue的createApp函数
import App from "./App.vue" //进入要展示的根组件./App.vue
const app = createApp(App);	//利用createApp方法去加载根组件App.vue，获取一个js对象
app.mount("#app");	//把这个js对象挂载到html中id为app的标签上

6、解决打开vue后缀文件

这时运行npm run dev浏览器会报错，提示建议安装的依赖，根据提示，安装依赖包：npm install @vitejs/plugin-vue -D，以方便浏览器可以打开vue文件。

7、配置vite.config.js

import { defineConfig } from 'vite'//导入vite下的defineConfig函数
import Vue from '@vitejs/plugin-vue'//引入可以在浏览器打开vue的相应组件命名为Vue

export default defineConfig({//用defineConfig函数加载组件Vue
  plugins: [Vue()],
})

至此，npm run dev 可以执行结果“你好”显示在浏览器上。