在html中使用vue和element

方便快速开发和测试一些小功能，我们可以直接在html中引入vue、element-ui、unocss等，而不需要使用 vue-cli、vite 等工具。

引入方式

这里 CDN 使用了unpkg，但你也可以使用任何提供 npm 包服务的 CDN，例如 jsdelivr 或 cdnjs，甚至是esm。当然，你也可以下载此文件并自行提供服务。

示例代码

<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- Import style -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-plus/dist/index.css"
    />
    <!-- Import Vue 3 -->
    <script src="https://unpkg.com/vue@3"></script>
    <!-- Import component library -->
    <script src="https://unpkg.com/element-plus"></script>
    <!-- Import unocss -->
    <script>
      window.__unocss = {
        shortcuts: {
          full: 'w-full h-full',
          'flex-col': 'flex flex-col',
          'flex-items': 'flex items-center',
          'flex-b-c': 'flex justify-between items-center',
          'flex-center': 'flex justify-center items-center',
          'flex-col-center': 'flex flex-col justify-center items-center',
          'border-default': 'border border-solid',
        },
      }
    </script>
    <script src="https://unpkg.com/@unocss/runtime"></script>
  </head>

  <body>
    <div id="app">
      <div class="border-default flex-center p-20px">
        <el-button class="m-30px" type="primary">{{ message }}</el-button>
      </div>
    </div>

    <script>
      const { createApp, ref } = Vue
      const { ElMessage } = ElementPlus

      const App = {
        setup() {
          const message = ref('Hello vue!')

          function handleClick() {
            ElMessage.success('Hello Element Plus!')
          }

          return {
            message,
            handleClick,
          }
        },
      }

      const app = Vue.createApp(App)
      app.use(ElementPlus)
      app.mount('#app')
    </script>
  </body>
</html>

摸鱼鱼

是的，这是一篇摸鱼混水的文章💦，但是这种方式在一些小功能的开发和测试中还是很方便的，毕竟不需要配置环境🙈。

在html中使用vue和element

引入方式

相关链接

示例代码

摸鱼鱼