过来人经验，一般应届生入职第一天用得上。至于为什么不用vue-cli——只能说在vue技术栈里的vue-cli和vuex就要成为过去式了（但并不意味着不用学了，只是优先级降了，干开发总是接旧项目比起新项目多）

let`s begin

创建目录

• 在命令行用npm或yarn：

  npm create vite app-name

  yarn create vite app-name

依次选择Vue、TypeScript

依次执行cd app-name、yarn（或 npm i）

可以关闭命令行了，接下用VScode打开app-name文件夹

在src下加上额外的几个目录，让它变成这样

配置路径别名

在vite.config.ts中导入path

安装@types/node，为node内置包添加TS类型声明

yarn add -D @types/node 或  npm i -D @types/node

配置好vite.config.ts的结果如下：

还没有结束，还需要分别在TS和编辑器中配置别名

别的插件怎么配请自行bing

找到Mappings项

找下面这个属性

CSS预处理器

1. 以Scss为例

2. yarn add -D sass 或 npm i -D sass

3. 直接在main.ts里导入的话，style标签会访问不到全局Scss中的变量和规则

4. 找到vite.config.ts，按照下面的写法导入全局Scss或Less

vue-router

1. yarn add vue-router

2. 在src下的router目录新建index.ts和routes.ts

3. 内容如下：

注意声明routes的类型

创建并导出router插件

在main.ts中导入router.ts并安装

Pinia

1. 开头也提到过，vuex将成时代弃儿

2. yarn add pinia

3. 安装pinia

声明一个store实例

在usePinia/下的index.ts内容如下：

Element-plus

1. yarn add element-plus @element-plus/icons-vue

2. 在main.ts中安装Element-plus，并全局注册所有图标组件

Axios

请参考：

如果不想搞上面那一长串

可以来我的gitee直接拉现成的：

西红柿炒番茄不要番茄：https://gitee.com/Swz082421/vue-app