按需引用,配置起来稍微有一点麻烦,我们需要在用到 element-plus 组件的 vue 文件中同时引入组件和用到的 CSS 样式。 这里引入base.css文件是必须的,否则 button 组件的 CSS 文件el-button.css不会生效。 但是这样我们在开发时每次使用都要手动引入对应的 CSS 样式,使用起来会比较麻烦,我们还可以使用另外一种方法:...
好了,至此,按需引入element-ui就没问题了,而且我们没有再创建个.babelrc。 element-ui目前的版本是2.0.3。如果你翻开1.4.9的版本,他的配置中styleLibraryName是 "theme-default",如果配成这样,会报错: Can't resolve 'element-ui/lib/theme-default/base.css' 1. 很可惜,网上能搜到的大部分的博客代码还是以前...
3.1.通过命令行安装图标相应的插件 npm install @element-plus/icons-vue 3.2.全局导入 3.2.1.安装完图标插件后,在mian.js文件中输入如下引入代码 import * as ElementPlusIconsVue from '@element-plus/icons-vue'const app=createApp(App)for(const [key, component] of Object.entries(ElementPlusIconsVue)) ...
执行npm run build ,babel处理之后的代码是: var _button = _interopRequireDefault(require("element-ui/lib/theme-chalk/button.css")); require("element-ui/lib/theme-chalk/base.css"); var _button2 = _interopRequireDefault(require("element-ui/lib/button")); function _interopRequireDefault(obj) ...
学习coderwhy的按需引入 1.新建公共引入组件 register-element.ts import { App } from 'vue' import 'element-plus/dist/index.css' import { Edit } from '@element-plus/icons' const components = [ Edit ] export default function (app: App): void { ...
按需引入目前的情况是正如上面猜测的一样 unplugin-auto-import 是没用的,只用到了 unplugin-vue-components,而且只有在ts模式下才会生成 auto-imports.d.ts、components.d.ts 这两个文件 按需引入还必须在 main.ts 中引入样式,即 import 'element-plus/dist/index.css',否则弹框等样式失效...
import{App}from"vue";import"element-plus/dist/index.css";import{ElAlert,ElAside,ElButton,ElForm,ElFormItem,ElInput,ElRadio,}from"element-plus";constcomponents=[ElAlert,ElAside,ElButton,ElForm,ElFormItem,ElInput,ElRadio,];exportdefaultfunction(app:App):void{for(constcomponentofcomponents){app...
我们可以看出,这个插件其实就是把你需要的组件的css或者sass文件自动引入进来,刚好弥补了上面的问题。 最后我们如下配置项目: 首先我们要安装unplugin-vue-components和unplugin-element-plus。 npm i unplugin-vue-components unplugin-element-plus -D 之后配置一下vite.config.js文件。
element plus使用icon图标一般是通过组件的方式使用的,如<Search />,或者自动导入配置后 npm install element-plus 安装自动导入插件 安装两个按需导入的插件,避免在多个页面重复引入 API 或 组件 unplugin-auto-import按需自动导入API,如:ref,reactive,watch,computed 等API unplugin-vue-components...