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')
  • 相关阅读:
    过桥问题
    修改state中数组对象某一个字段(state中某个属性为对象或数组时，需要修改该对象中的某一个属性)
    git 如何提交，新建， 拉取远程分支，git基本操作，git新手教学
    el-image组件大图预览不能定位当前图片的处理
    vue数组遍历动态渲染到页面
    vue路由传参的三基本方式
    git push时报错：error: failed to push some refs to/hint: Updates were rejected because the tip of your current branch is behind/hint: its remote counterpart. Integrate the remote changes
    时间格式转换/时间戳的转换
    Day.js ：一个轻量的处理时间和日期的 JavaScript 库
    node多版本管理（node版本切换、node版本更新及降低版本）
  • 原文地址：https://www.cnblogs.com/luo1240465012/p/14784526.html
Copyright © 2011-2022 走看看