demand

Because the boss felt that one of the projects in PAD was running a little slowly, Xiaoming received the demand to modify the project, explicitly requiring that the use of Element-UI was not allowed. However, one of his classmates forced him to use it on Xiaoming’s project. Xiaoming was really in a dilemma, and now he can only use CDN to introduce it.

Introduced the CDN element – the UI

Xiao Ming looked at the document and quickly put the code CTRL + C, CTRL + V, before it ran Xiao Ming began to be complacent, after NPM run dev, found that the project ran, but the page? White screen, view error Vue is not defined at this time, at this time the small du saw xiao Ming’s screen white, quickly stepped forward to help. ‘Oh ho, the screen’s blank. Let me see.’

Vue is not mounted if Vue is not defined

< script SRC = "https://unpkg.com/[email protected]/dist/vue.js" > < / script > <! - the introduction of component library - > < script SRC = "https://unpkg.com/[email protected]/lib/index.js" > < / script >Copy the code

After the end. Also need to import vue, Element into webpack for configuration

Go to vue.config.js and copy the following code into it

ConfigureWebpack: {externals: {// The Element of the CDN depends on the global variable Vue, so Vue also needs to use the CDN to import 'Vue ': 'Vue', // the attribute name elemental-ui means import XXX from 'elemental-ui ', // instead of node_modules, Instead, look for the global ELEMENT' element-ui': 'ELEMENT'},}Copy the code

Clean up the code, and the running code works.

According to the need to load

In addition, small du will load on demand configuration also sorted out

There is babel-plugin-component in the project. Modify babel.config.js to add some code

  plugins:[ 
  [
    "component",
    {
      "libraryName": "element-ui",
      "styleLibraryName": "theme-chalk"
    }
  ]
]
Copy the code