Differences

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

--- library:web:vue_misc [2022/09/09 11:47]
lhaosen [1.4 初始化第一个vue项目]
+++ library:web:vue_misc [2022/09/10 08:37] (current)
lhaosen [2. 不使用构建工具使用Vue]
@@ Line 1: / Line 1: @@
-====== VUE Misc ======
+====== Vue Misc ======
-===== - 安装 =====
+===== - 安装开发环境 =====
   * 安装 node 环境（包含 npm包管理器）
   * 安装 vue cli 脚手架
@@ Line 14: / Line 14: @@
   # 安装过程日志 ...
+  # For Windows
+  download from https://nodejs.org/zh-cn/download/, and install
+  # Check it
   node -v
   v16.4.2
@@ Line 29: / Line 33: @@
   npm install -g cnpm –registry=https://registry.npm.taobao.org
+  cnpm install -g vue-cli
 ==== - 初始化第一个vue项目 ====
-  test  vue init webpack firstApp
+  vue init webpack webapp_test
 ==== - 测试 ====
+  cd <webapp_test>
+  npm run dev
 打开 http://localhost:8080
+===== - 不使用构建工具使用Vue =====
+如果没有使用任何构建工具，而是从 CDN 或其他源来加载 Vue，请确保在部署时使用的是生产环境版本（以 .prod.js 结尾的构建文件）。生产环境版本会被最小化，并移除了所有仅用于开发环境的代码分支。
+  * 如果需要使用全局变量版本（通过 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>
+===== - 搭建测试  =====
+  # install http server
+  npm install http-server -g
+  http-server -v
+  v14.1.1
+  http-server -p 8080

GuangZhou Xinsi Technology Co. Ltd.

User Tools

Site Tools

Differences

Page Tools