一. Element-UI 的基本使用
Element-UI是一套为开发者、设计师和产品经理准备的基于 Vue2 的桌面端组件库，是饿了么团队开发的，如果是Vue3，可以使用Element-Plus来代替。
1. 基于命令行方式手动安装
- 安装依赖包
npm i element-ui –S - 导入 Element-UI 相关资源：
// 导入组件库
import ElementUI from 'element-ui';
// 导入组件相关样式
import 'element-ui/lib/theme-chalk/index.css';
// 配置 Vue 插件
Vue.use(ElementUI);
- 之后直接把按钮等组件拷贝到根组件，重新启动项目就可以使用了
2. 基于图形化界面自动安装
- cd到项目目录，运行
vue ui命令，打开图形化界面 - 通过 Vue 项目管理器，进入具体的项目配置面板
- 点击 插件 -> 添加插件，进入插件查询面板
- 搜索
vue-cli-plugin-element插件（适用于vue-cli@3）并安装，如果是vue-cli@4，请使用vue-cli-plugin-element-plus插件 - 配置插件，实现按需导入（import on demand(v. 需要、需求)），从而减少打包后项目的体积
- 之后直接把按钮等组件拷贝到根组件，重新启动项目就可以使用了
示例代码地址：github.com/iamkata/Ele…
二. 格式化代码以及解决报错
1. 格式化代码
vscode 中添加.prettierrc文件，可以指定Format Document的规则，指定规则之后，在文件中右键点击Format Document，vscode会按照这个规则来格式化代码。
{
"semi": false, // 不使用分号
"singleQuote": true, // 使用单引号
printWidth: 200 // 一行宽度为200，大于200才换行
}
semicolon n. 分号
2. 如何解决eslint报错
eslint规范的代码格式有时候很无语，所以我们可以关闭一些规范，比如如下报错：
Failed to compile.
./src/App.vue
Module Error (from ./node_modules/eslint-loader/index.js):
/Users/zjnx1111/Desktop/vuex_demo2/src/App.vue
// 这里报错方法的小括号之前要有空格，但是一般我们不加空格 data() {}
34:7 error Missing space before function parentheses space-before-function-paren
// 这里报错最后一行要是空格，但是感觉这个报错太无厘头了
76:9 error Newline required at end of file but not found eol-last
✖ 2 problems (2 errors, 0 warnings)
2 errors and 0 warnings potentially fixable with the `--fix` option.
上面两个错误都感觉不合理，想要关闭这两个规则，我们可以复制错误后面的规则，打开.eslintrc.js文件，在rules节点里面将这两个规则的值设置为0，如下：
rules: {
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
'space-before-function-paren': 0,
'eol-last': 0
}
重新运行项目，发现报错就没了。
