El proyecto de andamios vue-cli2 presenta elementUI bajo demanda

Permítanme hablar primero sobre los beneficios de la propia introducción del autor de elementui bajo demanda. La introducción global es más de 1 millón y menos de 400K después de la introducción bajo demanda. Los componentes utilizados por el autor de la introducción bajo demanda incluyen paginación, fecha selector, selector de árbol y entrada.

primer paso:

     El directorio del proyecto ejecuta npm install babel-plugin-component --D

Paso 2: modificar .babelrc

Aquí es donde el proyecto de andamios Vue presenta el núcleo de elementui bajo demanda, porque la mayoría de los novatos no saben cómo configurar babel.

Si copia y pega directamente el archivo de configuración proporcionado por el sitio web oficial, definitivamente informará un error, porque ha sobrescrito la configuración predeterminada del scaffolding. La forma correcta es integrar, babelrc debe modificarse a:

{
  "presets": [
    ["env", { "modules": false }],
    ["es2015", { "modules": false }],
    "stage-2"
  ],
  "plugins": [["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]],"transform-runtime"],
  "comments": false,
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [ "istanbul" ]
    }
  }
}

Si la versión de elementui es 1.X, el valor de styleLibraryName debe modificarse a theme-default

Paso 3: introducir componentes a pedido

Por ejemplo, si desea introducir botones a pedido,

  importar Vue desde 'vue' 

  importar la aplicación desde './App' 

  importar enrutador desde './router'

  importar 'element-ui / lib / theme-chalk / index.css' 

importar {Button} desde 'element-ui'

   Vue.use (botón)

  Ejemplos introducidos por el autor de la publicación:

 

Paso 4. Manejo de errores

如果 报错 Error en la construcción del módulo: Error: No se pudo encontrar el ajuste preestablecido "es2015" relativo al directorio

 Luego ejecute npm install babel-preset-es2015 --save-dev

报错 No se encontraron estas dependencias: deepmerge, resize-observer-polyfill, throttle-debounce / debounce

则 npm install --save deepmerge resize-observer-polyfill throttle-debounce / debounce

Ejemplo en línea: aquí hay un ejemplo de la introducción a pedido de elementui de vue-cli escrito por el autor como referencia

GitHub-bill-mark / elementui-demand: cuando vue 2.X y elementui 2.X se usan juntos, se introducen bajo demanda.