开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

用webpack (@vue/cli@next)搭建时，如何排除element-plus套餐(替换为import CDN)？

在使用webpack搭建项目时，如果想要排除element-plus套餐并替换为使用CDN引入，可以按照以下步骤进行操作：

首先，确保已经安装了webpack和@vue/cli的最新版本。可以使用以下命令进行安装：

npm install webpack @vue/cli@next -g

创建一个新的Vue项目，可以使用如下命令：

vue create my-project

进入项目目录，安装element-plus和相关依赖：

cd my-project
npm install element-plus

打开项目中的vue.config.js文件（如果没有则新建），在文件中添加以下配置：

module.exports = {
  configureWebpack: {
    externals: {
      'element-plus': 'ElementPlus',
    },
  },
};

这样配置后，webpack会将element-plus视为外部依赖，不会将其打包进最终的构建文件中。

在项目的HTML文件中，使用CDN引入element-plus的样式和脚本。可以在public/index.html文件中添加以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- 其他头部内容 -->
  <link
    href="https://unpkg.com/element-plus/lib/theme-chalk/index.css"
    rel="stylesheet"
  >
</head>
<body>
  <!-- 其他页面内容 -->
  <script src="https://unpkg.com/element-plus/lib/index.full.js"></script>
</body>
</html>

这样就可以通过CDN引入element-plus的样式和脚本，而不需要将其打包进项目中。

最后，重新启动项目进行验证：

npm run serve

项目应该能够正常运行，并且使用CDN引入的element-plus套餐。

总结：通过以上步骤，我们可以使用webpack搭建项目时排除element-plus套餐，并通过CDN引入。这样可以减小项目的体积，加快页面加载速度，并且方便管理和更新element-plus的版本。推荐的腾讯云相关产品是腾讯云CDN，可以通过腾讯云CDN加速引入CDN资源，提高访问速度和稳定性。具体产品介绍和链接地址请参考腾讯云CDN官方文档：腾讯云CDN。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

三年项目升级Vue3的踩坑经历

项目介绍米鹿是一个拖拽搭建H5的工具，项目的生产端前端使用的vue-cli搭建而成，拖拽过程中的状态都存储在Vuex中，通过Vuex实现了了一套状态机模型，路由使用的是Vue-router，UI框架使用的...因为我们的项目基于原有的vue-cli做了很多webpack配置，而且在打包时依赖vue-cli打包lib的功能，相对于vue-cli升级，直接替换为vite成本较高。...ElMessageBox } from 'element-plus'; import 'element-plus/theme-chalk/el-loading.css'; import 'element-plus...element-plus已经将icon单独抽离出来，需要按需引入，所以Icon的改动量巨大，以前用这种用法和<el-input :pre-fix="el-icon-search...踩坑记录通过以<em>CDN</em>的方式引入<em>Vue</em>3的umd版本，有些组件的语法在模板中不被编译，查找了各种文档也没有找到原因，所以我们的解决方案是不通过<em>CDN</em>的方式引入<em>Vue</em>3，因为<em>Vue</em>3已经支持treeShranking

2.6K2 0

做个开源博客学习Vite2 + Vue3 （一）搭建项目

先在gitee上面建立一个项目： https://gitee.com/naturefw/vue3-blog ? 然后clone到本地，接下来就是用vite2建立项目了。...输入你喜欢的名称即可，这里用vue3-blog。选择模板 ? 我也不知道都是啥，反正选 vue 就对了，如果你喜欢ts的话，那么可以选择vue-ts。...main里面做设置 import { createApp } from 'vue' import App from './App.vue' import router from '..../store-ds' // 轻量级状态 // UI库 import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk...好了项目的架子搭建起来了，后面就是具体的实现方式。下篇更精彩。码字不易，感谢点赞。

8292 0

【Vite】1934- Vite打包性能优化以及填坑

webpack-bundle-analyzer。...({ // "在项目中引入的变量名称"："CDN包导出的名称，一般在CDN包中都是可见的" vue: 'Vue' }) ] } plugins: [ createHtmlPlugin...这里有可能是 vue-demi 引入了 vue，然而 rollup-plugin-external-globals 插件配置全局变量时不会处理 node_modules 下的依赖项，导致 vue-demi...而vue-demi是哪里来的呢，我的项目是由于element-plus引用了vue-demi，所以此时解决方案就是将vue-demi也用cdn引入。总结到了这一步，整个文件夹已经完全瘦身了。...', 'element-plus', 'echarts'], plugins: [ externalGlobals({ vue: 'Vue',

1.8K1 1

使用Webpack5创建Vue2项目及优化

前言之前我们大多都是用Vue-Cli来创建项目，但是Vue-Cli已经停止更新了，并且Vue-Cli相当于一堆插件的集合体，我们想替换以下，或者想根据我们的项目优化以下，提升编译的性能，这时候可以自己用.../App'; import Vue from "vue"; new Vue({ render: h => h(App) })....以上babel的配置是官网提供主要用来解决业务代码js语法转译用的，当要生成类库或者组件库时上面这种配置会污染全局变量，需要使用@babel/plugin-transform-runtime 在根目录下创建...: [ new SpeedMeasurePlugin(), ], } 范围优化 resolve 1、alias alias 用的创建 import 或 require 的别名，用来简化模块引用...['.js', '.css', '.json', '.vue'], //配置后缀名 }, }; 如果用户引入模块时不带扩展名，例如 import file from '..

2.8K1 0

Vue3 TypeScript 使用教程 - 实战 Vue3 element-plus 开发「待办清单」

[Vue3 TypeScript 使用教程 - 实战 Vue3 element-plus 开发「待办清单」] 本文完整版：《Vue3 TypeScript 使用教程 - 实战 Vue3 element-plus...本文带领大家从搭建环境开始，手把手带领大家用 Vue3 Typescript + element-plus 开发一个极简「待办清单」app，在实战中学习 Vue3 TypeScript。...实现数据响应式，对比 Vue2 的 Object.defineProperty 有更强的数据劫持能力，并且可以做到“惰性监听” 编译时优化，提出 block tree 概念，每次 diff 只会比较两棵树的动态节点...from 'vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import App from...怎么样，评价如何》 Vue3 Typescript 上手教程总结本文详细讲解新版 Vue3 Typescript 与旧版 Vue 有什么区别及代码上的不同。

2K1 0

Vue3实战系列：结合 Ant-Design-of-Vue 实践 Composition API

大概就是什么场景用什么 API 都能了如于心，再大白话一点就是可以将之前用 Vue2.x 写的代码，用 Vue 3 无差别重构一遍。...1、命令行工具 (CLI) 对于 Vue 3，你应该使用 npm 上可用的 Vue CLI v4.5 作为 @vue/cli@next。...要升级，你应该需要全局重新安装最新版本的 @vue/cli： yarn global add @vue/cli@next # OR npm install -g @vue/cli@next 2、Vite...还没支持 Vue 3 项目的创建，Vue 团队制作了一个 Webpack 的项目配置放在 Github，可以直接克隆下来使用。...总结 Vue 3.0 还有很多值得我们探索的知识，上述内容只是简单的教大家如何入门搭建一个项目，并且如何通过新的 API 去结合组件库进行实践，后续我也会继续整理其他的实践技巧，源代码已经开源到 GitHub

1.3K2 0

从 Vite 与 Vue 开始的 D3 数据可视化之旅

「简单」是不是用的太多了纪念品 GitHub: vue-d3-demo 示例页面: vue-d3-demo Slides(开发环境): vue-d3-demo 行李清单首先准备好我们旅行的行李清单。...Vue + D3 根据老师的要求，作为一个 Demo 示例，我们只需要简单演示一下 D3 直方图是如何与 Vue 相结合的。 ?...v0.0.1 第一次的旅途搭建了一个简单的 Vite 项目结构使用 Vue@3 构建了一个简单的页面使用 D3@6 绘制了一个简单的柱状图使用 axios 获取 JSON 数据终点世间万物终有尽时...element-plus: Vue2 时期最流行的前端组件库 element-ui 的 Vue3 版本，Vuetify 虽然也不错，但是目前还没有实现 Vue3 的升级兼容，因为我们的首选方案是 element-plus.../store"; import ElementPlus from "element-plus"; import "element-plus/lib/theme-chalk/index.css"; const

2.5K3 0

使用Vite2+TypeScript4+Vue3技术栈，如何入手开发项目

Vite在开发模式下不需要打包可以直接运行，使用的是ES6的模块化加载规则； VueCLI开发模式下必须对项目打包才可以运行； Vite基于缓存的热更新； VueCLI基于webpack的热更新；搭建项目...Select a template: vue-ts 因为，我们这里要是用Vue+Ts开发项目所以我们选择vue-ts这个模板。...compilerOptions里面配置的是编译时的配置项，include项是配置生效包括在内的路径，而exclude则恰恰相反，排除在外的路径。...在之前我们使用VueCLI3.x创建项目时配置项目是在根目录下vue.config.js文件下进行配置。这个文件应该导出一个包含了选项的对象。...{ Options, Vue } from "vue-class-component"; import { ElButton } from 'element-plus' @Options({ components

7901 0

从 jQuery 到 Vue3 的快捷通道

CDN方式 jQuery的使用非常方便，用 script 引入 js文件即可，然后找到DOM即可开始操作。...而 Vue3 也支持直接用 script 引入的方式，然后使用插值的方式绑定数据，我们来看一下使用方法：引入 vue.js ...CDN的简单演示这样我们就可以在网页里面使用 Vue 了，另外我们引入了一个UI库——element-plus。...我们可以模仿 Vite 建立的项目的文件结构，用CDN的方式实现一个项目。为啥要用CDN的方式模拟一下呢？...by Vue3、element-plus、Pinia、vue-Router

6733 0

Vite 特性和部分源码解析

例如：项目源码如下： import { createApp } from 'vue'; import App from '....fileGuid=DDr3GGh6QRvQgWQC) 是用来提升页面重载速度，它将 CommonJS、UMD 等转换为 ESM 格式。...install element-plus Vue3 在 import 时，需使用 createApp 方法进行初始化 import { createApp } from 'vue'; import.../index.vue'; const app = createApp(App); import { ElInput, ElLoading, } from 'element-plus'; app.use.../todoList.vue'; 最后我们来对比一下该项目两种构建方式时间的对比； Webpack 冷启动，耗时 7513ms： ⚠ ｢wdm｣: Hash: 1ad1dd54289cfad8ecbe

7957 0

使用Vite2+TypeScript4+Vue3技术栈，如何入手开发项目

Vite在开发模式下不需要打包可以直接运行，使用的是ES6的模块化加载规则； VueCLI开发模式下必须对项目打包才可以运行； Vite基于缓存的热更新； VueCLI基于webpack的热更新；搭建项目...Select a template: vue-ts 因为，我们这里要是用Vue+Ts开发项目所以我们选择vue-ts这个模板。...compilerOptions里面配置的是编译时的配置项，include项是配置生效包括在内的路径，而exclude则恰恰相反，排除在外的路径。...在之前我们使用VueCLI3.x创建项目时配置项目是在根目录下vue.config.js文件下进行配置。这个文件应该导出一个包含了选项的对象。...{ Options, Vue } from "vue-class-component"; import { ElButton } from 'element-plus' @Options({ components

1.1K2 0

Vue打包优化

false } externals externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法。...-- 引入 cdn 地址 --> ...path: '/page2', component: () => import('@/views/Page2.vue') } ] 这会使 Page1.vue 和 Page2.vue 分别打包到单独的...chunk 中,访问对应路由时按需加载。...此外，这意味着你可以就近管理图片文件，可以使用相对路径而不用担心部署时 URL 的问题。使用正确的配置，webpack 将会在打包输出中自动重写文件路径为正确的 URL。

1.1K1 0

微前端架构实战

在开发阶段我们可以使用 ES 模块规范，然后使用 webpack 将其转换为 systemjs 支持的模块。...@5.2.0/umd/react-router-dom.min.js" } } 修改 webpack 配置文件，排除路由模块打包，micro\todos\webpack.config.js..., "vue": "https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js", "vue-router": "https:...Vue from 'vue'; import singleSpaVue from 'single-spa-vue'; import App from '....("导入时模块别名/导出时具体文件对应的名字")) const Us = React.lazy(()=>import("one/xx")) const Gos = React.lazy(()=>import

3.9K0 0

Vue 网站首页加载优化

Vue 网站首页加载优化本篇主要讲解 Vue项目打包后 vendor.js 文件很大如何对它进行优化以及开启Vue的压缩和 nginx gzip 压缩的使用，其他就是对接口优化等 1. vendor.js...1.1 第一步、cdn引入各种包 index.html中cdn的方式引入vue、vuex、axios、iview、等包，如下图： 1.2 第二步、在使用vue等包的地方，注释掉import引入打开main.js...文件注释掉需要排除的依赖import ，并且注释掉 Vue.use //Vue.prototype....$axios = axios; //Vue.use(iView) 1.3 第三步、打包忽视掉vue等包在webpack.base.conf.js ，把需要从cdn方式引入的依赖，都排除掉，包括 iview...gzip 最为擅长的是压缩纯文本文件，其效果非常明显，大约可以减少70％以上的文件大小，所以 Web 项目中开启 gzip 十分必要 3.2 nginx gzip如何配合vue使用事先用Vue生成的

1.5K2 2

vue.config.js打包优化(有效)「建议收藏」

设为 false，map不进行生成 3.cdn配置（可选） 4.代码压缩 5.公共代码抽离(个人感觉没啥用) 未优化之前的 //感觉太大了抬它优化之后的废话不多说了，上代码是重点...'https://cdn.bootcss.com/vue/2.6.10/vue.min.js', 'https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js...', 'https://cdn.bootcss.com/vue-router/3.0.6/vue-router.min.js', 'https://cdn.bootcss.com/axios...当运行 vue-cli-service build 时生成的生产环境构建文件的目录 outputDir: 'wx_vue', //放置生成的静态资源 (js、css、img、fonts) 的.../' //cdn js的代码路径前缀 }]) } } } //vue3 vue.config.js相对于vue2的话呢，更加简洁，你需要什么的操作，你得自己配置，增加自己的动手能力

1.7K3 2

浅谈低代码平台远程组件加载方案

加载方案组件代码我们以 vue 框架为例，假如当前有一个组件 A，代码如下，如何远程加载这个组件呢？...步骤打包：组件代码打包为 umd 或 amd 格式，打包时配置 Webpack externals，使打包产物不包含公共的依赖；上传：打包的组件 js 上传到 cdn；加载&注册：在需要使用组件时...组件打包用 amd 格式来做远程加载时不需要像方案一一样，增加额外的入口文件，可以直接将 .vue 文件作为入口。...js 上传到 cdn；加载&注册：在需要使用组件时，用 esm 的动态引入获取组件，并进行注册；组件打包这里需要注意的是，externals 配置项中直接把公共依赖配置为 cdn 地址； import.../npm/lodash@4.17.21/lodash.js' } }; 使用上述配置打包后产物，中会把 'vue' 替换为 externals 中的 cdn 地址 // 输入 import Vue

1.7K3 0

Vite开发快速入门

除了Vite外，前端著名的构建工具还有Webpack和Gulp。目前，Vite已经发布了Vite2，Vite全新的插件架构、丝滑的开发体验，可以和Vue3的完美结合。.../router"; import { ElButton, ElSelect } from 'element-plus'; import App from './App.vue'; import '....以下是两种不同的引入方式：全局引入： import { createApp } from 'vue' import ElementPlus from 'element-plus'; import App...{ createApp } from 'vue' import { ElButton } from 'element-plus'; import App from '....项目如何转Vite

1.4K1 0

浅谈低代码平台远程组件加载方案

加载方案组件代码我们以 vue 框架为例，假如当前有一个组件 A，代码如下，如何远程加载这个组件呢？...步骤 1.打包：组件代码打包为 umd 或 amd 格式，打包时配置 webpack externals，使打包产物不包含公共的依赖； 2.上传：打包的组件 js 上传到 cdn； 3.加载&注册：在需要使用组件时...组件打包用 amd 格式来做远程加载时不需要像方案一一样，增加额外的入口文件，可以直接将 .vue 文件作为入口。...js 上传到 cdn； 3.加载&注册：在需要使用组件时，用 esm 的动态引入获取组件，并进行注册；组件打包这里需要注意的是，externals 配置项中直接把公共依赖配置为 cdn 地址； import.../npm/lodash@4.17.21/lodash.js' } }; 使用上述配置打包后产物，中会把 'vue' 替换为 externals 中的 cdn 地址 // 输入 import Vue

2.5K4 1

【vite+vue3+Ts+element-plus】肩并肩带你写后台管理之自动引入(vue、element-plus)和自定义图标

首先我们进行element-plus安装 yarn add element-plus 之后我们在vite.config.ts中进行配置，这里既然进行自动引入了，顺便把vue的组件也自动引入了，大家应该知道...vue3的组合式API（也是本文采用的方式）中无论是ref还是生命周期函数之类的，都需要在使用时进行手动引入，这里我们把vue的组件也还有vue-router自动引入了，后期用的时候就无需再手动引入了。...import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import AutoImport from 'unplugin-auto-import.../vite' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components...，在element-plus中，图标也需要进行引入，官方也介绍了几种方式，我们这里介绍一下图标如何自动引入，就像上面说的组件自动引入一样。

2.5K2 0

Vue3 全家桶 + Element Plus + Vite + TypeScript + Eslint 项目配置最佳实践

完整引入在 main.js 中写入以下内容： import { createApp } from 'vue' import ElementPlus from 'element-plus'; import.../router"; import 'element-plus/lib/theme-chalk/index.css'; import App from './App.vue'; import '..../router"; import { ElButton, ElSelect } from 'element-plus'; import App from './App.vue'; import '....： import { createApp } from 'vue' import { ElButton } from 'element-plus'; import App from '....Vue3 中文文档，国内 CDN 加速版： https://vue3js.cn/docs/zh/ Element Plus 官网： https://element-plus.org/#/zh-CN

2.4K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭