2.Vue3项目（二）：vue项目创建，项目必需的基础依赖配置，项目集成各种第三方依赖

目录

一、环境配置

1.下载node.js

2.pnpm的配置

二、创建项目

1.先创建好项目文件夹

2.cmd执行创建命令

3.下载依赖，启动项目

4.删一些不需要的文件保持项目干净

5.下载自动生成模板代码插件、自动保存

6.下载自动代码提示插件

三、配置项目依赖

1.运行项目后页面自动打开

2.eslint配置

（1）在cmd中安装eslint

（2）对eslint做初始化设置

（3）安装环境代码校验插件

（4）修改.eslintrc.cjs文件

（5）新建忽略文件.eslintignore

（6） 运行脚本

（7） eslint自动纠错测试

3.配置prettier

（1）安装依赖

（2）新建.prettierrc.json设置规则

（3）配置忽略文件.prettierignore

（4）测试自动格式化代码

4.配置stylelint

 （1）安装依赖

（2）.stylelintrc.cjs配置文件

（3）.stylelintignore忽略文件

（4） 运行脚本

（5）格式化代码

5.设置husky配置

（1）新建一个仓库

（2）新建一个远程仓库

（3）在main.ts中写一段不规范的代码

（4）将本地仓库代码提交到远程仓库

（5） 安装husky依赖，并初始化

（6）编辑生成的pre-commit文件

（7）重新写一段格式不对的代码，并做提交测试

6.配置commitlint

（1）添加依赖

（2）新建commitlint.config.cjs文件，并做配置

（3）运行脚本

（4）配置husky

（5）测试

7.强制使用pnpm包管理器工具

（1）新建preinstall.js文件

（2）运行脚本

四、项目集成

1. 集成element-plus

（1）安装依赖

（2）main.ts中引入element-plus

（3）示例

2.src别名的配置

 （1）代码配置

（2）验证

3.环境变量的配置

（1）创建多个环境变量的文件

（2）package.json配置

 （3）引用配置文件中的内容

4. svg图标配置

 （1）安装svg依赖

（2）配置插件

（3）在main.ts中引入

（4）测试使用 svg查看效果

（5）将svg封装成组件

（6） 前端调用

5.自定义插件注册全局引用

（1）新建两个全局组件

（2）创建全局对象并引用组件的index.ts

（3）在main.ts中挂载全局对象，并让app引用

（4）测试自定义全局组件

6.集成sass

（1）新建文件目录

（2）main.ts中引入scss

（3） 使用scss

（4）设置清除样式

（5）给项目提供scss的全局变量

7.mock数据

（1）安装依赖

（2）在vite.config.ts中添加mock配置

（3）新建mock接口

（4）安装axios

（5）测试接口

8. axios的二次封装

（1）安装依赖

（2）新建request.ts

（3）测试接口

9.API接口统一管理

（1）新建目录

（2） index.ts接口调用

（3）type.ts接口入参出参对象定义

（4）调用接口测试

---

一、环境配置

我们使用vite构建项目，需要先配置好一些环境，官网地址：

开始 | Vite 官方中文文档

1.下载node.js

版本要在16以上，这个网上自己搜

2.pnpm的配置

以管理员身份cmd打开命令行：

npm i -g pnpm
pnpm -v

二、创建项目

1.先创建好项目文件夹