Переход на 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.

0 ответов

Другие вопросы по тегам