一、创建vue3+ts项目
要创建一个Vue 3项目，需要先安装Node.js和Vue CLI。步骤如下：
-
安装Node.js：从Node.js官网下载安装包，安装过程中一直按照默认选项即可。（可以参考博主这篇文章配置node环境）
-
安装Vue CLI：在命令行中执行以下命令来安装Vue CLI：
npm install -g @vue/cli
- 创建一个新项目：在命令行中进入要创建项目的目录，执行以下命令来创建一个新项目：
vue create my-project
其中，my-project是项目名称，可以替换成你自己的项目名称。
-
选择Vue 3：在创建项目时，会提示选择一个预设。选择默认的“Default (Vue 3)”预设即可；或者选择手动安装“Manually select features”。
-
如选择手动安装可以把自己需要的功能都加进去：
1.Choose Vue version （选择Vue版本）
2.Babel
3.TypeScript （ts）
4.Progressive Web App (PWA) support （pwa支持）
5.Router
6.Vuex
7.CSS Pre-processors （css预处理器）
8.Linter / Formatter （eslint）
9.Unit Testing （单元测试）
10.E2E Testing （端对端测试）
（“键盘↓”表示选择下一项，“空格键”表示选中，“enter键”进入下一步）
- 运行项目：在项目目录中执行以下命令来运行项目：
cd my-project
npm run serve
- 打开浏览器：在浏览器中打开http://localhost:8080，即可看到项目运行的效果。
现在你已经成功创建并运行了一个基于Vue 3的项目。接下来，你可以修改代码、添加新功能，让它变得更加完善。
二 . vscode禁用插件Vetur，启用插件Volar
在vscode插件库中找到已安装的Vetur，进行卸载或安装禁用(如果未来还要使用vscode维护或者开发vue2的项目，建议禁用，需要时重新启用)
在vscode插件库搜索安装Volar，vue3项目代码会高亮显示。
三、vscode安装插件ESLint和Prettier - Code formatter 插件
- 在vscode插件库安装ESLint，并配置setting。
按快捷键ctrl+shift+p，输入setting，打开setting.json，添加以下代码片段
//为eslint开启自动修复，保存时将触发
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// 开启eslint格式化
"eslint.format.enable": true,
"eslint.alwaysShowStatus": true,
- 在vscode插件库安装Prettier，并配置setting:
配置自定义的prettier规则
需要新建一个文件.prettierrc.js（则需要module.export）,如果是.prettierrc(则只需要json格式{…})
//编写代码时，尽量符合以下规则
module.exports = {
printWidth: 300, //单行长度,超过则自动换行
tabWidth: 2, //缩进长度
useTabs: false, //使用空格代替tab缩进
semi: false, //句末使用分号
singleQuote: true, //使用单引号
endOfLine: 'auto', //配置换行符格式为auto
arrowParens: 'avoid', //单参数箭头函数参数周围使用圆括号-eg: (x) => xavoid：省略括号
bracketSpacing: true, //在对象前后添加空格-eg: { foo: bar }
insertPragma: false, //在已被preitter格式化的文件顶部加上标注
jsxBracketSameLine: false, //多属性html标签的‘>’折行放置
rangeStart: 0,
requirePragma: false, //无需顶部注释即可格式化
trailingComma: 'none', //多行时尽可能打印尾随逗号
useTabs: false //使用空格代替tab缩进
}
并配置setting
//使用prittier作为格式化工具,这个设置在ctrl+s的时候，会启用默认的格式化，
"editor.formatOnSave": true,
//导入.prettierrc文件 （路径根据自己的实际路径填写），
"prettier.configPath": "D:\\.prettierrc",
// 禁止使用尾逗号
"prettier.trailingComma": "none",
// 关闭语句分号结尾
"prettier.semi": false,
//每行文字个数超出此限制将会被迫换行
"prettier.printWidth": 300,
//使用单引号替换双引号
"prettier.singleQuote": true,
// 函数体一个参数的时候禁止使用括号
"prettier.arrowParens": "avoid",
//设置.vue文件中，HTML代码的格式化插件
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.ignoreProjectWarning": true,
"vetur.format.defaultFormatterOptions": {
"prettier": {
"trailingComma": "none",
"semi": false,
"singleQuote": true,
"arrowParens ": "avoid",
"printWidth": 300
},
"js-beautify-html": {
"wrap_attributes": false
}
},
//prettier可以格式化很多种格式，所以需要在这里对应配置下
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[less]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[vue]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
四、解决报错 “Missing space before function parentheses. eslint(space-before-funtion-paren)”
space-before-funtion-paren意为函数参数前的意外空格
解决方法1：打开 .eslintrc.js 文件，并在 rules 中添加如下一行代码即可：
"space-before-function-paren": 0,
解决方法2： 打开 .eslintrc.js 文件，并在 rules 中添加如下一行代码即可：
'space-before-function-paren': ['error', 'never', {
anonymous: 'always',
named: 'always',
asyncArrow: 'always'
}],
解决方法3： 打开 .eslintrc.js 文件，并在 rules 中添加如下一行代码即可：
'space-before-function-paren': ['error', 'never'],
以上三种方案每个都尝试一遍后，其中会有一种方法就可以解决问题。