1. Créer un projet vue3+ts
Pour créer un projet Vue 3, Node.js et Vue CLI doivent d'abord être installés. Procédez comme suit:
-
Installez Node.js : téléchargez le package d'installation à partir du site Web officiel de Node.js et suivez les options par défaut pendant le processus d'installation. (Vous pouvez vous référer à l'article du blogueur pour configurer l'environnement du nœud )
-
Installer Vue CLI : exécutez la commande suivante sur la ligne de commande pour installer Vue CLI :
npm install -g @vue/cli
- Créer un nouveau projet : saisissez le répertoire du projet à créer en ligne de commande, et exécutez la commande suivante pour créer un nouveau projet :
vue create my-project
Parmi eux, mon-projet est le nom du projet, qui peut être remplacé par votre propre nom de projet.
-
Choisissez Vue 3 : lors de la création d'un projet, vous serez invité à choisir un préréglage. Choisissez simplement le préréglage par défaut "Par défaut (Vue 3)" ; ou choisissez d'installer manuellement "Sélectionner manuellement les fonctionnalités".
-
Si vous choisissez l'installation manuelle, vous pouvez ajouter toutes les fonctions dont vous avez besoin :
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 （端对端测试）
("clavier ↓" signifie sélectionner l'élément suivant, "barre d'espacement" signifie sélectionner, "touche Entrée" pour entrer dans l'étape suivante)
- Exécutez le projet : exécutez la commande suivante dans le répertoire du projet pour exécuter le projet :
cd my-project
npm run serve
- Ouvrez le navigateur : ouvrez http://localhost:8080 dans le navigateur pour voir l'effet du projet en cours d'exécution.
Vous avez maintenant créé et exécuté avec succès un projet basé sur Vue 3. Ensuite, vous pouvez modifier le code et ajouter de nouvelles fonctionnalités pour le rendre encore meilleur.
2. Vscode désactive le plug-in Vetur et active le plug-in Volar
Trouvez le Vetur installé dans la bibliothèque de plug-ins vscode, désinstallez-le ou installez-le et désactivez-le (si vous souhaitez utiliser vscode pour maintenir ou développer des projets vue2 à l'avenir, il est recommandé de le désactiver et de le réactiver si nécessaire) Recherchez et installez Volar dans la bibliothèque de plug-ins vscode, et le code du projet vue3 sera mis en surbrillance
.
Trois, plugin d'installation vscode ESLint et Prettier - Plugin de formatage de code
- Installez ESLint dans la bibliothèque de plug-ins vscode et configurez les paramètres.
Appuyez sur la touche de raccourci ctrl+shift+p, entrez paramètre, ouvrez setting.json et ajoutez l'extrait de code suivant
//为eslint开启自动修复，保存时将触发
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
// 开启eslint格式化
"eslint.format.enable": true,
"eslint.alwaysShowStatus": true,
- Installez Prettier dans la bibliothèque de plug-ins vscode et configurez les paramètres :
configurez les règles personnalisées de Prettier.
Vous devez créer un nouveau fichier. prettierrc.js (nécessite module.export), si c'est le cas.
//编写代码时，尽量符合以下规则
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缩进
}
Et configurer les paramètres
//使用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"
},
4. Résolvez l'erreur "Espace manquant avant les parenthèses de fonction. eslint(space-before-funtion-paren)"
space-before-funtion-paren signifie un espace inattendu avant un paramètre de fonction
Solution 1 : Ouvrez le fichier .eslintrc.js et ajoutez la ligne de code suivante aux règles :
"space-before-function-paren": 0,
Solution 2 : ouvrez le fichier .eslintrc.js et ajoutez la ligne de code suivante aux règles :
'space-before-function-paren': ['error', 'never', {
anonymous: 'always',
named: 'always',
asyncArrow: 'always'
}],
Solution 3 : ouvrez le fichier .eslintrc.js et ajoutez la ligne de code suivante aux règles :
'space-before-function-paren': ['error', 'never'],
Après avoir essayé chacune des trois solutions ci-dessus, l'une d'entre elles résoudra le problème.