vite+vue3+ts+ant design vue+tailwindcss搭建前端web应用（1）

简介

本文编写的目的是为了基于vue3、vite、 ant-design-vue3、Tailwind CSS3和TypeScript搭建开箱即用的前端应用框架模板，会实现axios、 Vue Router和Pinia的封装和基本使用。

注意：本项目vue3脚本使用的是组合式api。

git地址：https://gitee.com/konsei/vtatv

准备

1、开发工具选择VS Code（免费） 或者Webstorm（需购买或者自行寻找绿色版），或者其他开发工具也可以，本文使用的是VS Code

2、请提前安装好nodejs，版本>= 16.0.0，本文编写时的版本是16.14.0。

3、本文使用的包管理器是pnpm，也可以使用npm、cnpm、yarn等，npm安装pnpm使用下面的指令即可

// 全局安装pnpm
npm install pnpm -g

// 下载包时很慢或者无法下载的话，可选择切换为淘宝镜像
pnpm config get registry // 查看源
pnpm config set registry http://registry.npm.taobao.org // 切换淘宝镜像

/*
pnpm常用命令

pnpm install 包
pnpm i 包
pnpm add 包    // -S  默认写入dependencies
pnpm add -D    // -D devDependencies
pnpm add -g    // 全局安装
pnpm remove 包         //移除包
pnpm remove 包 --global   //移除全局包
pnpm up                //更新所有依赖项
pnpm upgrade 包        //更新包
pnpm upgrade 包 --global   //更新全局包
*/

使用vite创建vue3项目

参考：vite官方文档：搭建第一个vite应用

命令行执行一下命令

pnpm create vite

根据提示输入项目名称、选择vue、选择vue-ts，等待下载模板，完成后会在当前目录生成项目名对应的文件夹

 vscode - Eslint+Prettier配置VSCode自动格式化代码

参考：https://www.jianshu.com/p/dd43e06b710a

启动vscode，打开刚才创建的vite项目文件夹，控制台执行命令安装依赖

pnpm install

// 新增 prettier 依赖用于代码格式化
pnpm add -D prettier

vscode左侧选择扩展，安装ESLint、Prittier、Volar插件，如果以前安装过Vetur，请卸载或者禁用。

 项目根目录下找到.vscode/extensi