Vue 3 + Vite 2 + ElementPlus 1.1.0-beta(按需引入及自定义主题)

Posted 2023-05-03

参考技术A

更新于：2021.11.16

不过这回貌似更简单了，按照以下步骤操作即可。

如果是完整导入 element-plus，则在入口📃 main.js/main.ts ：

📃 vite.config.js ：

可选配置 useSource: boolean ，默认是 false。

更新于：2021.09.23

element-plus 的官方文档更新了，组件的按需引入可以用 unplugin-vue-components 十分便捷地实现，步骤如下：

这样不仅 element-plus 组件，所有 src/components 下的公用自定义组件 都不需要再做诸如以下这类导入和配置，而是直接在 template 中使用即可。

以下是这个插件的默认配置，你可以在 vite.config 的插件配置中根据需要自定义

有没有很省事！ 但是！ 当你需要用到 自定义主题 的时候，这个路子就不好使了。我们还是要像之前那样手动导入(然后全局注册)。 可以放心大胆滴使用～
跟着往下看：

以下(有部分)更新于2021.08.27

今天把 ElementPlus 更新到了最新，然后一跑项目马上就报错了。特记录下 1.1.0 版后使用的区别：
📃 package.json ：

用 unplugin-element-plus 插件来实现按需加载样式，别忘了先安装 npm i unplugin-element-plus -D 。
但是官方是 强烈建议全局引入样式 ，没必要为此特地用插件增加负担。此外像这样配置按需引入样式也无法使自定义主题生效。so 只是贴在这里记录方法📝。

使用简单示例：

注意 ⚠️：ElementPlus 1.1.0 版之后有一些破坏性改动：
按需引入的情况下，那些 必须嵌套使用的子组件 ，比如 el-select 组件内部的 el-option 组件、菜单组件的 el-menu-item ，都不用再导入了，因为内容已经被集成到父组件内了；

像 submenu 不仅目录名改了，只剩下一个 style 子文件夹里面的内容也都空了( index.js 等 4 个文件都没有内容)。 要记得把模版中原本的 <el-submenu> 替换成 <el-sub-menu> 。

大致列一下避雷：
ElBreadcrumbItem 、 ElDropdownItem 、 ElDropdownItem 、 ElDropdownMenu 、 ElFormItem 、 ElMenuItem 、 ElOption 、 ElRadioGroup 、 ElTableColumn 、 ElTabPane ...

新版的 ElementPlus 组件全都有 install 方法 ，而 1.0.2 的时候只有几个组件有 install ，其余要用 app.component() 注册全局组件。现在方便了，全部遍历然后直接 app.use() 即可。

而且用 use() 等于安装插件，那些消息组件就会自动像这样注册全局方法： app.config.globalProperties.$message = _Message
不用担心按需导入就无 this.$message 。

📃 src/router/index.js ：

📃 src/views/Home.vue ：

比自己覆盖 UI 颜色样式轻松多了有木有～

678 Vue CLI，vite

Vue CLI脚手架

---

Vue CLI 安装和使用

• npm install @vue/cli -g

---

vue create 项目的过程

---

项目的目录结构

---

认识Vite

---

Vite的构造

---

浏览器原生支持模块化

---

Vite的安装和使用

• npm install vite –g # 全局安装
• npm install vite –D # 局部安装

---

Vite对css的支持

---

Vite对TypeScript的支持

---

Vite对vue的支持

---

Vite打包项目

---

demo

---

vite.config.js

const vue = require(\'@vitejs/plugin-vue\')

module.exports = {
  plugins: [
    vue()
  ]
}

---

ESBuild的构建速度

---

Vite脚手架工具

npm init @vitejs/app
npm install @vitejs/create-app -g
create-app

---

demo

---

vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
});

---