از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
شروع به کار با Vue CLI 3.xVue.js پس از پیشی گرفتن از React.js در ستارگان GitHub، با وجود اینکه هیچ شرکت بزرگی از آن پشتیبانی نمی کند، به ارتفاعات غیرمنتظره ای صعود می کند، و انتشار ابزار جدید Command-line Interface (CLI) ممکن است خیلی خوب آنها را حتی بالاتر از آن برسانید! داربست کردن پروژه Vue از ابتدا می تواند …
سرفصلهای مطلب
معرفی
Vue.js پس از سبقت گرفتن به ارتفاعات غیرمنتظره پرتاب می شود React.js در ستارگان GitHub، علی‌رغم اینکه هیچ شرکت بزرگی از آن پشتیبانی نمی‌کند، و انتشار ابزار جدید Command-line Interface (CLI) ممکن است آنها را حتی بالاتر ببرد!
داربست الف Vue انجام پروژه از ابتدا می تواند یک چیز دلهره آور باشد، به خصوص اگر با آن راحت نباشید Vue.js.
به این دلیل Vue CLI ابزاری است که باید در زرادخانه شما وجود داشته باشد تا مطمئن شوید که پروژه های شما از همان ابتدا به درستی تنظیم شده اند، به شما این امکان را می دهد که از بین تعداد زیادی الگو انتخاب کنید و به CLI اجازه دهید تمام کدهای دیگ بخار کار سخت را برای شما انجام دهد.
به اندازه کافی هیجان انگیز، تابستان گذشته ما را به ارمغان آورد Vue CLI 3.0، معرفی یک دسته از ویژگی های جدید جالب مانند رابط کاربری گرافیکی Vue، ایجاد یک پروژه و مدیریت وابستگی ها را آسان تر از همیشه می کند!
سرویس CLI
سرویس CLI یک توسعه وابستگی ساخته شده است روی بالای بسته وبیک باندلر ماژول ایستا برای برنامه های جاوا اسکریپت – که کاملاً شبیه به react-scripts برای React.js.
مسئول بارگذاری افزونه‌ها، اطمینان از بهینه‌سازی پیکربندی پک وب است و ما را قادر می‌سازد تا دستورات اولیه را برای مدیریت برنامه‌مان (سرویس، ساخت، لینت و غیره) داشته باشیم.
پیش نیازها
برای اینکه Vue CLI کار کند باید نصب کنید Node.js (نسخه 8.9+) روی کامپیوتر شما، تا مطمئن شوید که قادر به استفاده هستید NPM (مدیر بسته گره)، یا نخ، بسته به روی مدیر مورد نظر شما
نصب و راه اندازی
پس از دانلود Node، نصب Vue CLI به سادگی اجرای یک دستور ساده در خط فرمان است:
$ npm install -g @vue/cli
یا برای نخ:
$ yarn global add @vue/cli
اولین پروژه Vue.js شما
هنگامی که Vue CLI را به صورت جهانی نصب کردید، می توانید به آن دسترسی داشته باشید vue از هر نقطه در رایانه خود فرمان دهید و برای ایجاد پروژه های دیگ بخار به آن نیاز خواهید داشت.
راه های مختلفی برای ایجاد یک پروژه وجود دارد که فقط دستورات را اجرا می کند:
$ vue create <project name>
این است bash روش انجام کارها هنگامی که دستور را وارد می کنید چندین بار از شما خواسته می شود تا برخی از اطلاعات پیکربندی را برای ایجاد پروژه خود ارائه دهید.
ابتدا از شما می پرسد که آیا می خواهید از پیش تنظیم استفاده کنید:
Vue CLI v3.2.1
? Please pick a preset:
> default (babel, eslint)
Manually select features
به خاطر این آموزش ما انتخاب خواهیم کرد ویژگی ها را به صورت دستی انتخاب کنید برای پیمایش در تمام صفحات مختلف که از شما خواسته می شود:
Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Preprocessors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
در اینجا می توانید ویژگی هایی را که می خواهید پروژه شما داشته باشد انتخاب کنید:
- بابل برای انتقال کد شما به جاوا اسکریپت ES5، که هر مرورگر می تواند آن را درک کند.
- تایپ اسکریپت اگر می خواهید تایپ های قوی داشته باشید و به ویژگی های مدرن تری دسترسی داشته باشید روی کد جاوا اسکریپت شما
- پشتیبانی از برنامه وب پیشرو (PWA). اگر مایل به استفاده از PWA ویژگی های هدایت شده مانند سرویس کارگران و پشتیبانی آفلاین.
- روتر که اضافه خواهد شد Vue-router بسته ای که یک ابزار مسیریابی عالی برای برنامه های کاربردی یک صفحه شما (SPA) است. از شما خواسته می شود، اگر این گزینه را انتخاب کنید، انتخاب کنید که آیا می خواهید آن را داشته باشید تاریخ حالت فعال شده برای روتر، که حذف می کند
#از تمام نقاط پایانی خود امضا کنید. - Vuex برای داشتن یک فروشگاه متمرکز برای ایالات خود و مدیریت داده های جهانی برنامه خود و همچنین مدیریت روش تغییر داده ها در اجزای خود و از کجا از داخل Vue Devtools. (دیدن Vue Devtools).
- پیش پردازنده های CSS برای انتخاب پیش پردازشگر CSS انتخابی خود، اگر این گزینه را انتخاب کنید از شما خواسته می شود که از بین آنها انتخاب کنید ساس/کمتر، کمتر، یا قلم.
- لینتر / فرمت کننده این کار به پروژه شما پرده اضافه می کند تا مطمئن شوید کد شما با استانداردهای کد مطابقت دارد. اگر این گزینه را انتخاب کرده اید و انتخاب کرده اید تایپ اسکریپت از شما خواسته می شود که یک Linter / Formatter را انتخاب کنید، اگر تایپ اسکریپت را انتخاب نکرده باشید، از شما خواسته نمی شود TSLint.
? Pick a linter / formatter config: (Use arrow keys)
> TSLint
ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
علاوه بر این، می توانید انتخاب کنید که آیا می خواهید اضافه کنید gitHooks به پیکربندی شما اینها اسکریپت های لینتینگ/قالب بندی شما را هنگام ذخیره یا متعهد شدن به مخزن git اجرا می کنند.
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint روی save
( ) Lint and fix روی commit
- تست واحد به شما این امکان را می دهد که چارچوب مورد نظر تست واحد خود را انتخاب کنید.
? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai
Jest
- تست E2E همانطور که Unit Testing از شما می خواهد که محیط تست E2E خود را انتخاب کنید.
? Pick a E2E testing solution: (Use arrow keys)
Cypress (Chrome only)
Nightwatch (Selenium-based)
پس از تمام این گزینه ها، باید تصمیم بگیرید که آیا می خواهید تمام تنظیمات را در فایل های جداگانه داشته باشید یا به سادگی به عنوان اشیاء در داخل فایل اضافه کنید. package.json فایل.
علاوه بر این، از شما پرسیده می شود که آیا می خواهید این پیکربندی را به عنوان یک پیش تنظیم ذخیره کنید و همچنین می خواهید انتخاب کنید npm یا نخ به عنوان مدیر بسته مورد نظر شما
پلاگین های CLI
برخی از افزونه های داخلی را می توان با استفاده از دستور اضافه کرد، مانند Vuetifyیک چارچوب طراحی متریال برای Vue.js:
$ vue add <plugin name>
یک پلاگین Vue CLI همانطور که نام آنها با هر کدام شروع می شود @vue/cli-plugin- یا vue-cli-plugin- – بسته به اینکه آیا آنها افزونه های داخلی یا شخص ثالث هستند.
هنگامی که شما اجرا می کنید vue-cli-service، به طور خودکار همه افزونه های CLI فهرست شده در داخل را بارگیری می کند package.json فایل.
تبریک می گویم، شما به تازگی اولین پروژه Vue CLI خود را ایجاد کرده اید!
رابط کاربری گرافیکی Vue
اگر نمی‌خواهید از دردسر خطوط فرمان عبور کنید یا به پس‌زمینه‌های تیره با خطوط سفید علاقه ندارید، همیشه می‌توانید از Vue GUI با این دستور قابل دسترسی است:
$ vue ui
هنگامی که این دستور اجرا می شود، یک سرور راه اندازی می شود روی http://localhost:8000.
در اینجا می توانید پروژه های خود را به همان روشی که با خط فرمان انجام می دهید، اما با یک رابط کاربری خوب ایجاد کنید.
به علاوه، می‌توانید وابستگی‌های خود را بدون نیاز به مدیریت آنها مدیریت کنید package.jsonکه به همراه نسخه مورد نظر برای هر بسته ارائه می شود:
پیکربندی و ویجت‌های بیشتری را می‌توان تنظیم کرد، و چند کار را می‌توان به طور خودکار از Vue UI اجرا کرد – مانند اجرای بررسی آسیب‌پذیری برای وابستگی‌های شما که ممکن است مشکلات امنیتی داشته باشند، راه‌اندازی پورتی که می‌توانید آن را بکشید تا برنامه خود را خاموش کنید. ، و فید اخبار را فعال کنید تا آخرین به روز رسانی های تیم Vue را داشته باشد!
$ vue-init < template > < project name >
هر زمان که می خواهید از یک الگوی قدیمی Vue CLI 2.x استفاده کنید، باید آن را نصب کنید vue-init سرویس:
$ npm install -g @vue/cli-init
و سپس:
$ vue init webpack my-project
سپس می توانید پروژه خود را مانند یک پروژه معمولی راه اندازی کنید.
ساختار پوشه
هر پروژه ایجاد شده با چندین پوشه همراه است که برای سهولت استفاده تنظیم شده اند:
- /node_modules این جایی است که تمام وابستگی های بسته بندی شده در آن نصب می شوند، به طور پیش فرض هر زمان که پروژه ای ایجاد می کنید نصب می شوند.
- /عمومی اینجا جایی است که
index.htmlزندگی می کند و در آن همه دارایی های عمومی، مانیفست ها و کارکنان خدماتی باید ایجاد شوند. - /src جایی که نان و گوشت اصلی کار شما اضافه می‌شود، بیشتر فایل‌های دیگر از پوشه‌های دیگر از پیش پیکربندی شده‌اند، اما اینجاست که همه کدها و اجزای سفارشی خود را اضافه می‌کنید.
- /src/assets جایی که تصاویر، نمادها، فونت‌های خود را اضافه می‌کنید، که بعداً اضافه خواهد شد روی، به اضافه شود
/distپوشه - /src/components اینجا جایی است که اجزای خود را اضافه می کنید، به ویژه اجزای منفرد خود را که یک کل را نشان نمی دهند page.
- /src/views در اینجا شما اجزای طرح خود را دارید.
- /تست جایی که تست های واحد / e2e شما زندگی می کنند.
به علاوه، الف / پلاگین ها پوشه تا زمانی که از آن استفاده کرده باشید اضافه خواهد شد vue add دستور، جایی که تمام پلاگین های شما نصب خواهند شد.
علاوه بر این، main.js، router.js، store.js، و App.vue با توجه به تنظیمات انتخاب شده شما در حین ایجاد، به همراه برخی از نمونه های دیگ بخار، به طور خودکار تولید می شود.
فایل package.json
این یکی از مهم‌ترین فایل‌ها است که اکثر پیکربندی پروژه‌های شما مانند فایل را در خود جای می‌دهد نام، نسخه، اسکریپت های خودکاری که می توانید از طریق NPM استفاده کنید و وابستگی ها که بسته های شخص ثالثی هستند که می توانید در پروژه خود استفاده کنید:
{
"name": "vue-cli-test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"test:unit": "vue-cli-service test:unit"
},
"dependencies": {
"vue": "^2.5.17",
"vue-router": "^3.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.2.0",
"@vue/cli-plugin-eslint": "^3.2.0",
"@vue/cli-plugin-unit-jest": "^3.2.0",
"@vue/cli-service": "^3.2.0",
"@vue/eslint-config-prettier": "^4.0.0",
"@vue/test-utils": "^1.0.0-beta.20",
"babel-core": "7.0.0-bridge.0",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"eslint": "^5.8.0",
"eslint-plugin-vue": "^5.0.0-0",
"node-sass": "^4.9.0",
"sass-loader": "^7.0.1",
"vue-template-compiler": "^2.5.17"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": (
"plugin:vue/essential",
"@vue/prettier"
),
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"browserslist": (
"> 1%",
"last 2 versions",
"not ie <= 8"
)
}
تگ اسکریپت دستگیره های اصلی شما را برای مدیریت برنامه شما آشکار می کند.
اجرای موارد زیر سرور توسعه شما را با بارگذاری مجدد داغ شروع می کند:
$ npm run serve
این بدان معنی است که تغییرات فایل را متوجه می شود تا مجبور نباشید هر بار که کد یا منابع خود را به روز می کنید سرور را دوباره راه اندازی کنید.
حال، برای ایجاد یک /dist پوشه ای که تمام برنامه های شما را بسته بندی می کند، نه بسته وب یا هر پیکربندی اضافی مورد نیاز، از این موارد استفاده خواهیم کرد:
$ npm run build
یک را تحویل خواهد داد index.html، با تمام فایل های جاوا اسکریپت تزریق شده به طور خودکار، و js، css، و img پوشه ها برای این دارایی های نامگذاری شده
علاوه بر این، اگر شما مایل به تماشای تمام فایل های خود و process آنها با استفاده از شما eslint یا پیکربندی های زیباتری که می توانید استفاده کنید:
$ npm run lint
بر این اساس، واحد تست، واقع در داخل /tests پوشه را می توان با دستور زیر اجرا کرد:
$ npm run test:unit
به علاوه، package.json می‌تواند پیکربندی خاصی برای پرده‌بندی، قالب‌بندی، قلاب‌های پیش‌فرض و بسیاری موارد دیگر داشته باشد!
گسترش
این /dist پوشه را می توان برای آپلود برنامه همراه خود در صفحات GitHub، Heroku، Amazon S3، BitBucket Pages و بسیاری از سرویس های دیگر مدیریت کرد.
بسته به روی شما host خدمات انتخابی، شما باید آن را راه اندازی کنید /dist پوشه مطابق با نیازهای سرور شما، این کار را می توان به راحتی از طریق vue.config.js فایل (یا از طریق تب پیکربندی Vue UI برای آن موضوع)، که باید در آن ایجاد شود root پوشه پروژه شما:
module.exports = {}
در اینجا می توانید پیکربندی مورد نیاز برای استقرار سرور را اضافه کنید baseUrl.
اگر سرور شما منتظر است تا برنامه شما در یک نقطه پایانی خاص میزبانی شود، مانند: http://www.testsite.com/test – شما باید خود را راه اندازی کنید baseUrl برای تطبیق با آن نقطه پایانی:
module.exports = {
baseUrl: '/test'
}
از طرف دیگر، اگر سرور شما منتظر است تا فایل های استاتیک شما در یک پوشه خاص قرار بگیرند، می توانید آن را نیز مشخص کنید یا اگر می خواهید /dist پوشه ای با نام متفاوت شما می توانید خود را انتخاب کنید outputDir:
module.exports = {
baseUrl: '/test',
assetsDir: 'static',
outputDir: 'app'
}
اینها فقط نمونه هایی از پیکربندی های زیادی هستند که می توانید به پروژه خود اضافه کنید.
شما می توانید همه اینها را داخل خود اضافه کنید package.json درون vue ویژگی، اما توجه داشته باشید که باید فقط از مقادیر سازگار با JSON استفاده کنید.
نتیجه
Vue.js در میان دیگر چارچوب‌های اصلی جاوا اسکریپت در حال رشد است. کاملاً قابل دسترسی، مستقیم و بسیار انعطاف پذیر است.
حتی اگر استفاده از آن آسان است، افراد تازه وارد می توانند زمان بسیار سختی را برای تنظیم پروژه های خود به درستی داشته باشند، به خصوص اگر خیلی مشتاق نباشید. روی خط فرمان
خوشبختانه، ایوان تو، خالق Vue همیشه به آینده فکر می کند، و همیشه برای توسعه دهندگان همکار خود قدم بر می دارد و پیکربندی و راه اندازی برنامه های جدید را به آسانی 1، 2، 3 می کند!
برای اطلاعات بیشتر می توانید مراجعه کنید، صفحه رسمی Vue CLI.
منتشر شده در 1403-01-26 11:11:04
