Vue3+Element-Plus 优化组件按需导入形式 二十

1.element.js 按需导入形式优化

1.1  没有优化前 elment.js 文件 

1.2 其实如果提前按照以下文章在vs code 环境 配置了EsLint 语法检查后，上面的写法编译直接是报错的，就是不通过的。

VS Code + ESLint 自动格式化和快捷键配置_码侬人生-CSDN博客https://blog.csdn.net/weixin_39237340/article/details/121239025

 1.3 点击Ctrl+S保存后，就会自动格式化成以下的形式。这个就是优化后的 elment.js 文件，而且是自动格式化的。

 小知识

 自动格式化的前提是按照了步骤1.2 在vs code配置了EsLinst语法配置,点击Ctrl+S保存后才会自动格式化成如上的形式。它直接就是自动格式化成最优的引入形式。如果不够熟悉EsLinst的语法，写的过程中会一直报语法错误，需要有耐心，慢慢习惯就好了。 

---

 2. 如上优化完成后，如果后续还有其他组件引入，则直接在后面加上对应的组件就好了

 2.1 如果组件过多怎么办，是可以允许换行的。如下图 

3.  elment.js 文件代码

import {
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElRow,
  ElMessage
} from 'element-plus'
export default (app) => {
  app.use(ElButton)
  app.use(ElForm)
  app.use(ElFormItem)
  app.use(ElInput)
  app.use(ElRow)
  app.config.globalProperties.$message = ElMessage
}

以上部分内容出自：

【黑马程序员】前端开发之Vue项目实战_Element-UI【配套源码+笔记】_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1x64y1S7S7?p=28