vue——按需引入elementUI(以时间选择器为例)
2023-09-27 14:29:10 时间
参考:https://www.jianshu.com/p/40da0ba35ac1
1. 安装
npm install babel-plugin-component –D
2. 修改.babelrc
原babelrc:
{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": ["transform-vue-jsx", "transform-runtime",] }
修改后:
{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": ["transform-vue-jsx", "transform-runtime",
["component",{ // <== "libraryName":"element-ui",// <== "styleLibraryName":"theme-chalk" // <== }
]
] }
3. 按需引入组件
main.js:
import Vue from 'vue'; import App from './App'; import { DatePicker } from 'element-ui'; Vue.use(DatePicker);
需要用到elementUI的组件:
<style scoped> @import 'https://unpkg.com/element-ui@2.3.7/lib/theme-chalk/index.css'; </style>
相关文章
- (尚049)Vue_源码分析_数据代理_效果+(尚050)Vue_源码分析_数据代理_效果_debug+(尚051)Vue_源码分析_数据代理_分析
- 用Tornado实现web聊天室(前端采用vue+bootstrap)
- Vue - 实现用 JS 调用自定义组件 / 类似 ElementUI 弹框组件(在 js 文件中通过 this.xxx 方式调用并显示自定义弹框模态框组件)
- Vue知识点总结(4)——v-on(超级详细)
- VUE-013-为elementUI 设置 tootip 宽度
- Vue的elementUI实现自定义主题
- vue实战入门进阶篇十:vue+elementui实现网站后台-代码重构及发布
- vue实战入门进阶篇七:vue+elementui实现网站后台-访问统计界面实现
- vue实战入门进阶篇六:vue+elementui实现网站后台-新闻资讯界面实现
- vue实战入门进阶篇四:vue+elementui实现网站后台-主页框架实现
- vue文档摘录三:全局 API
- vue使用vue-resource,进行网络请求
- vue中使用elementUi (分页器的使用)
- Vue上传文件:ElementUI中的upload实现
- Vue 计算
- vue-router 的重定向-redirect
- Vue:自定义指令的简单用法以及自定义指令模块化
- Vue使用ElementUI对table的指定列进行合算
- 解决VsCode启动Vue项目报错:‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。
- Vue使用ElementUI对表单元素进行自定义校验