搭建vue3+ts+vite项目

一、创建项目及项目初始化

1.pnpm  create vite  

2.输入项目名字

3.选择框架 vue

4.选择语法 ts

5.cd 项目、pnpm install 、pnpm run dev

二、工具配置

1.浏览器自动打开：package.json文件夹下

 "scripts": {
    "dev": "vite --open",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },

dev: "vite" -------> dev: "vite --open"；--前面加一个空格

 2.eslint配置

（1）下载eslint：pnpm i eslint -D

 （2）生成配置文件-->eslint.cjs

        npx eslint --init        初始化

        To check syntax and find problems        选择检查语法并发现错误

        JavaScript modules (import/export)        选择采用js模块引入或暴露开发

        vue.js        选择采用vue.js框架开发

        Does your project use TypeScript? Yes        采用ts

        Where does your code run？ browser        代码运行在浏览器

        What format do you want your config file to be in? JavaScript        配置文件采用js格式

         eslint-plugin-vue@latest @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest     Would you like to install them now?  Yes   （这几个插件分别指 eslingt解析vue，eslint解析ts，eslint的ts解析器）

         Which package manager do you want to use? pnpm / npm / yarn 都可以

 3. .eslintrc.cjs配置文件

module.exports = {
   //运行环境
    "env": { 
        "browser": true,//浏览器端
        "es2021": true,//es2021
    },
    //规则继承
    "extends": [ 
       //全部规则默认是关闭的,这个配置项开启推荐规则,推荐规则参照文档
       //比如:函数不能重名、对象不能出现重复key
        "eslint:recommended",
        //vue3语法规则
        "plugin:vue/vue3-essential",
        //ts语法规则
        "plugin:@typescript-eslint/recommended"
    ],
    //要为特定类型的文件指定处理器
    "overrides": [
    ],
    //指定解析器:解析器
    //Esprima 默认解析器
    //Babel-ESLint babel解析器
    //@typescript-eslint/parser ts解析器
    "parser": "@typescript-eslint/parser",
    //指定解析器选项
    "parserOptions": {
        "ecmaVersion": "latest",//校验ECMA最新版本
        "sourceType": "module"//设置为"script"（默认），或者"module"代码在ECMAScript模块中
    },
    //ESLint支持使用第三方插件。在使用插件之前，您必须使用npm安装它
    //该eslint-plugin-前缀可以从插件名称被省略
    "plugins": [
        "vue",
        "@typescript-eslint"
    ],
    //eslint规则
    "rules": {
    }
}</