首页 > 其他分享 >element UI vue脚手架 接入cdn

element UI vue脚手架 接入cdn

时间:2024-02-07 19:33:06浏览次数:27  
标签:vue cdn externals element UI 脚手架

vue.config.js

module.exports = {
configureWebpack:{
  externals: {  
    'element-ui': 'ELEMENT',
    vue: 'Vue'  

  }}
    
    
 //externals 配置来告诉 Webpack 不要打包它。

 

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="https://online-education.codemao.cn/crm/2/customer/favicon.ico">
  <title>测试平台</title>

<!-- cdn引入组件库 -->

<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>

<body>
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
  <!-- Vue.js CDN -->
  
   #先引入vue
  <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

  <!-- Element UI JS -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    
  
</body>


</html>

 

标签:vue,cdn,externals,element,UI,脚手架
From: https://www.cnblogs.com/kaibindirver/p/18011219

相关文章

  • 如何实现Vuex本地存储
    在前端开发中,Vuex是一款非常强大的状态管理工具,但是默认情况下,Vuex的数据是存储在内存中的,刷新页面后数据将会丢失。这往往会导致用户在刷新页面后需要重新登录等繁琐的操作。本篇文章将教会您如何实现Vuex的本地存储,让您的应用程序能够在刷新页面后依然保持用户的状态和数据。一、......
  • vue 样式绑定
    <!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>绑定样式</title><style>.basic{width:400px;height:100px;......
  • vue 监视 watch
    <!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>天气案例_深度监视</title><!--引入Vue--><scripttype="text/javascript"src="../js/vue.js"......
  • VUE框架CLI组件调用天气接口实现天气界面动态实现和完整工程------VUE框架
    //这句话就等同于我们写的<scriptsrc="vue.js">//这就是在引入vueimportVuefrom'vue';//然后下一步是导入我们的根组件importAppfrom'./App.vue';//导入混入import{mix1}from'./mixin.js';import{mix2}from'./mixin.js';import......
  • vue 事件修饰符
    <!DOCTYPEhtml><html><head><metacharset="UTF-8"/><title>事件修饰符</title><!--引入Vue--><scripttype="text/javascript"src="../js/vue.js"></script><style>*{mar......
  • Vue中对虚拟DOM的理解
    作为现代前端开发中的主流框架之一,Vue.js是一个非常流行的JavaScript框架,其核心概念之一就是虚拟DOM(VirtualDOM)。在本篇文章中,我们将深入探讨Vue中虚拟DOM的概念,并讨论为什么它在前端开发中如此重要。什么是虚拟DOM?在Vue.js中,虚拟DOM是一个独立于真实DOM的JavaScript对象。它的作......
  • Springboot和Vue(2或者3都行)实现Twitter授权登录,并获取用户公开信息-OAuth1.0。
    第一步先申请twitter开发者账号,创建App,我这里没有创建app,当时好像是默认有一个app,twitter官方说,创建一个app需要先删除一个app,我是没有充钱的,不知道充钱和免费使用接口的是不是一样的。第二步在生成CustomerKey以及CustomeSecret,我之后会用到这两个,这写密钥一生成永久有效,除非......
  • Vue3 - 移动端配置Rem布局
    1、项目搭建2、安装插件npminstallamfe-flexible--savenpminstallpostcss-pxtorem--save-dev3、引入插件import'amfe-flexible'//main.ts4、vite.config.ts配置import{defineConfig}from'vite'importpostCssPxToRemfrom'postcss-pxtore......
  • 零基础入门Vue之画龙点睛——再探监测数据
    追忆上一节:零基础入门Vue之影分身之术——列表渲染&渲染原理浅析虽然我深知,大佬告诉我”先学应用层在了解底层,以应用层去理解底层“,但Vue的数据如何检测的我不得不去学否则,在写代码的时候,可能会出现我难以解释的bug对此,本篇文章,将记录我对Vue检测数据的理解对于Vue检测数据......
  • Java微服务SpringCloud+Uniapp+Vue3+Element Plus开源BizSpring商城
    产品介绍BizSpring电商平台概述BizSpring电商平台,是基于最新SpringCloud微服务架构开发的多语言电商平台,使用领先的Vue3.0+ElementPlus+uniapp技术开发的移动全端业务、实现了多平台同步构建及建设的解决方案。应用发布基于Uni-app,实现跨多个平台(H5、公众号、头条、抖音......