Web前端开发环境搭建

安装 node.js 和 npm

上官网下载：

https://nodejs.org/zh-cn

不管 macOS 还是 Windows，下载的都是安装程序，按提示完成即可。

安装前的提示如下：

This package will install:
	•	Node.js v20.16.0 to /usr/local/bin/node
	•	npm v10.8.1 to /usr/local/bin/npm

安装成功后，可看到如下信息：

This package has installed:
	•	Node.js v20.16.0 to /usr/local/bin/node
	•	npm v10.8.1 to /usr/local/bin/npm
Make sure that /usr/local/bin is in your $PATH.

查看版本：

node -v
npm -v

如需要卸载，以 root 执行下列命令：

rm -rf /usr/local/bin/node
rm -rf /usr/local/bin/npm
rm -rf /usr/local/lib/node_modules/npm

非 root 则执行：

sudo rm -rf /usr/local/bin/node
sudo rm -rf /usr/local/bin/npm
sudo rm -rf /usr/local/lib/node_modules/npm

node 用于运行 JavaScript 文件或直接在命令行中执行 JavaScript 代码，可以使用 node 来启动一个简单的 HTTP 服务器，运行一个基于 Node.js 的应用程序，或者在命令行中测试一些 JavaScript 代码片段。

# 运行一个 JavaScript 文件
node my-script.js

# 在命令行中执行 JavaScript 代码
node -e "console.log('Hello, World!')"

npm 是 Node.js 的包管理器，用于安装、更新、卸载和管理 Node.js 应用程序所需的依赖包，随 Node.js 一起安装。

# 初始化一个新的 Node.js 项目
npm init

# 安装一个第三方库
npm install express

# 更新所有已安装的库
npm update

# 运行项目中的脚本
npm run build

安装 Vue 脚手架

npm install -g vue-cli

注意用 root 用户执行，“-g“ 标志表示全局安装，这意味着 Vue CLI 将被安装在你的系统的全局 node_modules 目录中，而不是当前项目的 node_modules。

安装编辑器 vscode

上官网下载即可：

https://code.visualstudio.com/

安装 vscode 的 Vue 插件

https://marketplace.visualstudio.com/items?itemName=Vue.volar

创建 Vue 应用

进入工作目录（如果项目目录不存在，则会自动创建项目目录），参照官网进行即可。

npm create vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具，执行成功后会在当前目录下创建项目子目录，项目子目录的名称为执行过程中输入的“Project name”值，如果不指定则为默认的目录名“vue-project“，同时也是 Vue 项目名。

在创建 Vue 应用之前，不一定非要创建一个 Node.js 项目。Vue CLI 会自动为你创建一个 Node.js 项目，并在其中设置好 Vue.js 以及其他必要的依赖和配置。

% npm create vue@latest
Need to install the following packages:
create-vue@3.10.4
Ok to proceed? (y) y


> npx
> create-vue


Vue.js - The Progressive JavaScript Framework

✔ Project name: … gadget_crafted_web
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes

Scaffolding project in /Users/yijian/gadget-crafted-web/gadget_crafted_web...

Done. Now run:

  cd gadget_crafted_web
  npm install
  npm run dev

安装 Node.js 项目中的依赖包

npm install 命令用于安装 Node.js 项目中的依赖包，它根据 package.json 文件中列出的依赖项来安装相应的包及其版本。

npm install

也可以指定要安装的包的版本号。例如，要安装 express 的 4.17.1 版本，可以运行：

npm install express@4.17.1

默认情况下，npm install 会将安装的包添加到 package.json 文件的 dependencies 字段中。如果你想将包添加到 devDependencies 字段中，可以使用 --save-dev 标志：

npm install --save-dev jest

要全局安装一个包，可以使用 -g 或 --global 标志：

npm install -g create-react-app

全局安装的包将安装在系统级别的目录中，而不是项目目录中。

启动开发服务器

npm run dev 用于启动项目的开发服务器，这个命令的具体行为取决于项目的 package.json 文件中的 scripts 部分。

例如：

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "dev": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },
  "dependencies": {
    // ...
  }
}

scripts 对象包含两个脚本：dev 和 build。dev 脚本使用 webpack-dev-server 来启动一个开发服务器，而 build 脚本使用 webpack 来构建生产环境的代码。

构建生产环境版本

通过执行 npm run build 来构建生产环境版本，命令的具体行为取决于项目的 package.json 文件中的 scripts 部分。

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "dev": "webpack-dev-server --mode development",
    "build": "webpack --mode production"
  },
  "dependencies": {
    // ...
  }
}

上述示例，scripts 对象包含两个脚本：dev 和 build，build 脚本使用 webpack 来构建生产环境的代码。当运行 npm run build 时，npm 会在项目的上下文中执行 scripts 对象中定义的 build 脚本。在上述示例中，这将使用 Webpack 的生产模式来构建项目，通常包括代码压缩、优化和其他减少文件大小和提高性能的步骤。

npm run build 的主要目的是为生产环境准备项目代码。构建过程可能会包括以下操作：

• 代码分割：将代码拆分成多个小块，以便按需加载

• 树摇（Tree Shaking）：移除未使用的代码，减少最终打包的大小

• 压缩：减小 JavaScript、CSS 和 HTML 文件的大小

• 优化：对图像和其他资源进行优化

• 生成静态文件：将构建结果输出到一个或多个静态文件中，以便部署到 Web 服务器或 CDN