<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css"> <!--  引入element-ui主题  -->
  <link rel="stylesheet" href="https://unpkg.com/@94ai/nf-theme-chalk@1.1.21/lib/css/index.css"> <!--  引入common-ui主题  -->
</head>
<body>

<script type="importmap">
{
  "imports": {
     "vue":"https://unpkg.com/vue@2.7.14/dist/vue.esm.browser.js",
     "common-ui":"https://unpkg.com/@94ai/common-ui@1.1.21/lib/codepen/common-ui.es.browser.js"
  }
}
</script>
<script type="module">
import {
  default as Vue
} from 'vue'
if (!window.Vue) {
  window.Vue = Vue
}
</script>
<script defer src="https://unpkg.com/element-ui@2.13.2/lib/index.js"></script>
<script type="module">
import { NfButtonDemo, NfDoubleTime } from 'common-ui'
Vue.use(NfButtonDemo).use(NfDoubleTime)
new Vue({
  el: '#app'
})
</script>
<div id="app">
  <el-button>test element-ui</el-button>
  <nf-button-demo>test common-ui</nf-button-demo>
  <nf-double-time/>
</div>
</body>
</html>

效果如下：

直接在html中使用umd组件

如下引入对应主题包和库文件即可

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>umd demo</title>
  <script src="//unpkg.com/vue@2/dist/vue.js"></script> <!--  👈  引入vue  -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/element-ui@2.13.2/lib/index.js"></script> <!--  👈  引入element-ui的全量umd版本  -->
  <link rel="stylesheet" href="https://unpkg.com/@94ai/nf-theme-chalk@1.1.21/lib/css/index.css"> 
  <script src="https://unpkg.com/@94ai/common-ui@1.1.21/lib/codepen/common-ui.umd.browser.js"></script> <!--  👈  引入common-ui的全量umd版本  -->
</head>
<body>
<div id="app">
  <el-button>test element-ui</el-button>
  <nf-button-demo>test common-ui</nf-button-demo> <!--  👈 使用组件 -->
  <nf-double-time></nf-double-time>
</div>
</body>
<script>
const { default: CommonUI } = window['common-ui']
Vue.use(CommonUI)  // 👈  注册common-ui
new Vue().$mount('#app')
</script>
</html>

打开查看效果：

温馨提示由于vue cdn通过file协议通常加载不到，推荐使用托管的形式打开，如npx http-server

Keywords

common-ui组件库

es.browser

umd.browser

FAQs

What is @94ai/codepen?

Is @94ai/codepen popular?

Is @94ai/codepen well maintained?

Package last updated on 11 Sep 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

@94ai/codepen

HomePage

Usage

importmap+common-ui.es.browser.js

直接在html中使用umd组件

Keywords

Related posts

Vite+ Joins the Push to Consolidate JavaScript Tooling

Ruby Central Faces Backlash After Publishing Incident Timeline on RubyGems Access Dispute

`importmap`+`common-ui.es.browser.js`