Web前端开发环境搭建
安装 node.js 和 npm
上官网下载：
不管 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
