准备工作

主要技术栈

• 前端框架：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

相关知识点

• TypeScript 严格模式

• 教程链接：https://blog.csdn.net/qq_41581588/article/details/125931872