(一) Vue3 + Vite + TS 项目搭建

系列文章目录

1. 系列介绍：Vue3 + Vite + TS 从零开始学习
2. 项目搭建：(一) Vue3 + Vite + TS 项目搭建
3. 实现动态菜单栏：(二) Vue3 + Element-Plus 实现动态菜单栏
4. 实现动态面包屑：(三) Vue3 + Element-Plus 实现动态面包屑
5. 实现动态标签页：(四) Vue3 + Element-Plus 实现动态标签页
6. 实现动态主题色切换(demo)：(五) Vue3 + Element-Plus 实现动态主题色切换
7. 踩坑记录(持续更新)：(六) Vue3 踩坑记录

---

---

一、检查环境

兼容性注意
Vite 需要 Node.js 版本 14.18+，16+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本

二、通过Vite搭建项目

Vite官网

1. 初始化项目

# 使用NPM
$ npm init vite@latest

# 使用Yarn
$ yarn create vite

# 使用PNPM
$ pnpm create vite

2. 根据提示安装

三、安装依赖

$ npm install

四、启动项目

$ npm run dev

五、按需引入依赖

以下依赖默认为是最新版本且使用NPM导包方式

1. Element-Plus

Element-Plus官网

# NPM
$ npm install element-plus --save

# Yarn
$ yarn add element-plus

# pnpm
$ pnpm install element-plus

2. VueX

$ npm i vuex --save

3. Axios

$ npm i axios --save

4. NProgress

$ npm i nprogress --save

5. Sass

$ npm i sass --save
$ npm i sass-loader --save

6. Cookie

$ npm i vue-cookies --save

7. Router

$ npm i vue-router --save