2. راه‌اندازی محیط کار

ما از محیط کاری که در سند [2] به تفصیل توضیح داده شده است، استفاده می‌کنیم:

• Visual Studio Code (VSCode) برای نوشتن کد JavaScript؛
• [node.js] برای اجرای آن‌ها؛
• [npm] برای دانلود و نصب کتابخانه‌های JavaScript که به آنها نیاز خواهیم داشت؛

ما یک محیط کاری در [VSCode] ایجاد می‌کنیم:

• در [1-5]، یک پوشه خالی [vuejs] را در داخل [VSCode] باز می‌کنیم؛

• در [8-10]، ما وابستگی [@vue/cli] را نصب می‌کنیم که به ما امکان راه‌اندازی پروژه [vue.js] را می‌دهد. این وابستگی تعداد زیادی بسته (چند صد تا) را وارد می‌کند؛

در همان ترمینال، سپس دستور [vue create .] را تایپ می‌کنیم که یک پروژه با نام [vue.js] در دایرکتوری جاری (:) ایجاد می‌کند:

• در [13]، مجموعه‌ای از سؤالات برای کمک به پیکربندی پروژه آغاز می‌شود؛

• پس از پاسخ به تمام سؤالات، بسته‌های جدید دانلود شده و یک پروژه در پوشه جاری ایجاد می‌شود: [14].

بیایید نگاهی بیندازیم به آنچه تولید شده است. فایل [package.json] به شرح زیر است:

{
  "name": "vuejs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve vuejs-20/main.js",
    "build": "vue-cli-service build vuejs-20/main.js",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.19.0",
    "bootstrap": "^4.3.1",
    "bootstrap-vue": "^2.0.2",
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.1.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

توضیحات

• خطوط 14–22: در میان وابستگی‌های مورد نیاز برای توسعه، ارجاع‌هایی به دو ابزار [eslint, babel] وجود دارد که پیش از این در دو فصل قبلی استفاده شده‌اند. افزون بر این‌ها، پلاگین‌هایی برای این دو ابزار وجود دارد که برای استفاده در [vue.js] در نظر گرفته شده‌اند؛
• خط ۳۴: بسته [babel-eslint] ترانسپیلِیشن کد jS را از ES6 به ES5 انجام خواهد داد؛
• خطوط ۵–۹: سه وظیفه [npm] ایجاد شده‌اند:
  • [build]: برای ساخت نسخه کامپایل‌شده پروژه که برای تولید آماده است، استفاده می‌شود؛
  • [serve]: پروژه را روی یک سرور وب اجرا می‌کند. این ابزار برای انجام تست در حین توسعه استفاده می‌شود. مانند [webpack-dev-server]، هر تغییری در کد منبع پروژه به طور خودکار باعث کامپایل مجدد و بارگذاری مجدد پروژه توسط سرور وب می‌شود؛
  • [lint]: برای تحلیل کد jS و تولید گزارش‌ها استفاده می‌شود. ما در اینجا از این ابزار استفاده نخواهیم کرد؛

یک فایل [README.md] با محتوای زیر ایجاد شده است:

# vuejs

## راه‌اندازی پروژه
```
npm install
```

### کامپایل و بارگذاری مجدد داغ برای توسعه
```
npm run serve
```

### کامپایل و کوچک‌سازی برای تولید
```
npm run build
```

### تست‌های خود را اجرا کنید
```
npm run test
```

### بررسی و اصلاح فایل‌ها
```
npm run lint
```

### پیکربندی را سفارشی کنید
See [Configuration Reference](https://cli.vuejs.org/config/).

این فایل دستورات مورد استفاده برای مدیریت پروژه را خلاصه می‌کند.

ما می‌دانیم که در [VSCode]، وظایف [npm] برای اجرا پیشنهاد شده‌اند:

• در [1-3]، ما فرمان [serve] را اجرا می‌کنیم که پروژه [4-5] را کامپایل و سپس اجرا خواهد کرد؛

هنگام اجرای URL و [http://localhost:8080]، صفحه زیر را دریافت می‌کنیم:

کمی بعد توضیح خواهیم داد که چه چیزی به این صفحه منجر شد.

بیایید به راه‌اندازی محیط کاری‌مان ادامه دهیم:

• در [2] بالا، می‌توانیم شاخص‌هایی برای [git] ببینیم. [git] یک مدیر کد منبع است که به شما امکان می‌دهد نسخه‌های متوالی کد منبع را مدیریت کرده و آن‌ها را در میان توسعه‌دهندگان به اشتراک بگذارید. ما قصد داریم این ابزار را برای پروژه غیرفعال کنیم؛
• در [3-5]، به خواص پروژه می‌رویم؛

• در [9-10]، استفاده از [git] را در پروژه غیرفعال خواهیم کرد؛

ما تست‌های مختلفی خواهیم نوشت تا نشان دهیم [vue.js] چگونه کار می‌کند. با این حال، ما نمی‌خواهیم هر بار یک پروژه جدید بسازیم، زیرا این کار مستلزم ایجاد یک پوشه [node_modules] در هر بار است و این پوشه چند صد مگابایت حجم دارد. بیایید به وظایف [npm] در فایل [package.json] بازگردیم:

  "scripts": {
    "serve": "vue-cli-service serve vuejs-00/main.js",
    "build": "vue-cli-service build vuejs-00/main.js",
    "lint": "vue-cli-service lint"
  },

• خط ۲: دستور [serve] به‌طور پیش‌فرض از:
  • فایل [public/index.html]؛
  • وابسته به فایل [src/main.js]؛

در خط ۲، می‌توان نقطه ورود پروژه را برای فرمان [serve] مشخص کرد، برای مثال:

"serve": "vue-cli-service serve vuejs-00/main.js",

بیایید امتحان کنیم:

• در [1]، نام پوشه [src] به [vuejs-00] تغییر یافته است؛
• در [2-3]، دستور [serve] تغییر داده شده است؛
• در [4-6]، پروژه اجرا می‌شود؛

نتیجه همانند قبل است:

بنابراین برای آزمایش‌هایمان به شرح زیر عمل خواهیم کرد:

• نوشتن کد در پوشه‌ای به نام [vuejs-xx] در داخل پروژه؛
• آزمایش این پروژه با استفاده از دستور [vue-cli-service serve vuejs-xx/main.js] در فایل [package.json]؛

وقتی سرور توسعه در حال اجراست، هر تغییری در یکی از فایل‌های پروژه باعث بازکامپایل می‌شود. به همین دلیل، ما حالت [Auto Save] را برای [VSCode] غیرفعال می‌کنیم. زیرا نمی‌خواهیم هر بار که کاراکترها در یکی از فایل‌های پروژه تایپ می‌شوند، بازکامپایل انجام شود. ما فقط می‌خواهیم بازتالیف در زمان‌های مشخصی انجام شود:

• در [2]، گزینه [Auto Save] نباید تیک خورده باشد؛