أنشئ تطبيقك الأول باستخدام Vue.js

إذا لم تقم مطلقًا بإنشاء تطبيق Vue.js ، فسوف أرشدك خلال مهمة إنشاء تطبيق وفهم كيفية عمله. تم الانتهاء من التطبيق الذي سننشئه بالفعل ، وهو تطبيق Vue CLI الافتراضي


إذا لم تقم مطلقًا بإنشاء تطبيق Vue.js ، فسوف أرشدك خلال مهمة إنشاء تطبيق وفهم كيفية عمله.

المثال الأول

أولاً ، سأستخدم المثال الأساسي لاستخدام Vue.

تقوم بإنشاء ملف HTML الذي يحتوي على

<html>
  <body>
    <div id="example">
      <p>{{ hello }}</p>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script>
        new Vue({
            el: '#example',
            data: { hello: 'Hello World!' }
        })
    </script>
  </body>
</html>

وتفتحه في المتصفح. هذا هو أول تطبيق Vue لك! يجب أن تعرض الصفحة رسالة "Hello World!" رسالة.

أضع علامات البرنامج النصي في نهاية النص بحيث يتم تنفيذها بالترتيب بعد تحميل DOM.

ما يفعله هذا الرمز هو إنشاء تطبيق Vue جديد مرتبط بـ#exampleعنصر كقالبه (يتم تعريفه باستخدام محدد CSS عادةً ، ولكن يمكنك أيضًا تمرير HTMLElement).

بعد ذلك ، يقوم بربط هذا القالب بملفdataموضوع. هذا كائن خاص يستضيف البيانات التي نريد أن يقدمها Vue.

في القالب الخاص{{ }}تشير العلامة إلى أن هذا جزء من القالب ديناميكي ، ويجب البحث عن محتواه في بيانات تطبيق Vue.

انظر على Codepen

يمكنك مشاهدة هذا المثال على Codepen:https://codepen.io/flaviocopes/pen/YLoLOp

Codepen

يختلف Codepen قليلاً عن استخدام ملف HTML عادي ، وتحتاج إلى تكوينه للإشارة إلى موقع مكتبة Vue في إعدادات القلم:

Pen settings

المثال الثاني: التطبيق الافتراضي Vue CLI

دعونا نرتقي باللعبة قليلاً. تم الانتهاء من التطبيق التالي الذي سنبنيه بالفعل ، وهوتطبيق Vue CLI الافتراضي.

ما هو Vue CLI؟ إنها أداة مساعدة لسطر الأوامر تساعد في تسريع التطوير من خلال إنشاء هيكل تطبيق لك ، مع تطبيق نموذج في مكانه.

هناك طريقتان يمكنك من خلالهما الحصول على هذا التطبيق.

استخدم Vue CLI محليًا

الأول هو تثبيتVue CLIعلى جهاز الكمبيوتر الخاص بك ، وقم بتشغيل الأمر

vue create <enter the app name>

استخدم CodeSandbox

أبسط طريقة ، دون الحاجة إلى تثبيت أي شيء ، هي الذهاب إلىhttps://codesandbox.io/s/vue.

CodeSandbox هو محرر كود رائع يسمح لك بإنشاء تطبيقات في السحابة ، مما يسمح لك باستخدام أي حزمة npm وأيضًا التكامل بسهولة مع Zeit Now لنشر سهل و GitHub لإدارة الإصدار.

هذا الرابط الذي وضعته أعلاه يفتح التطبيق الافتراضي Vue CLI.

سواء اخترت استخدام Vue CLI محليًا أو من خلال CodeSandbox ، دعنا نفحص تطبيق Vue بالتفصيل.

هيكل الملفات

بجانبpackage.json، التي تحتوي على التكوين ، هذه هي الملفات الموجودة في الهيكل الأولي للمشروع:

  • index.html
  • src/App.vue
  • src/main.js
  • src/assets/logo.png
  • src/components/HelloWorld.vue

index.html

الindex.htmlfile هو ملف التطبيق الرئيسي.

يتضمن الجسم عنصرًا واحدًا بسيطًا فقط:<div id="app"></div>. هذا هو العنصر الذي سيستخدمه تطبيق Vue للإرفاق بـ DOM.

<!DOCTYPE html>
<html>

<head> <meta charset=“utf-8”> <meta name=“viewport” content=“width=device-width,initial-scale=1.0”> <title>CodeSandbox Vue</title> </head>

<body> <div id=“app”></div> <!-- built files will be auto injected --> </body>

</html>

src/main.js

هذه هي ملفات JavaScript الرئيسية التي تقود تطبيقنا.

نقوم أولاً باستيراد مكتبة Vue ومكون التطبيق منApp.vue.

وضعنا "تلميح الإنتاج" على "خطأ" ، فقط لتجنب Vue لإخراج "أنت في وضع التطوير"نصيحة في وحدة التحكم.

بعد ذلك ، نقوم بإنشاء مثيل Vue ، من خلال تخصيصه لعنصر DOM المحدد بواسطة#app، والتي حددناها فيindex.html، ونطلب منه استخدام مكون التطبيق.

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */ new Vue({ el: ‘#app’, components: { App }, template: ‘<App/>’ })

src/App.vue

App.vueهو مكون ملف واحد. يحتوي على 3 أجزاء من التعليمات البرمجية: HTML و CSS و JavaScript.

قد يبدو هذا غريبًا في البداية ، لكن مكونات الملف الفردي هي طريقة رائعة لإنشاء مكونات قائمة بذاتها تحتوي على كل ما تحتاجه في ملف واحد.

لدينا الترميز ، وجافا سكريبت التي ستتفاعل معها ، والأسلوب المطبق عليها ، والذي يمكن تحديده أو لا. في هذه الحالة ، لا يتم تحديد النطاق ، ويتم فقط إخراج CSS الذي يتم تطبيقه مثل CSS العادي على الصفحة.

الجزء المثير للاهتمام يكمن فيscriptبطاقة شعار.

نحن نستورد أعنصرمنcomponents/HelloWorld.vueملف ، والذي سنصفه لاحقًا.

سيتم الإشارة إلى هذا المكون في المكون الخاص بنا. إنها تبعية. سنخرج هذا الكود:

<div id="app">
  <img width="25%" src="./assets/logo.png">
  <HelloWorld/>
</div>

من هذا المكون ، الذي تراه يشير إلى مكون HelloWorld. سيقوم Vue تلقائيًا بإدراج هذا المكون داخل هذا العنصر النائب.

<template>
  <div id="app">
    <img width="25%" src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

<script> import HelloWorld from ‘./components/HelloWorld’

export default { name: ‘App’, components: { HelloWorld } } </script>

<style> #app { font-family: ‘Avenir’, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>

src/components/HelloWorld.vue

إليك مكون HelloWorld ، الذي تم تضمينه في مكون التطبيق.

يقوم هذا المكون بإخراج مجموعة من الروابط مع رسالة.

تذكر أعلاه أننا تحدثنا عن CSS في App.vue ، والتي لم يتم تحديدها؟ قام مكون HelloWorld بتحديد نطاق CSS.

يمكنك بسهولة تحديد ذلك من خلال النظر فيstyleبطاقة شعار. إذا كان يحتوي علىscopedالسمة ، ثم يتم تحديد النطاق<style scoped>

هذا يعني أن CSS الذي تم إنشاؤه سيستهدف المكون بشكل فريد ، عبر فئة يتم تطبيقها بواسطة Vue بشفافية. لا داعي للقلق بشأن هذا ، وأنت تعلم أن CSS لن تفعل ذلكتسريبإلى أجزاء أخرى من الصفحة.

يتم تخزين الرسالة الخاصة بمخرجات المكون في ملفdataالخاص بمثيل Vue ، وإخراجها في القالب كـ{{ msg }}.

أي شيء يتم تخزينه فيهdataيمكن الوصول إليه مباشرة في النموذج من خلال اسمه. لم نكن بحاجة للقولdata.msg، مجردmsg.

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

<script> export default { name: ‘HelloWorld’, data() { return { msg: ‘Welcome to Your Vue.js App’ } } } </script>

<!-- Add “scoped” attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>

قم بتشغيل التطبيق

CodeSandbox لديه وظيفة معاينة رائعة. يمكنك تشغيل التطبيق وتعديل أي شيء في المصدر لينعكس على الفور في المعاينة.

The Vue App

تحميل مجانيكتيب Vue


المزيد من دروس vue: