跳至主要內容

vue单html

yzqdev小于 1 分钟

vue单html

Vue3 + element-plus

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>element-plus</title>
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-plus/dist/index.css"
    />
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/element-plus"></script>
  </head>
  <body>
    <div id="app">
      <el-button type="primary" @click="showMsg">element-plus</el-button>
    </div>

    <script>
      const app = Vue.createApp({
        data() {
          return {
            msg: "hhhhh",
          };
        },
        methods: {
          showMsg() {
            ElementPlus.ElMessage("hhh");
          },
        },
      });
      app.use(ElementPlus);
      app.mount("#app");
      // 使用setup
      // const { createApp, reactive, toRefs } = Vue;
      // const data = reactive({
      //   state: 12,
      // });
      // const app = createApp({
      //   setup() {
      //     return {
      //       ...toRefs(data),
      //     };
      //   },
      // });
      // app.mount("#app");
    </script>
  </body>
</html>

Vue3 + element-plus(module and setup)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>element-plus</title>
     
  </head>
  <body>
    <div id="app">
      <button type="primary" @click="showMsg">element-plus</button>
    </div>

    <script type="module">
       
     
         import {  createApp, reactive, toRefs } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
         
      // 使用setup
     
      const data = reactive({
        state: 12,
      });
      const app = createApp({
        setup() {
          function showMsg( ) {
            alert("hhh")
          }
          return {
showMsg,
            ...toRefs(data),
          };
        },
      });
    
      app.mount("#app");
    </script>
  </body>
</html>

naiveui

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>naive</title>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    
    <script src="https://unpkg.com/naive-ui"></script>  
  </head>
  <body>
    <div id="app">
      <n-button>{{ message }}</n-button>
    </div>
    <script type="module">
     
      
      const App = {
        setup() {
          return {
            message: 'naive',
          }
        },
      }
      const app =Vue. createApp(App)
       app.use(naive)
      app.mount('#app')
    </script>
  </body>
</html>

使用quasar

https://quasar.dev/start/umd

<!DOCTYPE html>
<html>
  <!--
    WARNING! Make sure that you match all Quasar related
    tags to the same version! (Below it's "@2.3.2")
  -->

  <head>
    <!-- <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"
      rel="stylesheet"
      type="text/css"
    /> -->
    <link
      href="https://unpkg.com/quasar/dist/quasar.prod.css"
      rel="stylesheet"
      type="text/css"
    />
  </head>

  <body>
    <!-- example of injection point where you write your app template -->
    <div id="q-app">
      <q-btn>按钮</q-btn>
      <q-card class="my-card">
        <q-card-section> {{ lorem }} </q-card-section>
      </q-card>
    </div>

    <!-- Add the following at the end of your body tag -->
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/quasar/dist/quasar.umd.prod.js"></script>
    <script src="https://unpkg.com/quasar/dist/lang/zh-CN.umd.prod.js"></script>

    <script>
      /*
        Example kicking off the UI. Obviously, adapt this to your specific needs.
        Assumes you have a <div id="q-app"></div> in your <body> above
       */
      const app = Vue.createApp({
        setup() {
          return {
            lorem:
              "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
          };
        },
      });

      app.use(Quasar);
      Quasar.lang.set(Quasar.lang.zhCN);
      app.mount("#q-app");
    </script>
  </body>
</html>