Переход на Element-plus с element-ui
Я работаю над проектом на Vue2 и использую element-ui, но мы хотим обновить наш проект до Vue3. Для этого нам нужно передать Element-plus (element-ui не совместим с Vue3).
Мы успешно переходим на Vue3, но когда мы хотим использовать element comp, у нас всегда одна и та же проблема. В консоли появляется ошибка, и я не понимаю почему. Я подозреваю, что проблема с переводом моих файлов SFC в функцию рендеринга с помощью vue-loader.
Моя тестовая страница:
<template>
<div id="app">
<el-date-picker
v-model="value1"
type="date"
placeholder="Pick a day"
/>
</div>
</template>
<script>
const default_layout = "default";
export default {
name: "App",
components: {
},
data() {
return {
value1: null
};
},
vue.config.js:
module.exports = {
lintOnSave: false,
chainWebpack: config => {
config.resolve.alias.set("vue", "@vue/compat");
config.module
.rule("vue")
.use("vue-loader")
.tap(options => {
return {
...options,
compilerOptions: {
compatConfig: {
MODE: 2
}
}
};
});
}
};
зависимости в package.json:
"dependencies": {
"@ag-grid-enterprise/all-modules": "^25.3.0",
"@vue/compat": "^3.1.0",
"ag-grid-community": "^25.3.0",
"ag-grid-enterprise": "^25.3.0",
"ag-grid-vue": "^25.3.0",
"core-js": "^3.6.5",
"element-plus": "^1.1.0-beta.9",
"highcharts": "^8.1.2",
"highcharts-vue": "^1.3.5",
"object-assign-deep": "^0.4.0",
"rfdc": "^1.1.4",
"rollup": "^2.28.2",
"v-tooltip": "^2.1.3",
"vue": "^3.1.0",
"vue-class-component": "^7.2.3",
"vue-click-outside": "^1.1.0",
"vue-debounce": "^2.5.7",
"vue-i18n": "^9.1.7",
"vue-loader": "^16.0.0",
"vue-numeric": "^2.3.0",
"vue-property-decorator": "^8.5.0",
"vue-router": "^4.0.11",
"vue-simple-svg": "^2.0.2",
"vue-toastification": "^1.7.6"
},
"devDependencies": {
"@babel/core": "^7.10.3",
"@rollup/plugin-alias": "^3.1.2",
"@rollup/plugin-buble": "^0.21.3",
"@rollup/plugin-commonjs": "^17.1.0",
"@rollup/plugin-json": "^4.1.0",
"@rollup/plugin-replace": "^2.3.3",
"@storybook/addon-actions": "^6.1.21",
"@storybook/addon-docs": "^6.1.21",
"@storybook/addon-essentials": "^6.1.21",
"@storybook/addon-links": "^6.0.26",
"@storybook/vue": "^6.1.21",
"@vue/cli-plugin-babel": "~4.5.13",
"@vue/cli-plugin-eslint": "~4.5.13",
"@vue/cli-service": "~4.5.13",
"@vue/compiler-sfc": "^3.2.10",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.1.0",
"babel-preset-vue": "^2.0.2",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0",
"husky": "^4.3.0",
"lint-staged": "^10.5.1",
"node-sass": "^4.14.1",
"postcss": "^8.2.8",
"rollup-plugin-copy": "^3.4.0",
"rollup-plugin-includepaths": "^0.2.4",
"rollup-plugin-scss": "^2.6.1",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-vue": "^5.1.9",
"sass-loader": "^8.0.2",
"style-loader": "^1.2.1"
},
И ошибка у меня в консоли:
Для информации, я успешно заставил его работать при запуске нового проекта во Vue.