← Back to Vue.js Course | Chapter 1: Introduction | Lesson 4 of 7

CDN Setup करना

CDN build आपको कुछ भी install किए बिना किसी भी HTML page पर Vue इस्तेमाल करने देती है।

In this page:

  1. CDN Setup
Syntax
markup
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const { createApp } = Vue;
</script>

CDN Setup

unpkg या jsDelivr जैसे एक CDN से global build include करें। यह createApp और दूसरे helpers वाला एक global Vue object expose करता है। page के अंदर templates browser में compile होते हैं, जो सीखने और छोटे enhancements के लिए convenient है।

Note: stable pages के लिए URL में version pin करें, उदाहरण के लिए [email protected]।

उदाहरण: CDN setup

markup
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">Vue is loaded: {{ loaded }} (version 3: {{ isV3 }})</div>
<script>
  Vue.createApp({
    data() {
      return { loaded: typeof Vue.createApp === "function", isV3: Vue.version.startsWith("3") };
    },
  }).mount("#app");
</script>
</body>
</html>

<!-- Output:
Rendered: Vue is loaded: true (version 3: true)
-->
Live Example
Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
आम गलतियां
  1. script tag भूल जाना
  2. अपने खुद के script के बाद Vue load करना
  3. debug करते वक्त production build इस्तेमाल करना
चैप्टर सारांश
  • Global build script add करें
  • यह Vue global define करता है
  • अपने code से पहले इसे load करें
  • Production में versions pin करें
🔒

Chapter Quiz — Complete all 7 topics to unlock

0/7 topics done

Complete these topics first:

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.