VueJS - पर्यावरण सेटअप

VueJS को स्थापित करने के कई तरीके हैं। स्थापना को कैसे आगे बढ़ाया जाए, इसके कुछ तरीकों पर आगे चर्चा की गई है।

HTML फ़ाइल में सीधे <script> टैग का उपयोग करना

<html>
   <head>
      <script type = "text/javascript" src = "vue.min.js"></script>
   </head>
   <body></body>
</html>

घर साइट पर जाएं https://vuejs.org/v2/guide/installation.htmlVueJS और जरूरत के अनुसार vue.js डाउनलोड करें। उपयोग के लिए दो संस्करण हैं - उत्पादन संस्करण और विकास संस्करण। विकास संस्करण को छोटा नहीं किया गया है, जबकि उत्पादन संस्करण को कम से कम स्क्रीनशॉट में दिखाया गया है। विकास संस्करण परियोजना के विकास के दौरान चेतावनी और डिबग मोड के साथ मदद करेगा।

CDN का उपयोग करना

हम सीडीएन लाइब्रेरी से VueJS फ़ाइल का उपयोग भी शुरू कर सकते हैं। सम्बन्धhttps://unpkg.com/vueVueJS का नवीनतम संस्करण देगा। VueJS jsDelivr पर भी उपलब्ध है (https://cdn.jsdelivr.net/npm/vue/dist/vue.js) और सीडीएनजे (https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js)।

यदि आवश्यक हो तो हम फाइलों को अपने अंत में होस्ट कर सकते हैं और VueJS विकास के साथ शुरू कर सकते हैं।

एनपीएम का उपयोग करना

VueJS के साथ बड़े पैमाने पर अनुप्रयोगों के लिए, यह npm पैकेज का उपयोग करके स्थापित करने के लिए अनुशंसित है। यह Browserify और Webpack के साथ-साथ अन्य आवश्यक उपकरणों के साथ आता है, जो विकास में मदद करते हैं। Npm का उपयोग करके इंस्टॉल करने की कमांड निम्नलिखित है।

npm  install vue

CLI कमांड लाइन का उपयोग करना

VueJS भी VU स्थापित करने और सर्वर सक्रियण के साथ आरंभ करने के लिए CLI प्रदान करता है। सीएलआई का उपयोग कर स्थापित करने के लिए, हमें सीएलआई स्थापित करना होगा जो निम्न कमांड का उपयोग करके किया जाता है।

npm install --global vue-cli

एक बार हो जाने के बाद, यह VueJS के लिए CLI संस्करण दिखाता है। स्थापना के लिए कुछ मिनट लगते हैं।

+ [email protected]
added 965 packages in 355.414s

वेबपैक का उपयोग करके प्रोजेक्ट बनाने का कमांड निम्नलिखित है।

vue init webpack myproject

आरंभ करने के लिए, निम्न कमांड का उपयोग करें।

cd myproject
npm install
npm run dev

एक बार जब हम npm रन देव को निष्पादित करते हैं, तो यह सर्वर को शुरू करता है और ब्राउज़र में प्रदर्शित होने के लिए url प्रदान करता है जो निम्न स्क्रीनशॉट में दिखाया गया है।

सीएलआई का उपयोग करने वाली परियोजना संरचना निम्न की तरह दिखती है।