Element-UI的基本使用

一. Element-UI 的基本使用

Element-UI：一套为开发者、设计师和产品经理准备的基于 Vue2 的桌面端组件库，是饿了么团队开发的，如果是Vue3，可以使用Element-Plus来代替。

1. 基于命令行方式手动安装

1. 安装依赖包 npm i element-ui –S
2. 导入 Element-UI 相关资源：

// 导入组件库
import ElementUI from 'element-ui';
// 导入组件相关样式
import 'element-ui/lib/theme-chalk/index.css';
// 配置 Vue 插件
Vue.use(ElementUI);

3. 之后直接把按钮等组件拷贝到根组件，重新启动项目就可以使用了

2. 基于图形化界面自动安装

1. cd到项目目录，运行 vue ui 命令，打开图形化界面
2. 通过 Vue 项目管理器，进入具体的项目配置面板
3. 点击 插件 -> 添加插件，进入插件查询面板
4. 搜索 vue-cli-plugin-element 插件（适用于vue-cli@3）并安装，如果是vue-cli@4，请使用vue-cli-plugin-element-plus插件
5. 配置插件，实现按需导入（import on demand），从而减少打包后项目的体积
6. 之后直接把按钮等组件拷贝到根组件，重新启动项目就可以使用了

示例代码地址：https://github.com/iamkata/Element-UI-plus-lianxi

二. 格式化代码以及解决报错

1. 格式化代码

vscode 中添加.prettierrc文件，可以指定Format Document的规则，指定规则之后，在文件中右键点击Format Document，vscode会按照这个规则来格式化代码。

{
  "semi": false, // 不使用分号
  "singleQuote": true, // 使用单引号
   printWidth: 200  // 一行宽度为200，大于200才换行
}

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
 }

重新运行项目，发现报错就没了。