# Importar utilizando el nodo cnd en el directorio raíz index.html
Debido a que Element depende de Vue, vue.js necesita ser introducido antes de element-ui, por lo que vue.js también debe cambiarse a la forma en que se introduce cdn
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>chenbz</title>
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</body>
</html>
# Agregue externos a build / webpack.base.config.js en el directorio raíz
La variable global establecida por la versión cdn de element-ui es ELEMENT
......
module.exports = {
......,
externals: {
'vue' : 'Vue',
'element-ui' : 'ELEMENT',
}
};
# Main.js import ... from ... y Vue.use (...) pueden eliminarse. Si no se elimina el paquete web, las dependencias correspondientes seguirán empaquetadas
Debido a que vue y element-ui se importan con nodos cnd, el vue y element-ui importados en main.js pueden comentarse (si no se comenta, webpack seguirá empaquetando las dependencias correspondientes)
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
// import Vue from 'vue'
import App from './App'
import router from './router'
// import ElementUI from 'element-ui';
// import 'element-ui/lib/theme-chalk/index.css';
// Vue.use(ElementUI);
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
// render: h => h(App),
router,
components: { App },
template: '<App/>',
});
# Después de que npm run build sea exitosa, encontrará que vendor.js es mucho más pequeño
