zoukankan      html  css  js  c++  java

  • vue cli3 使用elemet-plus

    原文章：

    https://blog.csdn.net/qq_44827865/article/details/115457445

    element-plus官方网站：https://element-plus.gitee.io/#/zh-CN/component/installation

    甲：为什么在vue3.0中不能使用Element UI了？
乙：由于vue3.0在插件install函数的入参从Vue原型（类）改成了app（vue实例），导致element-ui中Vue.prototype.* 这样的代码已经全都失效了。所以element-ui铁定是不兼容了。
甲：那有什么方法能解决吗？
乙：使用Element UI的升级版element-plus

    1、element-plus 安装

    npm install element-plus --save

    2、引入 Element Plus

    2.1 完整引入

    在 main.js /ts中写入以下内容：

    import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

    2.2 按需引入

    （1）安装 babel-plugin-import:

    npm install babel-plugin

    （2）将 babel.config.js 修改为：

    module.exports = {
  plugins: [
    [
      "import",
      {
        libraryName: 'element-plus',
        customStyleName: (name) => {
          name = name.slice(3)
          return `element-plus/packages/theme-chalk/src/${name}.scss`;
        },
      },
    ],
  ],
};

    （3）创建 src/plugins/elements.js文件

    文件内容如下：

      1 import {
  2     ElAlert,
  3     ElAside,
  4     ElAutocomplete,
  5     ElAvatar,
  6     ElBacktop,
  7     ElBadge,
  8     ElBreadcrumb,
  9     ElBreadcrumbItem,
 10     ElButton,
 11     ElButtonGroup,
 12     ElCalendar,
 13     ElCard,
 14     ElCarousel,
 15     ElCarouselItem,
 16     ElCascader,
 17     ElCascaderPanel,
 18     ElCheckbox,
 19     ElCheckboxButton,
 20     ElCheckboxGroup,
 21     ElCol,
 22     ElCollapse,
 23     ElCollapseItem,
 24     ElCollapseTransition,
 25     ElColorPicker,
 26     ElContainer,
 27     ElDatePicker,
 28     ElDialog,
 29     ElDivider,
 30     ElDrawer,
 31     ElDropdown,
 32     ElDropdownItem,
 33     ElDropdownMenu,
 34     ElFooter,
 35     ElForm,
 36     ElFormItem,
 37     ElHeader,
 38     ElIcon,
 39     ElImage,
 40     ElInput,
 41     ElInputNumber,
 42     ElLink,
 43     ElMain,
 44     ElMenu,
 45     ElMenuItem,
 46     ElMenuItemGroup,
 47     ElOption,
 48     ElOptionGroup,
 49     ElPageHeader,
 50     ElPagination,
 51     ElPopconfirm,
 52     ElPopover,
 53     ElPopper,
 54     ElProgress,
 55     ElRadio,
 56     ElRadioButton,
 57     ElRadioGroup,
 58     ElRate,
 59     ElRow,
 60     ElScrollbar,
 61     ElSelect,
 62     ElSlider,
 63     ElStep,
 64     ElSteps,
 65     ElSubmenu,
 66     ElSwitch,
 67     ElTabPane,
 68     ElTable,
 69     ElTableColumn,
 70     ElTabs,
 71     ElTag,
 72     ElTimePicker,
 73     ElTimeSelect,
 74     ElTimeline,
 75     ElTimelineItem,
 76     ElTooltip,
 77     ElTransfer,
 78     ElTree,
 79     ElUpload,
 80     ElInfiniteScroll,
 81     ElLoading,
 82     ElMessage,
 83     ElMessageBox,
 84     ElNotification,
 85 } from "element-plus";
 86 
 87 
 88 const components = [
 89     ElAlert,
 90     ElAside,
 91     ElAutocomplete,
 92     ElAvatar,
 93     ElBacktop,
 94     ElBadge,
 95     ElBreadcrumb,
 96     ElBreadcrumbItem,
 97     ElButton,
 98     ElButtonGroup,
 99     ElCalendar,
100     ElCard,
101     ElCarousel,
102     ElCarouselItem,
103     ElCascader,
104     ElCascaderPanel,
105     ElCheckbox,
106     ElCheckboxButton,
107     ElCheckboxGroup,
108     ElCol,
109     ElCollapse,
110     ElCollapseItem,
111     ElCollapseTransition,
112     ElColorPicker,
113     ElContainer,
114     ElDatePicker,
115     ElDialog,
116     ElDivider,
117     ElDrawer,
118     ElDropdown,
119     ElDropdownItem,
120     ElDropdownMenu,
121     ElFooter,
122     ElForm,
123     ElFormItem,
124     ElHeader,
125     ElIcon,
126     ElImage,
127     ElInput,
128     ElInputNumber,
129     ElLink,
130     ElMain,
131     ElMenu,
132     ElMenuItem,
133     ElMenuItemGroup,
134     ElOption,
135     ElOptionGroup,
136     ElPageHeader,
137     ElPagination,
138     ElPopconfirm,
139     ElPopover,
140     ElPopper,
141     ElProgress,
142     ElRadio,
143     ElRadioButton,
144     ElRadioGroup,
145     ElRate,
146     ElRow,
147     ElScrollbar,
148     ElSelect,
149     ElSlider,
150     ElStep,
151     ElSteps,
152     ElSubmenu,
153     ElSwitch,
154     ElTabPane,
155     ElTable,
156     ElTableColumn,
157     ElTabs,
158     ElTag,
159     ElTimePicker,
160     ElTimeSelect,
161     ElTimeline,
162     ElTimelineItem,
163     ElTooltip,
164     ElTransfer,
165     ElTree,
166     ElUpload,
167 ]
168 const plugins = [
169     ElInfiniteScroll,
170     ElLoading,
171     ElMessage,
172     ElMessageBox,
173     ElNotification,
174 ]
175 const installElement = (app) => {
176     components.forEach((component) => {
177         app.component(component.name, component)
178     })
179 
180     plugins.forEach((plugin) => {
181         app.use(plugin)
182     })
183 }
184 
185 export {
186     installElement
187 }

    （4）在main.js导入

    import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 导入Element
import { installElement } from "./plugins/elements";

const app = createApp(App)
// 调用installElement
installElement(app)

// 使用installElement
createApp(App).use(store).use(router).use(installElement).mount('#app')
  • 相关阅读:
    琴生(Jensen)不等式
    基本不等式
    集成学习之梯度提升树(GBDT)
    EM 算法原理
    FSMC驱动8位TFT
    GitHub 上有什么嵌入式方面的项目？
    在SPI_FLASH上建立文件系统
    百为STM32开发板教程——从LED流水灯到UCGUI手机界面
    STM32F1_外部NorFlash存储程序代码
    nor flash之擦除和写入
  • 原文地址：https://www.cnblogs.com/luo1240465012/p/14784526.html
Copyright © 2011-2022 走看看