DWQA QuestionsCategory: ProgramHow to introduce elementui related components (Layout) on demand?
qngyun1029 asked 2 weeks ago

Project needs, try to introduce todayelement-uiOfLayoutComponents, open the official network, a burst of tricks, or not solved…
Note: MyvueThe project is throughvue-cliAutomatically generated
Steps:
1. Implementationnpm install babel-plugin-component -Dinstallbabel-plugin-component
2. According to the official website prompt, modify.babelrcI have covered all the configurations of the official website.I don’t know what the impact of coverage will be.

{
  "presets": [
    ["es2015", { "modules": false }]
  ],
  "plugins": [["component", [
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]]]
}

3. Introducing NeedsLayoutInmain.jsAdd the following code

import { Layout } from 'element-ui'
Vue.use(Layout)

4. Operationnpm run devThe errors are as follows:
Module build failed: Error: Couldn’t find preset “es2015” relative to directory “F: d projects XXX company pro_name”
Check it online and say it needs to be installed.babel-preset-es2015And then executenpm install babel-preset-es2015 --save-devAgainnpm run devThe report is wrong again, as follows:
How to introduce elementui related components (Layout) on demand?
Say that three dependencies have not been found, by the way, this sentencenpm install --save element-ui/lib/layout element-ui/lib/theme-chalk/base.css element-ui/lib/theme-chalk/layout.cssWhat does that mean? And in impressionnpm install package-name --saveThere are some differences and the execution is wrong. How can we solve this problem?

3 Answers
Best Answer
Border town answered 2 weeks ago

Not really.npm install --save element-uiAnd then use it on demandimportDoes WebPack automatically package the parts it uses when it is packaged?
Reference resources:http://element-cn.eleme.io/#/…On-demand Introduction

Border town replied 2 weeks ago

On-demand component introduction is implemented by babel-plugin-component. Just introduce the required components directly. Layout is not a component. It’s a concept.ExampleIt’s done through El Row and El Col, so it should beimport { ElRow, ElCol } from "element-ui"

qngyun1029 answered 2 weeks ago

Answer:
In fact, steps 1, 2, 3 and 4 above are all right, but there are still some very important points to be explained. Here is a supplement:
I. Needsnpm install element-ui --saveInstall the component.
Two.LayoutNot at allbuttonselectThis component, but many of the answers on the Internet areinput {Button、Select} from 'element-ui'This kind of inertial thinking, therefore, directly willButtonSelectreplace withLayoutThink it’s okay until I open itnode_modules/element-ui/lib/Only then did we discover this problem (law)——ButtonSelectThey all correspond to separate files, and Layout layout does not need to be used.LqyoutButrowcolIt happens that this folder containsrow.jscol.jsSo we should:

import { Row, Col } from 'element-ui'

Vue.use(Row)
Vue.use(Col)
Lanlon answered 2 weeks ago

I manipulated element-ui to introduce layout layout on demand and got into trouble: (the bottom of the solution)
Page rendering can not come out, error display
vue.runtime.esm.js?a427:619 [Vue warn]: Failed to mount component: template or render function not defined.
found in
—> <Layout> at src/layout.vue

   <Root>

layout.vue
<el-row>
<el-col :span=”24″><div class=”grid-content bg-purple-dark”></div></el-col>
</el-row>
<el-row>
<el-col :span=”12″><div class=”grid-content bg-purple row-bg”></div></el-col>
<el-col :span=”12″><div class=”grid-content bg-purple-light”></div></el-col>
</el-row>
<style>
.el-row {

margin-bottom: 20px;
&:last-child {
  margin-bottom: 0;
}

}
.el-col {

border-radius: 4px;

}
.bg-purple-dark {

background: #99a9bf;

}
.bg-purple {

background: #d3dce6;

}
.bg-purple-light {

background: #e5e9f2;

}
.grid-content {

border-radius: 4px;
min-height: 36px;

}
.row-bg {

padding: 10px 0;
background-color: #f9fafc;

}
</style>

main.js
import Vue from ‘vue’
Import AA from’. / layout. vue’// Layout layout
// Import component
import {
Row,
Col
} from ‘element-ui’;
Vue.use(Row);
Vue.use(Col);
new Vue({

el:'#app',
render: h => h(aa)

})

Later it was discovered that
The el-row code needs to be written in the template, and el-row needs an ID wrapped in the div of the parent element of app.