欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

关于Vue使用CDN引用ElementUI

程序员文章站 2022-06-13 17:37:18
关于Vue使用CDN引用ElementUI前言使用过程及问题解决前言最近自己做一个小网站,因为服务器性能不是很好,导致不大的项目加载特别慢,一个页面超过十几秒,看了下,主要是图片和压缩整合后的js及css,尤其是chunk-vendors的js和css,上网查了下,chunk-vendors主要是组件和依赖,所有特别大。后来打算使用CDN的方式。使用过程及问题解决最开始我仅通过CDN引入vue-router和axios,按照网上大部分的做法,没有问题,但是在我引入elementUI后,网页就报错找不...

关于Vue使用CDN引用ElementUI

前言

最近自己做一个小网站,因为服务器性能不是很好,导致不大的项目加载特别慢,一个页面超过十几秒,看了下,主要是图片和压缩整合后的js及css,尤其是chunk-vendors的js和css,上网查了下,chunk-vendors主要是组件和依赖,所有特别大。后来打算使用CDN的方式。

使用过程及问题解决

最开始我仅通过CDN引入vue-router和axios,按照网上大部分的做法,没有问题,但是在我引入elementUI后,网页就报错找不到对应使用的组件了,在网上查解决办法,给配置文件的属性值全大写并没有用,后来在别人的一个博客上看到说
必须将vue也用CDN引入的方式elementUI才能用
oh god,真坑啊。
下面介绍我的使用:

  1. index.html引入cdn依赖 :
  <!-- 引入elementui样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入vue -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  1. vue.config.js配置组件 :(我的开发版本需要自己建config.js)
    关于Vue使用CDN引用ElementUI
  2. 去掉组件的import :
// import Vue from 'vue' 去掉vue引入
//去掉 element  ,主要vue.vue(ElementUI)也要去掉
// element ui
// import ElementUI  from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css';
// Vue.use(ElementUI)

本文地址:https://blog.csdn.net/cheeseC/article/details/107383133

相关标签: cdn vue elementui