فصل پیوست ۴: استفاده و کار با پلاگین‌ها در CLI جدید

Use and Work with Plugins in the New CLI

Vue.JS 2 - فصل پیوست 4: استفاده و کار با پلاگین ها در CLI جدید - قسمت 137

همانطور که در جلسات اولیه این فصل توضیح دادم، نسخه سوم و چهارم Vue CLI به ما اجازه می دهند که پس از ساخته شدن پروژه، پلاگین های جدیدی را به آن اضافه کنیم. برای اینکه بخواهیم وارد این مباحث شویم باید ابتدا بدانیم که چه پلاگین هایی روی پروژه ما نصب هستند و چه ساختاری دارند. اگر به فایل vuerc یا package.json خود نگاه بیندازید می بینید که تمام پلاگین های Vue (حتی آن هایی که خودتان می سازید) باید از یک الگوی نام خاص پیروی کنند. تمام این پکیج ها و پلاگین ها باید ساختار زیر را برای نام خود داشته باشند:

vue-cli-plugin-NAME

به جای NAME باید نام پلاگین مورد نظر خود را قرار دهید. پلاگین هایی که رسمی باشند و توسط تیم توسعه Vue.js ساخته شده باشند در مسیر زیر قرار دارند:

@vue/cli-plugin-NAME

برای مثال یکی از این پلاگین ها Vuetify است که آدرس زیر را دارد:

https://github.com/vuetifyjs/vue-cli-plugins/tree/master/packages/vue-cli-plugin-vuetify

این پکیج یک نوع تم برای فریم ورک Vue.js حساب می شود که ظاهر خیلی جالبی به برنامه های ما اضافه می کند. بیایید برای تمرین آن را نصب کنیم. نام این پکیج به صورت vue-cli-plugin-vuetify است و از ساختاری که توضیح دادم پیروی می کند بنابراین برای نصب آن نیازی به npm نداریم، بلکه در ترمینال خودمان در پروژه می گوییم:

vue add vuetify

اگر نام این پکیج دقیقا از ساختاری که گفتم استفاده نمی کرد، نمی توانستیم از دستور بالا استفاده کنیم. کد بالا ساختار خاصی دارد که باید همیشه رعایت شود: ابتدا vue add را آورده و سپس قسمت انتهایی نام (همان NAME در ساختار بالا) را می آوریم. با این کار پکیج vuetify نصب می شود. با اجرای این دستور چند سوال از شما پرسیده می شود که مربوط به پیکربندی این پلاگین است. مثلا از شما می پرسد که از pre-made template ها استفاده شود؟ من y را می زنم (یعنی yes) سپس می گوید از custom theme استفاده شود؟ من می گویم n (یعنی no). سپس می گوید آیا از کامپوننت های a-la-carte استفاده شود؟ یعنی کامپوننت هایی که به صورت جداگانه import و نصب می شوند تا حجم bundle ما را کم کنند. من برای این گزینه نیز y را انتخاب می کنم. نهایتا اگر از شما سوال شد که آیا از babel/polyfill استفاده شود نیز yes را بزنید.

آپدیت: بعد از نوشته شدن این مقاله، آپدیت جدیدی برای پکیج vuetify ارائه شده است و فقط یک سوال را از شما می پرسد. از شما خواسته می شود که یک preset را انتخاب کنید (Choose a preset) که من default را انتخاب می کنم تا خودش به صورت پیش فرض کار ها را انجام دهد. اگر گزینه configure را بزنید، گزینه های بالا که در موردشان صحبت کردیم برایتان باز می شوند و باید از بین آن ها انتخاب کنید.

حالا اگر دستور npm run serve را دوباره اجرا کنیم (اگر در حال اجرا بوده است، آن را قطع کرده و دوباره اجرا کنید) برنامه خود را با ظاهری کاملا متفاوت در مرورگر مشاهده خواهیم کرد. در ضمن تمام پکیج ها از نوع Vue-cli نیستند بنابراین اگر پکیجی را دیدید که از این نوع نبود و می خواستید از آن در برنامه خود استفاده کنید باید از روش عادی npm install جلو بروید.

یک دسته دیگر از پلاگین هایی که می توانیم با آن کار کنیم، پلاگین های مربوط به pre-processor های زبان CSS هستند. من زمانی که پروژه خود را ایجاد می کردیم از SCSS استفاده نکردم. این مسئله را در کد های فایل vuerc. من می بینید:

{
  "useTaobaoRegistry": false,
  "presets": {
    "my-standard-preset": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-pwa": {},
        "@vue/cli-plugin-router": {
          "historyMode": true
        },
        "@vue/cli-plugin-vuex": {},
        "@vue/cli-plugin-eslint": {
          "config": "standard",
          "lintOn": [
            "save"
          ]
        }
      }
    }
  }
}

راه دیگر انجام این کار، مراجعه به فایل package.json است تا ببینید چه پکیج هایی دارید. همانطور که می دانید کار کردن با زبان CSS قوانین خاص خودش را دارد. مثلا فرض کنید که من بخواهم تگ <small> را در صفحه ای از برنامه خود هدف بگیرم. برای این کار باید بگوییم:

<style scoped>
footer small {
  color: red;
}
</style>

اما اگر از pre-processor های CSS استفاده کنید، می توانید کد بالا را به شکل زیر بنویسید:

 <style scoped>
footer {
  small {
    color: red;
  }
}
</style>

این روش نوشتار برای برخی از برنامه نویسان راحت تر است و به خاطر قابلیت های اینچنینی (و ده ها قابلیت دیگر) ترجیح می دهند از pre-processor ها استفاده کنند. مشکل اینجاست که با نوشتن کد بالا درون هر کامپوننتی، با خطا روبرو می شوید. چرا؟ به دلیل اینکه در حالت پیش فرض زبان استایل دهی در Vue روی CSS تنظیم شده است. برای حل این مشکل می توانیم به Vue بگوییم که ما در حال استفاده از SCSS هستیم:

<style scoped lang="scss">
footer {
  small {
    color: red;
  }
}
</style>

خصوصیت lang مشخص کننده language یا زبان استایل دهی شما است. با انجام این کار خطاها از بین می رود اما اگر کد ها را ذخیره کنید، خطا می گیرید. چرا؟ به دلیل اینکه اضافه کردن lang یعنی پشتیبانی از syntax (نحو) خاص یک زبان. برای اینکه SCSS واقعا کار کند باید آن را به صورت یک پلاگین روی پروژه خود نصب کنیم. البته از آنجایی که این پکیج در زمان نوشتن این مقاله، نسخه ای مخصوص برای Vue CLI سوم و چهارم ندارد، باید از npm برای نصب آن استفاده کنیم:

npm install --save sass-loader node-sass

پکیج های sass-loader و node-sass برای استفاده از SASS اجباری هستند بنابراین هر دو را باید نصب کنیم. پس از نصب آن ها دوباره دستور npm run serve را اجرا می کنم و این بار بدون خطا کد های ما کامپایل می شود.

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش رایگان Vue js از صفر تا صد توصیه می‌کند:
نویسنده شوید
دیدگاه‌های شما

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.