Differences

This shows you the differences between two versions of the page.

--- library:web:vue_misc [2022/09/10 07:52]
lhaosen [VUE Misc]
+++ library:web:vue_misc [2022/09/10 08:37] (current)
lhaosen [2. 不使用构建工具使用Vue]
@@ Line 1: / Line 1: @@
 ====== Vue Misc ======
-===== - 安装 =====
+===== - 安装开发环境 =====
   * 安装 node 环境（包含 npm包管理器）
   * 安装 vue cli 脚手架
@@ Line 43: / Line 43: @@
 打开 http://localhost:8080
-===== - 升级Node.js =====
+===== - 不使用构建工具使用Vue =====
-  npm cache clean -f
+如果没有使用任何构建工具，而是从 CDN 或其他源来加载 Vue，请确保在部署时使用的是生产环境版本（以 .prod.js 结尾的构建文件）。生产环境版本会被最小化，并移除了所有仅用于开发环境的代码分支。
-  npm install -g n
+  * 如果需要使用全局变量版本（通过 Vue 全局变量访问）：请使用 vue.global.prod.js。
+  * 如果需要 ESM 版本（通过原生 ESM 导入访问）：请使用 vue.esm-browser.prod.js。
+  - 官网下载Vue.js文件 https://unpkg.com/browse/vue@3.0.11/dist/
+  - 引入
+<code>
+<script src="https://unpkg.com/vue@3"></script>
+<div id="app">{{ message }}</div>
+<script>
+  const { createApp } = Vue
+  createApp({
+    data() {
+      return {
+        message: 'Hello Vue!'
+      }
+    }
+  }).mount('#app')
+</script>
+</code>
 ===== - 搭建测试  =====

GuangZhou Xinsi Technology Co. Ltd.