工作日志：从零搭建vue3项目（1）

从零搭建vue3项目遇到的问题。
1、安装node、npm、webpack、vue-cli。
2、执行vue create demo时报错如下：

看网上有很多解决方法，我感觉应该是版本冲突，所以重新安装了一下node、vue-cli，就创建成功了。
3、创建项目成功后，引入elementplus，在main.js中写入：

import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';

createApp(App).use(ElementPlus).use(store).use(router).mount("#app");

运行报错。排查半天，发现是格式化规则的问题，把单引号改成双引号就可以了。

4、格式化问题：我习惯设置成自动格式化并且缩进为四个空格。
步骤：打开vscode的设置，搜索“tabsize”，将下图中两个地方都改为4。

搜索:“detectindentation”，将前面的勾选去了。

5、改了几行代码因规范问题一直报错，但代码没问题啊。本想排查一下，又觉得太浪费时间了，就直接把“prettier/prettier“的警告关闭了。
找到.eslintrc.js文件，在rules里面添加一句"prettier/prettier": “off”，重启项目；

最后贴一下自己的settings.json文件配置。

{
    "editor.formatOnSave": true,
    "editor.formatOnType": true,
    "editor.fontLigatures": false,
    "editor.formatOnPaste": true,
    "workbench.iconTheme": "vscode-icons",
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
    },
    // "editor.defaultFormatter": "esbenp.prettier-vscode",
    "[jsonc]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "[html]": {
        "editor.defaultFormatter": "vscode.html-language-features"
    },
    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[vue]": {
        "editor.defaultFormatter": "octref.vetur"
    },
    "prettier": {
        "tabWidth": 4,
        "printWidth": 120,
        "semi": true,
        "singleQuote": true,
        "arrowParens": "avoid"
    },
    "vetur.format.defaultFormatter.js": "prettier-eslint",
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-aligned"
        },
        "prettier": {
            "tabWidth": 4,
            "printWidth": 120,
            "semi": true,
            "singleQuote": true,
            "arrowParens": "avoid"
        }
    },
    "html.format.indentInnerHtml": true,
    "html.format.wrapAttributes": "force-aligned",
    "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
    "javascript.format.semicolons": "insert",
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue"
    ],
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "editor.detectIndentation": false,
    "vetur.format.options.tabSize": 4,
    "editor.indentSize": "tabSize"
}