vite+vue3+Ts搭建基础项目框架

随着前端技术的更新，程序员们的技术栈也要不断跟上，本来想躺平，不料却被推着走。

上个月开发团队新来一个项目需求，要求开发技术栈vue2更换成vue3，毫无准备的小编一脸懵，嗯？怎么说 换就换了？没提前通知也没给时间学习，直接上手就是干？就离谱0.0！

vue3项目基础框架搭建流程

一.创建项目

首先使用vite初始化项目，然后在初始化过程中选择vue+typeScript

npm init vite 

二.安装依赖

需要注意的是上面这种创建项目的方式跟传统方式不一样，它不会自动安装依赖，也就是没有node_modules包的，需要我们自己手动安装依赖，这也就是为什么使用vite创建项目会很快的原因，所以我们需要使用npm i 安装依赖

npm i 

初始化依赖后再安装平时项目开发都经常会使用的基础依赖vue-router、vuex、axios

npm i -save vue-router vuex axios 

安装开发所需依赖。我经常使用是less，如果有习惯使用sass的可以替换掉

npm i -D less less-loader 

三.ts全局配置

在tsconfig.json中添加配置，全局类型、接口。这个是配置项目中需要编译的文件

"include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "types/**/*.d.ts",
    "types/**/*.ts"
], 

四.配置项目路径别名

在tsconfig.json中添加配置，处理通过"@/"引入文件时ts编译报错问题

"compilerO