js es module 示例

2022-09-23 23:17 271人阅读评论 (0)
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>es module</title>
</head>
<body>
<div id="app">
  <div>
    <button @click="handle">
      Count is: {{ count }}
    </button>
  </div>
  <div>
    <el-button @click="handle">
      Count is: {{ count }}
    </el-button>
  </div>
</div>
<script type="importmap">
{
  "imports": {
    "vue": "https://unpkg.com/vue@3.2.39/dist/vue.esm-browser.prod.js",
    "element-plus": "https://unpkg.com/element-plus@2.2.17/dist/index.full.min.mjs",
    "element-plus/es/locale/lang/zh-cn": "https://unpkg.com/element-plus@2.2.17/dist/locale/zh-cn.min.mjs",
    "element-plus/dist/index.css": "https://unpkg.com/element-plus@2.2.17/dist/index.css"
  }
}
</script>
<!-- <link rel="stylesheet" href="https://unpkg.com/element-plus@2.2.17/dist/index.css" /> -->
<!-- <script type="importmap">
{
  "imports": {
    "vue": "/node_modules/vue/dist/vue.esm-browser.prod.js",
    "element-plus": "/node_modules/element-plus/dist/index.full.min.mjs",
    "element-plus/es/locale/lang/zh-cn": "/node_modules/element-plus/dist/locale/zh-cn.min.mjs",
    "element-plus/dist/index.css": "/node_modules/element-plus/dist/index.css"
  }
}
</script> -->
<!-- <link rel="stylesheet" href="/node_modules/element-plus/dist/index.css" /> -->
<script type="module">
  import { createApp } from 'vue';
  import ElementPlus from 'element-plus';
  import zhCn from 'element-plus/es/locale/lang/zh-cn';
  // import 'element-plus/dist/index.css'; // 修改这一行
  import sheet from 'element-plus/dist/index.css' assert { type: "css" };
  document.adoptedStyleSheets = [sheet];

  const App = {
    data() {
      return {
        count: 0,
      };
    },
    methods: {
      handle() {
        this.count++;
      },
    },
  };

  createApp(App)
    .use(ElementPlus, { locale: zhCn })
    .mount('#app');
</script>
</body>
</html>
live-server添加ssi中间件 >>
<< chrome 新功能