فصل پیوست ۴: آشنایی با پروژه در CLI جدید

Familiarity with the Project in the New CLI

ما در قسمت قبل با نسخه سوم Vue CLI آشنا شدیم و نگاهی کلی به قابلیت های آن داشتیم. اگر بخواهم به طور خلاصه بگویم برای نصب آن باید دستور npm install -g @vue/cli را اجرا کرده و سپس با vue create your-project-name یک پروژه را ایجاد می کردید. سپس تنظیمات خود را انتخاب کرده و منتظر می مانید تا پروژه شما ایجاد شود. اگر یادتان باشد من در جلسه قبل از دستور زیر برای ساخت پروژه خودم استفاده کرده بودم:

vue create vue-cli-new

بنابراین پس از اجرای شدن این دستور، پوشه ای به نام vue-cli-new ایجاد می شود. خود این پوشه در مسیری ایجاد خواهد شد که ترمینال در آن باز شده و دستور بالا را در آن اجرا کرده اید. زمانی که ساخت پروژه تمام شود پیام زیر را در ترمینال می بینید:

Successfully created project vue-cli-new.
Get started with the following commands:
 $ cd vue-cli-new
 $ npm run serve

یعنی پوشه vue-cli-new ایجاد شده است و باید از دستور cd استفاده کنیم تا با ترمینال وارد آن شویم. البته روش دیگر این است که ترمینال را بسته و وارد پوشه vue-cli-new شده و با نگه داشتن کلید Shift در قسمتی خالی از صفحه کلیک راست کرده و گزینه open command window here را انتخاب نمایید تا ترمینال به طور خودکار در آن آدرس باز شود. سپس با npm run serve می توانیم پروژه خود را اجرا کنیم. البته قبل از این کار باید نکته جالبی را به شما بگویم. نکته جالب اینجاست که اگر به آدرس C:\Users\Amir بروید، به طوری که به جای Amir نام کاربری خودتان در سیستم را بنویسید، فایلی به نام 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"
          ]
        }
      }
    }
  }
}

همانطور که می بینید preset من (همان my-standard-preset) به همراه تنظیمات آن در این فایل قرار دارند بنابراین می توانید همیشه آن را ویرایش کرده یا از آن بکاپ بگیرید تا با عوض کردن ویندوز و کار های شبیه به آن این تنظیمات را از دست ندهید.

حالا به پوشه vue-cli-new رفته و در ترمینال دستور npm run serve را اجرا می کنم. پس از چند دقیقه صبر پیام زیر را دریافت خواهید کرد:

DONE  Compiled successfully in 14985ms                                                                      12:03:57 PM

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.103:8080/

یعنی می توانیم با مراجعه به localhost:8080 پروژه خود را ببینیم:

نگاهی به پروژه ی جدید که با Vue CLI نسخه ی 3 ساخته شده است — نگاهی به پروژه جدید که با Vue CLI نسخه 3 ساخته شده است

با نگاهی ساده به محتویات پوشه جدید، فایل package.json را پیدا می کنیم که در قسمت scripts چنین کدی را دارد:

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

serve برنامه ما را در حالت development در مرورگر باز می کند (با npm run serve) و build فایل نهایی و بهینه سازی شده برنامه را به ما می دهد (با npm run build) و lint نیز مسئول اجرای linting و عیب یابی از کد های ما است (با npm run lint). نکته جالب اینجاست که اگر به قسمت devDependencies نگاه کنیم، هیچ موردی را برای webpack نمی بینیم. این CLI جدید هنوز از webpack استفاده می کند اما آن را در پکیج زیر مخفی کرده است:

    "@vue/cli-service": "~4.3.0",

در این نسخه نمی توانید مستقیما به فایل webpack.config.json دسترسی داشته باشید ولی واقعا نیازی به این کار نیست. پلاگین های ما هر قابلیتی که بخواهیم را در اختیار ما می گذارند. همچنین می توانید گزینه های بیشتر را به webpack.config.json اضافه کنید (نمی توانید خود webpack.config.json را ویرایش کنید اما می توانید تنظیمات بیشتری را با فایلی به نام vue.config.js به آن اضافه کنید) اما واقعا نیازی به این کار نیز نمی باشد. اطلاعات بیشتر در لینک زیر قرار دارد:

https://cli.vuejs.org/guide/webpack.html

همچنین اگر از نسخه سوم Vue CLI استفاده می کنید، در ادامه فایل package.json به قسمتی به نام browserlist برمی خورید که به شکل زیر است:

  "browserlist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]

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

> 1%
last 2 versions
not dead

نحوه کار کردن با این قابلیت و تنظیم مرورگر های مختلف در صفحه زیر موجود است:

https://github.com/browserslist/browserslist

فایل های دیگری نیز وجود دارد که مربوط به تنظیمات linting و دیگر پکیج ها می باشند و فعلا با آن ها کاری نداریم. سپس پوشه public را داریم که در آن manifest.json را می بینیم. این فایل مخصوص گزینه PWA است که من آن را انتخاب کرده ام و اگر در هنگام ساخت پروژه قابلیت PWA را انتخاب نکرده باشید ممکن است این فایل را نداشته باشید. سپس پوشه img را درون public داریم که تصاویر، آیکون ها و غیره را در آن می بینیم. البته این روش، روش خوبی نیست چرا که روش دیگری برای اضافه کردن منابع مختلف مانند تصاویر و غیره وجود دارد که توسط webpack بهینه سازی می شود و بسیار بهتر است. اگر تصاویر خود را مستقیما در img قرار دهید، مستقیما به پروژه نهایی منتقل می شوند و اصلا دست نمی خورند. خارج از public، پوشه Src را داریم که درون خود پوشه های مختلفی مانند assets را دارد. این پوشه assets است که باید تصاویر شما را دریافت کند و منابع داخل آن توسط webpack تحلیل و بهینه سازی می شوند. بقیه عناصری که در این پروژه می بینید مانند Vue CLI قدیم است و چیزی تغییر نکرده است.

در بین این فایل ها، فایلی به نام registerServiceWorker را نیز داریم که مربوط به قابلیت های PWA است. تنها چیزی که شاید برایتان جدید و جالب باشد، وجود دو پوشه components و views است که هر دو کامپوننت های ما را دارند اما تفاوتشان چیست؟ اولا باید بگویم که شما مجبور نیستید از این ساختار استفاده کنید و می توانید پوشه های views و components را در هم ترکیب کنید. دوما اگر بخواهید از همین ساختار استفاده کنید، باید تفاوت ساده این دو نوع کامپوننت را بدانید. پوشه views فقط حاوی کامپوننت هایی است که با routing آن ها را بارگذاری می کنیم اما پوشه components دارای کامپوننت هایی است که با routing بارگذاری نشده بلکه در کامپوننت های درون views بارگذاری می شوند و طبیعتا URL ای هم ندارند.