Vue3.js快速开发CDN引入测试模板

文档 -https://cn.vuejs.org/guide/quick-start.html

使用全局构建版本

{{ message }}


  const { createApp } = Vue
  
  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')

使用 ES 模块构建版本

  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }


{{ message }}


  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')

使用 ES 模块拆分版

index.html

DOCTYPE html>

  
    Vue Example
    
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
        }
      }
    

    
  

  
    
  

app.js

// app.js
import { createApp } from "vue";

const app = createApp({
  data() {
    return {
      count: 1,
    };
  },

  template: `+{{ count }}`,

  methods: {
    handleClick() {
      this.count++;
    },
  },

  created() {
    console.log("created");
  },

  mounted() {
    console.log("mounted");
  },
});

app.mount("#app");

启动静态服务器

pnpm i http-server

npx http-server -c-1