zl程序教程

您现在的位置是:首页 >  前端

当前栏目

vue——按需引入elementUI(以时间选择器为例)

Vueelementui 时间 引入 选择器 为例
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>