vue cli3 使用elemet-plus

本文轉載自查看原文 2021-05-19 12:08 299 vue

原文章：

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')

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 vue cli3中使用less Vue/cli3中filter簡單使用 Vue CLI3 vue.js之使用Vue CLI3開發多頁面應用使用 Vue 及 Vue CLI3 時遇到的問題記錄 Typescript + vue cli3中使用echarts vue cli3的多環境配置安裝與卸載vue cli3 vue cli3中沒有config vue cli3 數據請求