vue webpack中elementui使用cdn引入

最新推荐文章于 2024-05-21 14:53:04 发布
最新推荐文章于 2024-05-21 14:53:04 发布
阅读量1.4w 收藏 11
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/RevolCat/article/details/90139201
版权

vue webpack中elementui使用cdn引入

现在webpack4打包有splitChunks可以将第三方包分块，如果是webpack3用cdn可以减小vendor.js的大小；

  1. index.html

需要先引入vue，再引入elementui

	 <head>
	    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	...
	  </head>
  
  	...
  	
	<body>
      <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
      <script src="https://cdn.bootcss.com/element-ui/2.3.3/index.js"></script>
      <div id="app"></div>
    <!-- built files will be auto injected -->
    </body>
  1. webpack.base.conf.js

网上有说 ‘element-ui’ 的value需要改成ELEMENT， 不过试了一下，好像两种都行；

 ...
 externals: {
    'vue': 'Vue',
    // 'element-ui': 'ElEMENT',
    'element-ui': 'ElementUI',
  }
  ...
  1. main.js

在入口文件里，vue还是照样import ， elementui不用import可以直接使用，这样打包出来的vendor.js就小很多了；

import Vue from 'vue'
// import ElementUI from 'element-ui'
// import 'element-ui/lib/theme-chalk/index.css'
// Vue.use(ElementUI)

示例项目 https://github.com/Zillionnn/vue-cdn.git

Zillionnn
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
专栏目录
vue-cli webpack 引入swiper的操作方法
10-18
在Vue.js项目中，使用Vue CLI和Webpack搭建的环境，引入第三方库Swiper可以实现复杂的轮播图功能。Swiper是一款强大的触摸滑动组件，适用于移动设备和桌面浏览器。以下是详细的操作步骤： 1. **下载资源**：首先，...
webpack打包优化通过cdn引用element-ui
ffwangkun的博客
11-28 3872
用webpack打包项目的时候，当引入第三方库时，往往打出来的包vender.js会很大，这时候用webpack提供的externals属性。externals可以将依赖的第三方库从打包文件剔除，大大减小了文件包大小，同时大幅提升编译效率。已element-ui为例，具体配置如下： 第一步：配置externals 因为element-ui依赖vue 两者都要配置 第二步：引入js文件 用exte...
通过cdn优化webpack 打包
weixin_56263402的博客
07-20 993
cdn加速： c：content 内容，d：dispatch ，发布，n:network 网络 cdn 做的事情：帮你分发资源，加快用户的加载效率的一种方式 cdn 的原理：在各个地区，部署对应的服务器，提供资源将来用户就近访问最近的最稳定的服务器 cdn 一般存放不怎么变动 的代码-如:第三方依赖包：vue,element-ui,xlsx.js， 如果更新频繁的代码，服务器需要考虑代码同步问题，成本比较高 webpack打包优化： 1.通过 externals 加载外部 CDN资源，默认情况下
Vue基础01-CDN引用vue.js
最新发布
清晨的博客
05-21 460
区别：1.vue.js没有经过压缩，适合开发测试Debug时使用；2.vue.min.js代码经过了压缩，适合发布上线时用，节约些资源。
webpack打包忽略插件，采用cdn方式引入
cheng18887的博客
05-18 3273
vue-cli 在index.html中采用 cdn 引入 element <link rel="stylesheet" href="https://unpkg.com/element-ui@2.3.7/lib/theme-chalk/index.css"> <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"&...
vue项目cdn加速，减少webpack打包体积
xiao_zhu_ting_feng的博客
06-30 747
webpack打包优化
webpack打包后引用cdn的js_详解Webpack如何引入CDN链接来优化编译后的体积
weixin_36280338的博客
01-17 783
背景在 Vue 项目中，引入到工程中的所有 js 文件，编译时都会被打包进 vendor.js，也就导致了 vendor.js 文件体积变得相当臃肿，一定程度上影响着页面的渲染。为了减少编译后的体积，提高页面渲染速度，我们可以通过引入 CDN 链接把库分离，多线程异步 js 库，从而达到加速渲染的目的。那么我们如何做呢？步骤1.引入CDN链接在项目的 index.html 中，常规方式引入 CDN...
详解Webpack如何引入CDN链接来优化编译后的体积
12-29
在 Vue 项目中，引入到工程中的所有 js 文件，编译时都会被打包进 vendor.js，也就导致了 vendor.js 文件体积变得相当臃肿，一定程度上影响着页面的渲染。为了减少编译后的体积，提高页面渲染速度，我们可以通过引入...
基于 vue-skeleton-webpack-plugin 的骨架屏实战
11-30
前言 目前正在做的项目，登录是需要跳转到别人的页面的，导致重定向很多，需要优化一下白屏时间，所以就用到了骨架屏，但是这次用的骨架屏不是自动生成的，还是...本文主要围绕一个开源的 Webpack 插件 vue-skeleton
使用vue-cli脚手架工具搭建vue-webpack项目
12-10
对于Vue.js来说，如果你想要快速开始，那么只需要在你的html中引入一个[removed]标签，加上CDN的地址即可。但是，这并不算是一个完整的vue实际应用。在实际应用中，我们必须要一系列的工具，包括：模块化，转译，...
vue项目中用cdn优化的方法
08-28
本文将详细介绍如何在 Vue 项目中使用 CDN 优化的方法。 什么是 CDN？ CDN（Content Delivery Network，内容分发网络）是一种分布式网络系统，通过将静态资源缓存在各地的服务器上，减少了用户访问资源的延迟和...
【VUE项目实战】63、指定打包入口及加载外部CDN资源
程序猿之洞
08-27 1740
上一篇我们制定了项目的优化以及上线工作目标，本节我们来为开发模式与发布模式制定不同的打包入口，然后为项目加载外部CDN资源
如何在使用cdn在vue中引入element
u010208165的博客
08-22 5181
平时开发环境都使用npm惯了，那么正式的上线环境，如何使用cdn引入element呢 小编这里用的vue-cli工具，原生的vue大家自行去探索 使用cli工具以后，会有一个public文件夹 找到下面的index.html 这个位置引入css 可能此时你的版本与我的不一样，那么这个版本要去element官网找 样式引入完了，接下来要引入element组件库 我们知道组件库这个时候要在vue的app挂载这个页面中引入 此时就要找到app.vue这个vue页面 此时对应版..
在前端页面中使用element-ui和echarts教程（CDN引入方式）
qq_52781460的博客
06-02 8455
本篇文章主要实现在纯html+css+原生js的情况下使用element-ui组件，echarts图表来丰富自己的网页，快速开发。
cdn引入Element -ui
qq_45641978的博客
07-19 5318
需求 由于老板感觉pad中其中一个项目运行的有点慢，小明接到需求要修改该项目，明确要求不能使用element -ui 但是还是有个同学强行在小明项目上使用了，小明真的是左右为难啊，现在小明只能使用cdn引入啦。 cdn引入element-ui 小明查看文档并快速的将代码ctrl+c、ctrl+v弄好了，还没运行呢小明就开始洋洋得意了，npm run dev之后，发现项目跑起来了，但是页面呢？ 白屏一片，查看报错Vue is not defined这时为何呢，此时小嘟看见了小明的屏幕白了，赶忙上..
使用CDN方式引入Vue和Element plus
haohulala的博客
05-30 3404
在学习Vue和Element plus整合使用的时候打算先写一个使用cdn方式引入的入门级案例，没想到遇到了一个坑，在网上查了资料也没有解决问题，最后发现是引入cdn的顺序错了。整合vue和Element plus的时候我们需要引入三个cdn，这三个cdn的引入是需要严格按照顺序的，具体的写法如下。也就是先引入样式，然后引入Vue，最后引入Element plus。我一开始以为前端非常简单，没想到学习起来比后端的坑还多。完整的代码如下，这也是一个入门级的例程。
CDN引入Vue、Element、Echarts等常用资源
m0_61410974的博客
06-21 1372
六、引入之后未生效，可以把src中的地址复制到浏览器看有没有数据返回，若没有数据返回，可以重新选择一个其他的cdn资源。二、cdn引入ElementUI。三、cdn引入Echarts。一、cdn引入Vue2.0。四、cdn引入axios。五、样例，注意引入的顺序。
【VUE项目实战】64、CND优化ElementUI以及首页内容定制
程序猿之洞
09-04 1596
本篇我们来学习通过CND优化ElementUI的打包，以及完成根据生产和测试环境进行不同定制不同的首页内容。
安装
weixin_30419799的博客
06-24 135
目前可以通过unpkg.com/element-ui获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。 <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- 引入组件库 -->...
不使用webpack怎么写vue
05-26
Vue.js 是一个基于 MVVM 模式的渐进式 JavaScript 框架，使用 Vue.js 可以方便地构建单页面应用程序（SPA）和可重用的组件。虽然 Vue.js 建议使用 webpack 构建应用，但你也可以使用其他构建工具或者手动构建来开发 Vue.js 应用程序。 下面是一个不使用 webpack 构建 Vue.js 应用程序的示例： 1. 创建 HTML 文件 创建一个 HTML 文件，例如 index.html，用于加载 Vue.js 和应用程序的入口文件。 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue.js Without Webpack</title> </head> <body> <div id="app"></div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="app.js"></script> </body> </html> ``` 2. 创建应用程序的入口文件 创建一个 JavaScript 文件，例如 app.js，用于创建 Vue 实例和定义组件。 ```js // 定义组件 var MyComponent = Vue.extend({ template: '<div>Hello, {{ name }}!</div>', data: function () { return { name: 'world' } } }) // 创建 Vue 实例 new Vue({ el: '#app', components: { 'my-component': MyComponent } }) ``` 在上面的代码中，我们定义了一个名为 `MyComponent` 的组件，并使用 `Vue.extend` 方法来创建一个扩展的 Vue 构造器。然后，我们创建了一个 Vue 实例，并在 `components` 选项中注册了 `MyComponent` 组件。 3. 运行应用程序 将上述两个文件保存到同一个目录下，然后用浏览器打开 index.html 文件即可运行应用程序。 需要注意的是，这种方式不支持 ES6 模块，因此你需要使用旧的 CommonJS 或 AMD 模块规范，并手动处理依赖关系。另外，这种方式也不支持自动重载和代码分离等高级特性，因此不适合大型应用程序的开发。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值