创建项目

脚手架创建后依次选择 Vue-TypeScript

npm create vite@latest my-vue-app -- --template vue-ts

vite配置

配置别名

// vite.config.ts
resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },

eslint配置

// 安装eslint
yarn add  eslint

// 初始化
npm init @eslint/config

然后会问我们如何使用eslint，选择第三项，检查语法、发现问题并强制执行代码样式

什么样子的模块引入方式，这里选择第一项，import/export

然后问我们用什么框架，这里选择Vue.js

是否使用TS，YES

代码运行在哪里，选择浏览器

选择受欢迎的

然后问我们使用什么代码格式，这里我们选择流行代码格式中的Standard

选择eslintrc文件的格式，这里选择JavaScript

立即初始化，YES

进入项目安装依赖,注意node版本要 >=16.0.0

yarn install

代码格式化

安装prettier

npm i prettier eslint-config-prettier -D

然后在根目录创建.prettierrc.cjs文件(注意文件类型是.cjs)，配置如下

module.exports = {
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "printWidth": 100,
  "bracketSpacing": true,
  "jsxBracketSameLine": true,
  "useEditorConfig": true,
  "useTabs": false,
  "vueIndentScriptAndStyle": true,
  "arrowParens": "avoid",
  "htmlWhitespaceSensitivity": "ignore",
  "overrides": [
    {
      "files": ".prettierrc"
    }
  ]
};