vue是一个渐进js框架
渐进式:按需引入Vue.js的部分功能,不用把整个框架都导入
1. 传统开发方式
用vue.global.js
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="vue.global.js"></script>
</head><body><div id="app"><!-- 插值表达式 -->{{msg}}<h2>{{web.title}}</h2><h3>{{web.url}}</h3></div><script>const { createApp, reactive } = VuecreateApp({setup() {const web = reactive({title: "tao355667",url: "tao355667.com"})return {msg: "success",web}}}).mount("#app")</script>
</body></html>
2. 模块化开发
用vue.esm-browser.js
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><!-- 插值表达式 -->{{msg}}<h2>{{web.title}}</h2><h3>{{web.url}}</h3></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const web = reactive({title: "tao355667",url: "tao355667.com"})return {msg: "success",web}}}).mount("#app")</script>
</body></html>
参考
https://www.bilibili.com/video/BV1nV411Q7RX
