element plus uses v-loading error to solve Can't resolve 'element-plus/es/components/loading-directive/style/index'

The error is as follows:

Failed to compile.

./src/views/detectionSystems/deviceStatusList/index.vue?vue&type=template&id=2de634af&scoped=true (./node_modules/unplugin/dist/webpack/loaders/transform.js??ref--34-0!./node_modules/unplugin/dist/webpack/loaders/transform.js??ref--35-0!./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/babel-loader/lib!./node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/views/detectionSystems/deviceStatusList/index.vue?vue&type=template&id=2de634af&scoped=true) Module not found: Error: Can't resolve 'element-plus/es/components/loading-directive/style/index' in 'C:\code\SIDS\sids_jg_xuanwumen\src\views\detectionSystems\deviceStatusList'

Solution:

1. Manual import

You must also introduce css, and then use the component method. The blogger uses the on-demand import, other components can be used, and some feedback components cannot be used

    import { ElLoading } from "element-plus";
    import "element-plus/es/components/loading/style/index";

    let loading = null; // loading

    const queryData = (type = "camera") => {
      requestDatas = [];
      loading = ElLoading.service({
        lock: true,
        text: "拼命加载中...",
        background: "rgba(0, 0, 0, 0.7)",
      });
      // 请求接口数据
      cameraChecProgress({ type })
        .then((res) => {
          loading.close();
          requestDatas = res.data; // 后端返回的数据
          state.paingAttr.total = requestDatas.length; // 总条数
          state.paingAttr.page = 1; // 第几页
          toPaging(); // 分页
        })
        .catch(() => {
          requestDatas = [];
          state.listDatas = [];
          state.paingAttr.total = 0;
          state.paingAttr.page = 1; // 第几页
          loading.close();
        });
    };

2. Update on-demand import tools ( recommended )

Use the command line to update the import package on demand. After the installation is complete, you need to restart the project

 npm install unplugin-auto-import@latest unplugin-vue-components@latest --save-dev

The landlord used it before

Updated to adjust to

 

Feedback components such as v-loading can be introduced on demand