مهر کدر - آشنایی با Vue CLI و ایجاد پروژه‌های پیشرفته در Vue.js

Vue CLI یک ابزار قدرتمند برای راه‌اندازی سریع و ایجاد پروژه‌های Vue.js است که امکانات گسترده‌ای مانند مدیریت پیکربندی، استفاده از پلاگین‌ها و بهینه‌سازی توسعه را فراهم می‌آورد. با استفاده از Vue CLI می‌توانید پروژه‌های Vue را به‌صورت حرفه‌ای‌تر و بهینه‌تر مدیریت کنید. در این مقاله، به معرفی Vue CLI، نحوه نصب آن و ایجاد یک پروژه پیشرفته می‌پردازیم.

Vue CLI چیست؟

Vue CLI (Command Line Interface) یک ابزار خط فرمان است که توسط تیم Vue.js توسعه یافته و به توسعه‌دهندگان اجازه می‌دهد تا پروژه‌های Vue.js را سریع‌تر و با ساختار بهتری ایجاد و مدیریت کنند. این ابزار شامل ویژگی‌هایی مانند تنظیمات پیش‌فرض برای توسعه پروژه‌های Vue.js، پیکربندی خودکار Webpack، و دسترسی به افزونه‌ها و پلاگین‌های مختلف است.

نصب Vue CLI

برای نصب Vue CLI ابتدا باید Node.js را روی سیستم خود نصب کنید، زیرا Vue CLI به npm یا yarn برای نصب وابسته است.

نصب Vue CLI با npm:



npm install -g @vue/cli

نصب Vue CLI با yarn:



yarn global add @vue/cli

برای اطمینان از نصب موفقیت‌آمیز، می‌توانید نسخه Vue CLI را با دستور زیر بررسی کنید:



vue --version

ایجاد پروژه جدید با Vue CLI

برای ایجاد یک پروژه جدید با Vue CLI، از دستور vue create استفاده کنید.



vue create my-project

در اینجا my-project نام پروژه جدید است.

انتخاب تنظیمات پیش‌فرض یا تنظیمات سفارشی

هنگام اجرای این دستور، Vue CLI به شما گزینه‌هایی برای انتخاب تنظیمات پیش‌فرض یا سفارشی می‌دهد:

Default (Vue 2 or Vue 3): تنظیمات پیش‌فرض Vue که شامل ویژگی‌های اصلی مانند Babel و ESLint است.
Manually select features: امکان انتخاب دقیق ویژگی‌ها مانند TypeScript، Vue Router، Vuex، CSS Pre-processors و غیره را فراهم می‌کند.

پیکربندی تنظیمات سفارشی

با انتخاب گزینه "Manual" می‌توانید به تنظیمات زیر دسترسی پیدا کنید:

Babel: برای تبدیل کد JavaScript به نسخه‌های قدیمی‌تر.
TypeScript: برای اضافه کردن پشتیبانی از TypeScript.
Progressive Web App (PWA) Support: برای ایجاد اپلیکیشن‌های PWA.
Vue Router: برای مدیریت مسیربندی در پروژه‌های SPA.
Vuex: برای مدیریت وضعیت در پروژه‌های پیچیده.
CSS Pre-processors: مانند Sass یا Less برای استفاده از ویژگی‌های پیشرفته CSS.
Linting / Formatter: برای بررسی و قالب‌بندی کد.
Unit Testing و E2E Testing: برای اضافه کردن تست‌های واحد و تست‌های پایان به پایان.

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

ساختار پروژه ایجاد شده با Vue CLI

یک پروژه استاندارد Vue که با Vue CLI ایجاد شده، شامل پوشه‌ها و فایل‌های زیر است:

public: شامل فایل‌های عمومی مانند index.html.
src: شامل فایل‌های اصلی پروژه از جمله کامپوننت‌ها و فایل‌های Vue.
- assets: فایل‌های CSS، تصاویر و سایر منابع ثابت.
- components: کامپوننت‌های Vue.
- views: صفحات Vue برای پروژه‌های چند صفحه‌ای.
- App.vue: کامپوننت اصلی Vue.
- main.js: فایل ورودی که Vue و سایر پلاگین‌ها را وارد می‌کند.
package.json: شامل اطلاعات پروژه و وابستگی‌ها.
babel.config.js: تنظیمات Babel.
vue.config.js: تنظیمات پیکربندی Vue CLI.

اجرای پروژه با Vue CLI

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



cd my-project
npm run serve

این دستور پروژه را در حالت توسعه اجرا کرده و یک سرور محلی راه‌اندازی می‌کند. پس از اجرای موفقیت‌آمیز، خروجی زیر را مشاهده خواهید کرد:



Local: http://localhost:8080

با مراجعه به این آدرس در مرورگر، پروژه Vue.js خود را مشاهده خواهید کرد.

اضافه کردن پلاگین‌ها با Vue CLI

Vue CLI به شما امکان می‌دهد پلاگین‌های متنوعی مانند Vue Router، Vuex و PWA را به راحتی به پروژه اضافه کنید.

مثال: اضافه کردن Vue Router

اگر Vue Router را هنگام ایجاد پروژه انتخاب نکرده‌اید، می‌توانید بعداً آن را با دستور زیر اضافه کنید:



vue add router

پس از اجرای این دستور، Vue CLI به‌صورت خودکار Vue Router را نصب و پیکربندی‌های مربوط به آن را به پروژه شما اضافه می‌کند.

مثال: اضافه کردن Vuex

برای افزودن Vuex:



vue add vuex

این پلاگین به شما امکان مدیریت وضعیت مرکزی در پروژه را می‌دهد و Vue CLI به‌طور خودکار تنظیمات مورد نیاز Vuex را ایجاد می‌کند.

پیکربندی پروژه با vue.config.js

Vue CLI فایل vue.config.js را برای پیکربندی پیشرفته ارائه می‌دهد. این فایل به شما امکان می‌دهد که تنظیمات Webpack، مسیرها و پروکسی سرور را مدیریت کنید.

مثال: تنظیم پروکسی سرور برای API



// vue.config.js
module.exports = {
  devServer : {
    proxy : ' https://api.example.com '
  }
} ;

در این مثال، هر درخواستی که به سرور محلی شما ارسال شود، به آدرس https://api.example.com هدایت می‌شود. این تنظیم برای محیط‌های توسعه و مدیریت درخواست‌های API بسیار مفید است.

ساخت پروژه برای محیط تولید

زمانی که پروژه شما آماده انتشار است، می‌توانید از دستور زیر برای ساخت نسخه بهینه شده آن برای محیط تولید استفاده کنید:



npm run build

Vue CLI فایل‌های مورد نیاز پروژه را به صورت بهینه در پوشه dist قرار می‌دهد که می‌توانید این فایل‌ها را روی سرور بارگذاری کنید.

تست و رفع اشکال پروژه با Vue CLI

Vue CLI امکاناتی برای افزودن تست‌های واحد (Unit Testing) و تست‌های پایان به پایان (E2E Testing) فراهم می‌کند.

تست واحد (Unit Test): برای افزودن تست واحد از Jest یا Mocha استفاده کنید.



vue add unit-jest

تست پایان به پایان (E2E): برای تست‌های E2E از Cypress یا Nightwatch استفاده کنید.



vue add e2e-cypress

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

بهترین شیوه‌ها در استفاده از Vue CLI

استفاده از تنظیمات سفارشی برای پروژه‌های بزرگ: در هنگام ایجاد پروژه، ویژگی‌های مورد نیاز مانند Vue Router، Vuex و CSS Pre-processors را به صورت دقیق انتخاب کنید.
استفاده از پلاگین‌های رسمی: Vue CLI پلاگین‌های رسمی و قابل اطمینانی مانند Vue Router و Vuex ارائه می‌دهد که بهترین عملکرد را با Vue.js دارند.
تنظیم پروکسی سرور در محیط توسعه: اگر از API خارجی استفاده می‌کنید، پروکسی سرور را در vue.config.js تنظیم کنید تا مشکلات CORS برطرف شوند.
استفاده از کامپوننت‌های Lazy Loading: برای افزایش سرعت لود صفحه‌ها، از ویژگی Lazy Loading در Vue Router برای بارگذاری کامپوننت‌ها استفاده کنید.

نتیجه‌گیری

Vue CLI ابزار قدرتمندی است که فرآیند ایجاد و مدیریت پروژه‌های Vue.js را ساده و حرفه‌ای‌تر می‌کند. با امکاناتی مانند تنظیمات خودکار Webpack، مدیریت پلاگین‌ها و پیکربندی‌های پیشرفته، می‌توانید پروژه‌های Vue را بهینه‌تر و ساختارمندتر پیاده‌سازی کنید. آشنایی با Vue CLI به شما کمک می‌کند تا پروژه‌های Vue.js خود را به سطح بالاتری ارتقاء دهید و تجربه بهتری در توسعه برنامه‌های پیچیده و پیشرفته داشته باشید.