JZTXT

vue3

发布时间 2023-06-28 10:39:48作者: 噬蛇之牙

https://cn.vuejs.org/guide/introduction.html#what-is-vue

简介

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')
  • 无需构建步骤，渐进式增强静态的 HTML
    • 注释：petite-vue，用于渐进式增强静态的 HTML，可以把 html 中部分片段作为 vue 组件
  • 在任何页面中作为 Web Components 嵌入
    • 注释：Vue 提供了一个 defineCustomElement 方法，用来将 Vue 组件转换成一个继承自 HTMLElement 的自定义元素构造器。
import { defineCustomElement } from "vue";

const MyVueElement = defineCustomElement({
  // 这里是同平常一样的 Vue 组件选项
  props: {},
  emits: {},
  template: `...`,
  // defineCustomElement 特有的：注入进 shadow root 的 CSS
  styles: [`/* inlined css */`],
});

// 注册自定义元素
// 注册之后，所有此页面中的 `<my-vue-element>` 标签
// 都会被升级
customElements.define("my-vue-element", MyVueElement);
  • Jamstack / 静态站点生成 (SSG)
    • 注释：Jamstack / 静态站点生成 (SSG) 是一种构建快速网站的技术，它使用一系列配置、模板和数据，生成静态 HTML 文件及相关资源，并将它们部署到任何支持静态文件的 Web 服务器或 CDN 上
  • 选项式 API 是在组合式 API 的基础上实现的

快速上手

  • 可以使用导入映射表 (Import Maps) 来告诉浏览器如何定位到导入的 vue
    • 如果你更喜欢那些还不支持导入映射表的浏览器，你可以使用 es-module-shims 来进行 polyfill
<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>
  • 如果直接在浏览器中打开了上面的 index.html，你会发现它抛出了一个错误，因为 ES 模块不能通过 file:// 协议工作。为了使其工作，你需要使用本地 HTTP 服务器通过 http:// 协议提供 index.html
  • 这里导入的组件模板是内联的 JavaScript 字符串。如果你正在使用 VSCode，你可以安装 es6-string-html 扩展，然后在字符串前加上一个前缀注释 /html/ 以高亮语法。

创建一个 Vue 应用