آشنایی با Vue CLI

Vue CLI

توسط

3 مهر 1399

در قسمت قبل به شما توضیح دادم که چرا به یک سرور محلی و محیط توسعه نیاز داریم. ما می توانیم خودمان چنین محیط توسعه ای را ایجاد کنیم. مثلا با استفاده از Webpack و یکی از loader های خاص آن به نام Vue-loader یک محیط توسعه مناسب راه اندازی کنیم که single file template ها را کامپایل و ادغام کند. با این همه اصلا نیازی نیست که خودمان شروع به پیکربندی و راه اندازی چنین محیطی کنیم بنابراین من در این دوره چنین کاری را انجام نخواهم داد.

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

npm install -g vue-cli

این دستور Vue CLI را به صورت سراسری روی سیستم شما نصب خواهد کرد. با نصب این پکیج به template (قالب) های مختلفی دسترسی خواهیم داشت. مثلا یکی از آن ها simple یا «ساده» نام دارد که یک فایل index.html به علاوه دستور import فریم ورک Vue است (دقیقا همان چیزی که تا این قسمت داشته ایم). پکیج بعدی webpack-simple است که یک محیط توسعه مناسب را به ما می دهد و از Webpack استفاده می کند. ما در طول این دوره از همین پکیج استفاده می کنیم. پکیج بعدی یک پکیج بسیار بزرگ تر است که قابلیت های Testing و جزئیات بسیار زیادی را در خود دارد و webpack نامیده می شود. ما در این دوره نمی خواهیم وارد پیش پردازنده های CSS و مباحث testing بشویم بنابراین این پکیج به درد ما نمی خورد. در نهایت پکیج بعدی browserify است که معادل همان weback یا weback-simple می باشد (بسته به اینکه چه نسخه ای از آن را نصب کنید) اما از آنجایی که Webpack ابزار مناسب تر و مشهورتری می باشد من از webpack-simple در این دوره استفاده خواهم کرد. در ضمن به غیر از پکیج اول (simple) تمام پکیج های دیگر کد ها را کامپایل می کنند بنابراین کد های ما سبک تر شده و نیازی به داشتن کامپایلر Vue نیست.

راه اندازی و نصب Vue CLI

برای شروع یک پنجره ترمینال را باز کرده و دستور زیر را در آن اجرا کنید:

npm install -g vue-cli

اگر از mac استفاده می کنید باید دستور زیر را اجرا کنید:

sudo npm install -g vue-cli

نکته: برای اجرای دستور بالا به nodejs نیاز دارید. بنابراین به وب سایت رسمی nodejs سر زده و آن را دانلود کنید. ما هیچ کد nodejs ای نخواهیم نوشت اما به پکیج npm آن نیاز داریم و تنها دلیل نصب آن هم همین است.

حالا برای اینکه بتوانیم یک پروژه جدید را بسازیم باید ابتدا به پوشه مورد نظر خودمان برویم. مثلا یک پوشه جدید بسازید و نام آن را Vue Training قرار بدهید. سپس ترمینال را باز کرده و دستور زیر را اجرا کنید:

Vue init webpack-simple vue-cli

توجه داشته باشید که vue-cli در دستور بالا نام پوشه ای است که پروژه در آن ایجاد خواهد شد بنابراین می توانید آن را کاملا تغییر دهید. همچنین در صورتی که می خواهید پروژه در پوشه فعلی شما ایجاد شود قسمت آخر را ذکر نکنید. مثلا:

Vue init webpack-simple

من همان دستور اول را اجرا می کنم تا پوشه جدیدی به نام vue-cli برایم ایجاد شود. پس از اجرای این دستور در همان صفحه ترمینال از شما پرسیده می شود که ابتدا نام پروژه (project name) سپس توضیحات پروژه (project description) و نهایتا نام نویسنده/توسعه دهنده پروژه (Author) را تعیین کنید. در نسخه های جدید از شما پرسیده می شود که license را نیز انتخاب نمایید که همان مقدار پیش فرض (MIT) کافی است (چیزی تایپ نکنید و فقط enter بزنید) سپس سوال نهایی این است که آیا از SASS استفاده خواهید کرد؟ ما فعلا چنین کاری نمی کنیم بنابراین n را تایپ کرده (مخفف no) و enter بزنید.

پس از وارد کردن این مقادیر (همگی به سلیقه خودتان بستگی دارند) از شما خواسته می شود که ابتدا دستور cd vue-cli را اجرا کنید تا ترمینال وارد پوشه vue-cli شود. سپس دستور npm install را اجرا می کنید تا وابستگی های این پروژه دانلود شود (کمی طول می کشد) و نهایتا با اجرای npm run dev می توانیم سرور مجازی خود را راه بیندازیم.

معمولا با اجرای npm run dev پروژه ما به صورت خودکار روی پورت 8080 در مرورگر باز می شود اما اگر نشد، کافی است آدرسی را که به شما داده شده است (localhost:8080) در مرورگر وارد کنید. حالا اگر وارد پوشه vue-cli بشوید، چند فایل وجود دارد که باید آن ها را برایتان توضیح بدهم. ابتدا پوشه ای به نام src داریم که پوشه اصلی ما است و سورس کد Vue را در آنجا می نویسیم (بعدا مفصلا در مورد آن صحبت می کنیم). سپس فایلی به نام babelrc. وجود دارد که مربوط به پیکربندی Babel است (یک ترنسپایلر که کد های ES6 ما را به صورت خودکار به ES5 تبدیل می کند). چرا به Babel نیاز داریم؟ به دلیل اینکه نوشتن کد های ES6 بسیار ساده تر است اما در مرورگر های قدیمی پشتیبانی نمی شود. فایل gitignore. مخصوص سیستم git است که ما با آن کاری نداریم. فایل index.html همان فایلی است که به کاربر ارسال می شود (یعنی همان فایلی که در آدرس localhost:8080 باز شده است).

فایل بعدی ما package.json است که حتما با آن آشنا هستید. این فایل مسئول نگهداری و مدیریت وابستگی های پروژه ما است و به خاطر npm ایجاد شده است. وضعیت بخش وابستگی های پروژه در این فایل به شکل زیر است:

  "dependencies": {
    "vue": "^2.5.11"
  },

"dependencies": {

"vue": "^2.5.11"

یعنی وابستگی ما تنها vue است (البته فقط برای production). برای حالت توسعه (development) وابستگی های زیادی داریم:

  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.4",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }

"devDependencies": {

"babel-core": "^6.26.0",

"babel-loader": "^7.1.2",

"babel-preset-env": "^1.6.0",

"babel-preset-stage-3": "^6.24.1",

"cross-env": "^5.0.5",

"css-loader": "^0.28.7",

"file-loader": "^1.1.4",

"vue-loader": "^13.0.5",

"vue-template-compiler": "^2.4.4",

"webpack": "^3.6.0",

"webpack-dev-server": "^2.9.1"

}

پکیج vue-loader در بالا بسیار مهم است چرا که به ما اجازه می دهد از قابلیت single file template ها استفاده کنیم (بعدا بیشتر در این مورد صحبت خواهیم کرد).

فایل webpack.config.js نیز مسئول پیکربندی و رفتار Webpack است. مثلا اینکه هر فایلی که پسوند vue داشته باشد باید به loader مربوط به vue ارسال شود (همان vue-loader):

      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      }