记录第一次使用Vite2+Vue3+TS+Eslint：使用Fabric.js做一个标注画板
使用Vite2创建项目
Vite官网：https://www.vitejs.net/guide/
以往Vue的项目如果使用cli需要先全局安装脚手架，再用命令创建项目，Vite创建项目跳过了这一步骤，详情可参考：npm init @vitejs/app 到底干了什么。
npm init @vitejs/app输入创建命令之后，npx会装一些依赖包，然后输入项目名选择模板，我这里选择vue，选择了vue之后还有一个vue-ts模板选项。
也可以直接通过指定项目名称和模板名称（具体模板名称见官网）：
npm init @vitejs/app my-vue-app --template vuenpm版本不同命令会有所差别，具体查看官网。
使用Eslint
Eslint官网：http://eslint.cn/docs/user-guide/getting-started
Vue中使用Eslint单独安装一个eslint是不够的，还需要一些其他的包支持，如下：。
npm install eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-vue -D说明：这里使用了airbnb语法规范，是一个比较流行的JavaScript语法规范。
安装完依赖包之后在项目根目录新增.eslintrc.js文件，配置如下，可自行修改：
module.exports = {
extends: ['plugin:vue/vue3-essential', 'airbnb-base'],
parserOptions: {
ecmaVersion: 2020,
sourceType: 'module',
},
plugins: ['vue'],
rules: {
// 自己写一些想配置的规则
},
overrides: [
{
files: ['*.vue'],
rules: {
// 这里写覆盖vue文件的规则
//...
},
},
],
};之后打开Vscode编辑器的Eslint功能即可。
使用参考：vite2+Vue3+elementPlus+eslint
让Eslint能够检测TS代码
上面已经默认安装ts，但要想让eslint检查ts语法，还需要安装另外两个插件(这两个插件的版本要保持一致)：
npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev然后在.eslintrc.js文件中添加配置：
module.exports = {
extends: ['plugin:vue/vue3-essential', 'airbnb-base'],
parserOptions: {
ecmaVersion: 2020,
sourceType: 'module',
parser: '@typescript-eslint/parser',
},
plugins: ['vue', '@typescript-eslint'],
rules: {
// 自己写一些想配置的规则
//...
},
overrides: [{
files: ['*.vue'],
rules: {
// 这里写覆盖vue文件的规则
},
}, {
files: ['*.ts'],
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint'],
rules: {
// 这里写覆盖ts文件的规则
},
}],
};
如果发现对ts文件无效，可能是vscode配置中没有添加eslint对ts的支持，需要在vscode的setting.json文件的 "eslint.validate"中加上一行："javascriptreact"，表示对ts文件进行检查，如下：
// 添加对文件的支持
"eslint.validate": [
"javascript",
"vue",
"html",
"javascriptreact",
],致谢：VScode下搭配ESLint、typescript-eslint的代码检查配方
Eslint错误处理
这个项目也是第一次使用Eslint，以前觉得麻烦不想用，现在逐渐觉得代码规范很有必要，因此开始逐渐尝试，也会遇到很多问题，需要耐心，一个个去解决，慢慢就会越来越熟练了。
就比如我的项目开启eslint后，出现如下问题：
缩进格式报错Expected indentation of 4 spaces but found 6.：
将光标移动到红色区域，点击快速修复选择Fix all indent problems或者Fix all auto-fixable problems即可自动修复。
另外，文件末尾报错Newline required at end of file but not found：
提示是eslint中的eol-last规则，需要在文件末尾以换行结束。
但是我换行后保存，光标又自动回到了上一行然后保存，猜测应该是vscode自动保存的设置。
查阅之后将vscode的保存自动格式化(Format On Save)关闭即可："editor.formatOnSave": false 。
如果你的vscode中的eslint配置了每次保存时按eslint格式保存并修复："source.fixAll.eslint": true ，以上错误都不需要我们手动修复，直接保存文件，大部分错误eslint都够按配置自动修复。
使用Element-Plus
由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.*这样的代码已经全都失效了。所以element-ui不兼容vue3，需要使用Vue3专属的Element-Plus。
Element-Plus官网：https://element-plus.org/#/zh-CN/component/installation
安装
npm install element-plus --savemain.ts引入
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
createApp(App).use(ElementPlus).mount('#app')————————————-6月25日更————————————-
项目已经完成，用ts开发到一半放弃了，等之后ts熟练了再用吧，还是继续用js，项目结构没变，把Vue页面的script中lang改为javascript即可，继续记录。
使用fabric.js
安装
npm i fabric --save在vue中引入
import { fabric } from 'fabric';使用iconfont
iconfont官网：https://www.iconfont.cn/
找好图标后，将图标加入到一个项目，我这里选择symbol方式下载到本地使用。
在项目目录src/assets中新建iconfont目录，目录下新建iconfont.css和iconfont.js文件。
iconfont图标项目中点击生成的js代码，将其中所有复制到iconfont.js中，如果开启了eslint，最好在第一行加这一行代码，让eslint不检查改文件。
/* eslint-disable */将如下内容，复制到iconfont.css中：
.icon {
font-size: 30px;
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}在mian.ts中引入：
import './assets/iconfont/iconfont.css';
import './assets/iconfont/iconfont';使用图标，#号后面就是线上iconfont图标项目中各个图标的代码。
打包发布
运行npm run bulid命令可将项目打包成静态文件，如果报错查看package.json文件中build指令后是否将tsc --noEmit加入，这是检查ts语法，将其删除，只用vite bulid命令打包即可。
具体功能就不详细描述了，最终效果如下：