一、创建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'],
以上三种方案每个都尝试一遍后,其中会有一种方法就可以解决问题。