准备工作

主要技术栈

前端框架：Vue 3 + TypeScript
构建工具：Vite
UI 组件库：ElementPlus

Node.js安装

Node.js是一个基于Chrome V8引擎的JavaScript运行时环境，npm是Node.js的默认包管理器。

Windows 系统安装步骤

1.访问 Node.js 官方网站，下载最新的稳定版本安装包（LTS 版本）

2.运行下载的安装程序，按照向导完成安装

3.安装完成后，打开命令提示符（CMD）或 PowerShell，执行以下命令验证安装是否成功：

# 查看 Node.js 版本
node -v

# 查看 npm 版本
npm -v

如果显示版本号，则表示安装成功。

Node.js 版本管理

nvm是一个Node.js版本管理工具，可以帮助你在同一台设备上安装和管理多个Node.js版本。

安装步骤

1.访问 nvm-windows GitHub 发布页面下载最新版本的安装包（选择 nvm-setup.exe）

2.运行安装程序，按照向导完成安装

3.安装完成后，打开新的命令提示符（CMD）或 PowerShell，执行以下命令验证安装是否成功：

# 查看nvm版本
nvm version

如果显示版本号，则表示安装成功。

常用命令

# 查看可安装的Node.js版本
nvm list available

# 安装特定版本的Node.js
nvm install 18.16.0

# 安装最新的LTS版本
nvm install lts

# 查看已安装的Node.js版本
nvm list

# 切换到指定版本的Node.js
nvm use 18.16.0

# 设置默认版本
nvm alias default 18.16.0

# 卸载指定版本
nvm uninstall 16.14.0

安装依赖

使用 npm安装项目依赖：

# 使用 npm 安装依赖
npm install

启动开发服务器

使用以下命令启动本地开发服务器：

# 使用 npm
npm run dev

开发服务器启动后，可以通过浏览器访问 http://localhost:5173/ 查看项目运行情况。

构建生产版本

使用以下命令构建生产环境的代码：

# 使用 npm
npm run build

构建完成后，生成的文件将位于 dist 目录中。

开发知识点汇集

前端知识学习文档

TypeScript 地址：https://www.tslang.cn/docs/home.html
Vue 3 地址：https://v3.cn.vuejs.org/guide/introduction.html
npm 地址：https://www.npmjs.cn/
Axios 地址：https://www.axios-http.cn/docs/intro
Vue Router 地址：https://router.vuejs.org/zh/introduction.html
Element Plus 地址：https://element-plus.org/zh-CN/
SCSS 地址：https://www.sass.hk/docs/
Pinia 地址：https://pinia.vuejs.org/introduction.html
Vue I18n 地址：https://vue-i18n.intlify.dev/
Vite 地址：https://vitejs.cn/guide/
vueuse 地址：https://vueuse.org/guide/
wangEditor 地址：https://www.wangeditor.com/v5/getting-started.html
Echarts 地址：https://echarts.apache.org/handbook/zh/get-started/
VuePress 地址：https://www.vuepress.cn/guide/
ECMAScript 6 地址：https://es6.ruanyifeng.com/#docs/object
Tailwind CSS 地址：https://www.tailwindcss.cn/
ESLint javascript代码检测：https://eslint.bootcss.com/
Nuxt3中文网：https://www.nuxt.com.cn/docs/getting-started/introduction
Windi CSS 中文网：https://cn.windicss.org/guide/
uview-plus：https://uiadmin.net/uview-plus/

VSCode 相关配置

VSCode 配置 Vue 用户代码片段
教程链接：https://blog.csdn.net/qq812457115/article/details/124446342
VSCode 配置 ESLint 格式化代码
教程链接：https://blog.csdn.net/JCjunior/article/details/129055250