چرا سکان آکادمی؟
راه اندازی پروژه Vue js با  CLI

راه اندازی پروژه Vue js با CLI

در بخش قبلی از این فصل با روش راه اندازی یک پروژه Vue js با استفاده از NPM آشنا شدیم. در این بخش قصد داریم به شما نحوه ی راه اندازی پروژه Vue js با استفاده از CLI را آموزش دهیم. امیدواریم استفاده لازم را از این بخش ببرید.

قبل از نصب و استفاده از vue-cli بهتر است دو تا نکته را بیان کنیم تا از بروز مشکلات احتمالی جلوگیری شود:

    1.هشدار درمورد نسخه های قبلی vue-cli: در نسخه های قبلی از این پکیج از اسم vue-cli استفاده می شد اما اکنون اسم پکیج به vue/cli@ تغییر پیدا کرده است. اگر قبلاً نسخه های قدیمی (1.x یا x.2) این پکیج را به صورت کلی (globally) نصب کرده اید لازم است ابتدا آن را با استفاده از یکی از دستورهای 

npm uninstall vue-cli -g

یا

yarn global remove vue-cli

uninstall کنید.

    2.نسخه node موردنیاز: vue/cli@ به نسخه  node8,9 و یا بالاتر نیاز دارد.

نصب vue/cli@

برای نصب vue/cli@ می توانید یکی از دو دستور نوشته شده در زیر را استفاده کنید:

npm install -g @vue/cli
yarn global add @vue/cli

برای مشاهده نسخه vue/cli@ نصب شده کافی است از دستور زیر استفاده کنید:

vue --version

برای ارتقا نسخه vue/cli@ نیز می توانید از دستورهای زیر استفاده کنید:

npm upgrade -g @vue/cli
yarn global upgrade --latest @vue/cli

ساخت پروژه vue با اسم دلخواه

خب، حالا که vue/cli@ را نصب کردید، کافی است از دستور زیر استفاده کنید تا پروژه مورد نظر خود را با اسم دلخواه (در اینجا از اسم hello-world استفاده شده است) بسازید:

vue create hello-world

تذکر: با توجه به اینکه در حین اجرای دستور بالا باید کارهای دیگری نیز انجام داد، این کارها را مرحله به مرحله همراه با تصویر آن ها، برای شما نشان می دهیم.

مراحل نصب پکیج های موردنیاز برای ساخت پروژه vue:

پس از اجرای دستور vue create my-project با تصویر زیر رو به رو می شوید که از شما می خواهد یکی از سه گزینه نشان داده شده برای نصب نسخه vue را انتخاب کنید.

select project preset

گزینه اول و دوم به ترتیب نسخه های 2 و 3 فریمورک Vue js را همراه با eslint و babel به شما پیشنهاد می دهد. اما گزینه سوم از شما می خواهد که نسخه vue و تمام پکیج های لازم برای این پروژه را خودتان انتخاب کنید. 

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

پس از انتخاب گزینه موردنظر با تصویر زیر رو به رو می شوید. در این تصویر نیز مانند تصویر قبل کافی است هر کدام از گزینه های زیر را که می خواهید (در این قسمت می توانید بیش از یک گزینه را انتخاب کنید، برای این کار کافی است روی گزینه مورد نظر رفته و سپس دکمه space کامپیوتر خود را فشار دهید تا انتخاب شود) انتخاب و سپس Enter را بزنید تا وارد مرحله بعد شوید.

select project package

در مرحله بعد، طبق تصویر زیر از شما خواسته می شود تا نسخه Vue js را انتخاب کنید:

select vue version

بعد از انتخاب نسخه Vue js مورد نظر باید یکی از گزینه های CSS pre-processor نشان داده شده را انتخاب کرد.

select css pre-processor

بعد از آن نیز باید linter یا formatter موردنظر را انتخاب کرد.

select linter and formatter
select additional lint features

پس از آن نیز باید انتخاب کنید که موارد کانفیگ ESlint، Babel و ... در کجا ذخیره شوند، که ما گزینه اول را انتخاب کردیم.

select eslint config place

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

set preset

برای مثال اگر شما y را نوشته و Enter را فشار دهید از شما می خواهد که یک اسم برای آن انتخاب کنید، که در اینجا برای آن از my-preset استفاده کردیم.

preset name

تذکر: اگر در این مرحله مقدار y را انتخاب کنید پس از نوشتن یک اسم برای آن، در پروژه های بعدی که قصد دارید از vue/cli@ استفاده کنید در اولین مرحله ساخت پروژه، یک گزینه دیگر (اسم نوشته شده توسط شما) به گزینه های قبلی اضافه می شود (مانند تصویر زیر).

show and select presets

پس از این مرحله و زدن Enter ساخت پروژه مانند تصویر زیر شروع می شود:

creating project

پس از ساخت پروژه، نمودار درختی فایل های آن مانند تصویر زیر خواهد بود.

tree diagram of project

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

run project

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

http://localhost:8080

صفحه اول پروژه ساخته شده به صورت زیر است: 

home page of project

این مقاله هم به پایان رسید. آنچه که در این مقاله بیان شد، آموزش راه اندازی یک پروژه Vue js با استفاده از vue/cli@ بود. 

دوره در حال تکمیل است ... rocket