002.按需自动导入element-plus

element-plus按需导入

1. 按需自动导入 element-plus

# 安装 element-plus 依赖
pnpm i element-plus
# 安装 自动按需导入插件
pnpm i -D unplugin-vue-components unplugin-auto-import
 

// vite.config.ts
...
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      imports: ['vue', 'vue-router', 'pinia'],
      eslintrc: {
        // 已存在文件设置默认 false，需要更新时再打开，防止每次更新都重新生成
        enabled: true
        // 生成文件地址和名称
        // filepath: './.eslintrc-auto-import.json',
        // globalsPropValue: true
      },
      resolvers: [ElementPlusResolver()],
      vueTemplate: true
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ],
  // ...
})

2. 验证是否安装成功

现在把所有的框架自身的代码删掉。
去除的方式如下所示：

1. App.vue 初始化代码如下：

<script setup></script>

<template>
  <el-button>aaa</el-button>
  <RouterView />
</template>

<style scoped></style>

2. 删除 views 文件夹下的所有 .vue 文件

3. 删除 components 文件夹下的所有 .vue 文件

4. 删除 assets 文件夹下的所有文件

5. router/index.js 中初始化代码如下：

   import { createRouter, createWebHashHistory } from 'vue-router'
   
   const routes = []
   
   const router = createRouter({
     history: createWebHashHistory(),
     routes
   })
   
   export default router
   
   

   如果能在页面上看到 el-button的样式，就表示正常了。

3. 剩余问题处理

3.1 ElMessage 飘红

<script setup>
const open = () => {
  ElMessage('this is a message.')
}
</script>

<template>
  <el-button @click="open">aaa</el-button>
  <RouterView />
</template>

<style scoped></style>

会发现 ElMessage 会飘红，但是页面上效果的确正常。如果要解决编辑器飘红的问题，需要修改 .eslintrc.cjs 文件

// ...
extends: [
 'plugin:vue/vue3-essential',
 'eslint:recommended',
 '@vue/eslint-config-prettier/skip-formatting',
 './.eslintrc-auto-import.json',
 'prettier'
]

3.2 config-provider 全局配置

• 上面的代码，会发现，点击按钮的时候，弹出很多次消息，实际上一般开发中只需要一次就够了。
• 日期控件默认不是中文的，需要改成中文的

// App.vue
<script setup>
import locale from 'element-plus/dist/locale/zh-cn.mjs'
const open = () => {
  ElMessage('this is a message.')
}
const a = ref('a')
const date = ref('')
</script>

<template>
  <el-config-provider :message="{ max: 1 }" :locale="locale">
    <el-button @click="open">{{ a }}</el-button>
    <el-date-picker v-model="date" type="date" placeholder="选择日期" />
    <RouterView />
  </el-config-provider>
</template>

<style scoped></style>