کار با Vue CLI 3

Vue CLI ابزاری ساده و در عین حال قدرتمند برای پیاده‌سازی اولیه پروژه‌های Vue.js است. 

Vue CLI اطمینان می‌دهد که ابزارهای تولید مختلف می‌توانند به خوبی با همدیگر کار کنند، بنابراین شما از این پس بجای آنکه روی پیکربندی تمرکز کنید، می‌توانید وقت خود را روی نوشتن اپلیکیشن بگذارید.

Vue CLI ۳ شامل بهترین مواردی می‌شود که در حال حاضر در اکوسیستم Vue بوجود آمده است:

1. معماری مبتنی بر پلاگین
2. گزینه جدیدی که به CLI اضافه شده امکانی است با نام معماری مبتنی بر پلاگین که یکی از قابل‌ توجه‌ترین بهبود‌هایی CLI نسبت به نسخه قبلی که مبتنی بر قالب بود، است. 
3. این بدان معناست که حال تنها یک قالب وجود دارد و برای اضافه کردن دیگر ویژگی‌ها نیاز است که پلاگین نصب کنید. 
4. انعطاف‌پذیری
5. کار با نسخه جدید CLI برای نوشتن پروژه‌های جدید بسیار آسان است، بدون اینکه نیاز به کارهای خاصی داشته باشید، تمام ویژگی‌ها به آسانی در اختیارتان خواهد بود. 
6. پروژه را ایجاد کنید، شروع به کدنویسی کنید و وقتی که به ویژگی نیاز داشتید آن را اضافه نمایید.
7. نمونه‌سازی سریع بدون کانفیگ
8. این ویژگی به شما قابلیت ایجاد اپلیکیشن‌ها و کامپوننت‌های ویوجی‌اس را درست مانند فایل‌های HTML می‌دهد.
9. Vuex
10. نسخه جدید CLI به شما قابلیت اضافه کردن Vuex را به پروژه‌های‌تان می‌دهد. این کار درست مانند اضافه کردن Vue router در نسخه‌های قبلی است.
11. تایپ‌اسکریپت
12. قابلیت پشتیبانی از تایپ‌اسکریپت برای ایجاد اپلیکیشن‌های Vue.js اضافه شده است.
13. پلاگین‌های سفارشی
14. اگر پلاگین‌هایی که در این محیط ارائه می‌شود برای‌تان کافی نیست، توانایی ایجاد پلاگین‌های سفارشی و منتشر ساختن آن‌ها برای‌تان فراهم شده است.

نصب کردن Vue CLI 3

برای نصب کردن Vue CLI کد زیر را اجرا کنید:

npm install -g @vue/cli

این دستور آخرین نسخه Vue CLI را برای شما نصب می‌کند. بعد از اینکه این دستور اجرا شد می‌توانید با استفاده از دستور زیر نسخه آن را بررسی کنید:

vue -V

تغییر در دستورات CLI

نسبت به نسخه‌ قبلی CLI تغییرات کمی داشته است. دستورات زیر را مشاهده کنید:

vue create myproject

دستور بالا یک پروژه جدید را با نام myproject ایجاد می‌کند.

vue serve <filename>

دستور بالا برای بکار بردن فایل‌های .js یا .vue در حالت توسعه بدون نیاز به کانفیگ بکار برده می‌شود.

vue build <filename>

بدون نیاز داشتن به کانفیگ، فایل‌های .js و .vue را build کنید.

vue invoke <pluginname>

با استفاده از دستور بالا می‌توانید سازنده‌های پلاگین‌های نصب شده را برای ایجاد فایل‌های مورد نظر پلاگین در جهت کار کردن را فراخوانی کنید. 

vue inspect

دستور بالا پیکربندی وب‌پک مربوط به اپلیکیشن را نمایش می‌دهد.

vue init

دستور بالا برای کاربرانی پیاده‌سازی شده که هنوز قصد استفاده از نسخه ۲ام CLI را دارند، البته برای استفاده از دستورات باید Global Bridge را نصب کنید. برای انجام چنین کاری کدهای زیر را در ترمینال قرار دهید:

npm install -g @vue/cli-init

بعد از اینکه نصب کردن به پایان رسید، حال می‌توانید از نسخه دوم، در محیط نسخه سوم استفاده کنید. 

vue init webpack newapp

ایجاد یک پروژه جدید

برای ایجاد پروژه جدید کد زیر را در ترمینال وارد کنید:

vue create projectname

projectname منظور نام اپلیکیشنی است که قصد ایجاد آن را داریم. در این حالت پروژه به صورت پیشفرض حاوی پیکربندی‌های babel و eslint خواهد بود. اما اگر بخواهید می‌توانید این ویژگی‌ها را به صورت دستی مدیریت کنید.

اگر به صورت پیشفرض اقدام به نصب کنید، CLI پلاگین‌های مورد نیازتان را نصب می‌کند. 

اگر این پروسه را به صورت دستی جلو ببرید، CLI لیست کاملی از پلاگین‌ها را به شما نمایش می‌دهد که شما می‌توانید بین آن‌ها مورد مناسب را انتخاب کنید.

گزینه‌ها را می‌توانید با استفاده از کلید space انتخاب کنید، اگر به تمام موارد نیاز دارید کلید A را فشار دهید.

براساس پلاگین‌هایی که انتخاب می‌کنید، پیام‌های مختلفی نمایش داده می‌شود. 

گزینه مناسبی که به CLI 3 اضافه شده است این است که با ایجاد یک پروژه به صورت خودار یک repo جدید برای پروژه‌تان نیز ایجاد می‌شود. 

پلاگین‌هایی که به صورت کلی پشتیبانی می‌شود:

1. Typescript @vue/typescript
2. Progressive Web App (PWA) @vue/pwa
3. Vue Router
4. Vuex
5. Css Preprocessors ( postcss, css modules, sass, less & stylus )
6. Linter / Formatters @vue/eslint
7. Unit Testing @vue/mocha or @vue/jest
8. E2E Testing @vue/cypress or @vue/nightwatch

Presetها

زمانی که یک پروژه جدید را با استفاده از CLI ایجاد می‌کنید و ویژگی‌های آن را به صورت دستی انتخاب می‌کنید، یک Preset نیز ایجاد می‌شود. Preset ایجاد شده ابزاری است که CLI برای ایجاد فایل‌های پروژه استفاده می‌شود.

Preset با استفاده از JSON نوشته شده و شامل تمام ویژگی‌هایی که زمان ایجاد اپلیکیشن جدید انتخاب کردید، است.

Presetها قابلیت استفاده مجدد را دارند بنابراین به شما این قابلیت را می‌دهند که بدون تنظیم دوباره بخش مربوط به ویژگی‌ها در یک اپلیکیشن جدید آن‌ها را ایجاد کنید. برای ایجاد یک پروژه جدید با استفاده از CLI از طریق Preset قبلی، دایرکتوری را به موقعیت Preset تغییر دهید و کد زیر را اجرا نمایید:

vue create -p presetname newproject

اضافه کردن پلاگین‌ها به یک پروژه موجود 

برای اضافه کردن پلاگین به یک پروژه که در حال حاضر موجود است، تنها کافی است کد زیر را اجرا کنید:

vue add @vue/pwa

@vue/pwa نام پلاگینی است که قصد اضافه آن را داریم. در این حالت ما یک پلاگین اپلیکیشن پیش‌رونده را به محیط توسعه اضافه می‌کنیم.

یک مورد که نیاز است به آن توجه کنید این است نسخه جدید CLI از راه‌حل‌های میانبر بهره می‌گیرد. برای مثال @vue/pwa یک دستور کوتاه شده برای پکیج @vue/cli-plugin-pwa است. 

نمونه‌سازی سریع بدون پیکربندی 

نسخه جدید CLI آماده کردن فایل‌های .js و .vue را در پروسه توسعه بسیار آسان ساخته است. برای این کار می‌توانید از دستور vue serve و vue build استفاده کنید.

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

برای استفاده از این دستور ابتدا نیاز دارید که به صورت کامل سرویس vue CLI را نصب کنید. برای انجام این کار دستور زیر را وارد نمایید:

npm install -g @vue/cli-service-global

بعد از اینکه نصب کامل شد، می‌توانید از vue serve یا vue build استفاده کنید.

vue serve

vue serve app.vue

app.vue نام فایل و یا کامپوننتی است که قصد آماده کردن آن را دارید. دستور serve همچنین گزینه‌ای را فراهم کرده است که بعد از اجرا شدن دستور، فایل در مرورگر اجرا شود. برای انجام این کار گزینه -o را فراخوانی کنید:

vue serve -o app.vue

vue build

vue build app.vue

app.vue نام فایل و یا کامپوننتی است که قصد آماده کردن آن را دارید. دستور vue build یک محصول را برای باندل شدن آماده می‌کند. همچنین به شما قابلیت تعیین کردن آن به صورت کتابخانه یا وب کامپوننت را می‌دهد. 

برای اینکه بتوانید آن را به عنوان یک کتابخانه ایجاد کنید دستور vue build -t lib app.vue و برای ایجاد به عنوان کامپوننت وب دستور vue build -t wc app.vue را بنویسید.

متغیرهای محیط

CLI جدید به شما قابلیت استفاده از متغیرهای محیطی با استفاده از فایل .env را در روت پروژه‌ها می‌دهد. فایل شامل یکسری جفت‌های key=value است.

هرکسی نیاز به مدیریت حداقل ۲ مورد از این محیط را دارد. برای انجام این کار به صورت کارآمد، CLI قابلیتی با نام modeها را معرفی کرده است.

modeها نام دیگری برای env هستند که در وضعیت شما در حالت‌های توسعه، تولید ویا تست را معلوم می‌کند. 

برای ایجاد یک متغیر که تنها در موقعیت‌های خاص استفاده شود، باید نام mode را به عنوان یک پسوند فایل .env قرار دهید. 

.env.development برای حالت توسعه و .env.production برای حالت تولید استفاده می‌شود. 

نکته:  در CLI برای قرار دادن یک متغیر در کدهای باندل شده مشتری نیاز است که پیشوند VUE_APP_ را اضافه کنید. برای مثال برای متغیر seckey نام VUE_APP_SECKEY شکل می‌گیرد.

کانفیگ مربوط به وب‌پک

Vue CLI راهکار بسیار آسان و منعطفی را برای استفاده از کانفیگ داخلی وب‌پک پیاده‌سازی کرده است. برای استفاده از آن باید گزینه configureWebpack را در vue.config.js بکار ببرید.

 // vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

اگر چنین فایلی را در پروژه‌تان ندارید پس نیاز است که آن را به صورت دستی ایجاد کنید. برای اینکه بتوانید از تمام کانفیگ‌های وب‌پک خروجی بگیرید می‌توانید از دستور زیر استفاده نمایید:

vue inspect > output.js

در پایان

در زمان نوشتن این مطلب CLI هنوز در نسخه بتا خود به سر می‌برد، بنابراین ممکن است با باگ‌هایی مواجه شوید. بنابراین فعلا پیشنهاد می‌شود که در یک اپلیکیشن مهم از آن استفاده نکنید.

منبع