از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
شروع به کار با Vue CLIVueJS یک چارچوب جاوا اسکریپت مترقی است که برای ایجاد رابط های کاربری و اپلیکیشن های تک صفحه ای (SPA) استفاده می شود و بهترین راه برای شروع سریع، ایجاد یک پروژه VueJS با استفاده از Vue CLI (واسط خط فرمان) است. در این راهنما، روش نصب Vue CLI، روش ایجاد…
سرفصلهای مطلب
معرفی
VueJS یک چارچوب جاوا اسکریپت مترقی است که برای ایجاد رابط کاربری و برنامه های کاربردی تک صفحه ای (SPA) و بهترین راه برای شروع سریع، ایجاد یک پروژه VueJS با استفاده از Vue CLI (واسط خط فرمان) است.
در این راهنما، روش نصب Vue CLI، روش ایجاد یک پروژه Vue با Vue CLI، روش سرویس دهی و ساخت آنها برای تولید، و روش استفاده از Vue UI را خواهید آموخت. ساختن یک پروژه با CLI، یک پروژه را دارای داربست می کند و یک نقطه شروع از پیش پیکربندی شده در اختیار ما قرار می دهد. روی که می توانیم به جای شروع از صفر آن را بسازیم.
پیش نیازها
Node.js نسخه 8.9 یا بالاتر برای استفاده از Vue CLI لازم است روی ما terminal (v10+ توصیه می شود). با nvm، ما می توانیم چندین نسخه از گره را مدیریت کنیم روی همان ماشین!
Vue CLI چیست؟
Vue CLI یک بسته NPM است که نصب شده است روی یک دستگاه خاص برای دسترسی به توسعه دهندگان/کاربران vue از طریق آنها فرمان دهید terminal. این CLI، که می تواند به صورت جهانی یا در یک فهرست خاص نصب شود روی رایانه شخصی ما به ما اجازه می دهد تا به سرعت یک پروژه جدید را داربست کنیم و با یک دستور یک برنامه بسازیم.
این به توسعه دهندگان Vue تجربه جدیدی می دهد و به آنها اجازه می دهد بدون نیاز به پیکربندی پیچیده ابزارهایی مانند توسعه برنامه های Vue را شروع کنند. بسته وب. به طور همزمان، می توان آن را با افزونه ها برای موارد استفاده پیشرفته تر پیکربندی و گسترش داد. از چندین قسمت تشکیل شده است ، از جمله:
- سرویس CLI که چندین اسکریپت را برای کار با پروژه های Vue فراهم می کند، مانند
serve،buildوinspectاسکریپت ها - پلاگین های CLI که بسته های NPM هستند که ویژگی های اضافی را به پروژه Vue ما ارائه می دهند، برخی از این پلاگین ها عبارتند از typescript، PWA، VueX و غیره.
اگر نمی خواهیم همه چیز را از طریق خود مدیریت کنیم terminal، Vue CLI به توسعه دهندگان این امکان را می دهد تا وظایف خود را از طریق یک رابط کاربری آسان انجام دهند که به زودی آن را بررسی خواهیم کرد.
در حال نصب Vue CLI
همیشه ایده خوبی است که بررسی کنید آیا بسته ای از قبل نصب شده است روی کامپیوتر ما قبل از نصب آن ، و ما می توانیم با دیدن نسخه آن ، این کار را برای Vue CLI انجام دهیم:
$ vue --version
$ vue -V
اگر نسخه ای را مشاهده کردیم، به این معنی است که Vue CLI قبلاً نصب شده است روی کامپیوتر ما؛ در غیر این صورت، خطا نشان می دهد که نصب نشده است. ما می توانیم Vue CLI را با اجرای دستور زیر نصب کنیم:
$ npm install -g @vue/cli
// Or
$ yarn global add @vue/cli
به طور معمول، CLI به جای محلی نصب شده است، بنابراین در سراسر سیستم قابل دسترسی است.
توجه داشته باشید: حتی اگر CLI از قبل نصب شده باشد ، ارزش آن را دارد که در صورت عدم به روزرسانی در آخرین نسخه ، آن را به روز کنید.
$ npm update -g @vue/cli
// Or
$ yarn global upgrade --latest @vue/cli
پس از نصب موفقیت آمیز vue cli روی کامپیوتر ما، اکنون باید بتوانیم به فایل اجرایی Vue در ما دسترسی داشته باشیم terminal برای نمایش لیستی از دستورات ممکن و عملکرد آنها. این را می توان با اجرای دستور زیر انجام داد:
$ vue
که شروع را نشان می دهد page:
Usage: vue <command> (options)
Options:
-V, --version output the version number
-h, --help display help for command
Commands:
create (options) <app-name> create a new project powered by vue-cli-service
add (options) <plugin> (pluginOptions) install a plugin and invoke its generator in an already created project
invoke (options) <plugin> (pluginOptions) invoke the generator of a plugin in an already created project
inspect (options) (paths...) inspect the webpack config in a project with vue-cli-service
serve alias of "npm run serve" in the current project
build alias of "npm run build" in the current project
ui (options) start and open the vue-cli ui
init (options) <template> <app-name> generate a project from a remote template (legacy API, requires
@vue/cli-init)
config (options) (value) inspect and modify the config
outdated (options) (experimental) check for outdated vue cli service / plugins
upgrade (options) (plugin-name) (experimental) upgrade vue cli service / plugins
migrate (options) (plugin-name) (experimental) run migrator for an already-installed cli plugin
info print debugging information about your environment
help (command) display help for command
Run vue <command> --help for detailed usage of given command.
ایجاد یک پروژه VUE با VUE CLI
پس از نصب موفقیت آمیز Vue CLI – بیایید یک پروژه VUE ایجاد کنیم! با استفاده از این ابزار، ما به راحتی می‌توانیم یک پروژه را داربست کنیم و یک اسکلت برای رفتن ایجاد کنیم، از جمله وارد کردن تمام وابستگی‌های ضروری و موارد اضافی که ممکن است از قبل می‌دانید که می‌خواهید. این create دستور و به دنبال آن نام پروژه برای ایجاد یک پروژه اسکلت استفاده می شود:
$ vue create my-cli-project
توجه داشته باشید: my-cli-project نام پروژه است. از فضاها خسته باشید! هر فاصله ای نام را خراب می کند.
پس از اجرای دستور – با سه پیش تنظیم از شما خواسته می شود:
Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
> Default ((Vue 3) babel, eslint)
Default ((Vue 2) babel, eslint)
Manually select features
در دو مورد اول – شما می توانید نسخه VUE را در کنار Babel و Eslint انتخاب کنید. فقط اینها بسته بندی خواهند شد. اگر می خواهید وابستگی های مفید دیگری مانند روتر Vue ، Vuex و SO را درج کنید روی، می خواهید انتخاب کنید “انتخاب دستی ویژگی ها” از پیش تعیین شده
در اینجا ، می توانید لیست وابستگی های موجود را با فشار وارد کنید فضا برای انتخاب هر گزینه ای که می خواهید فعال کنید:
Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
>(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
با شروع نسخه VUE با چندین سوال پیکربندی ادامه خواهد یافت:
Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x
2.x
به دنبال سؤالات هر ماژولی که انتخاب کرده اید که می تواند پیکربندی شود:
Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for the router? (Requires proper server setup for index fallback in production) (Y/n)
در پایان – CLI از شما سؤال می کند که آیا می خواهید این گزینه ها را به عنوان یک ذخیره کنید از پیش تعیین شده! اگر این کار را انجام دهید ، دفعه بعد که یک برنامه جدید ایجاد می کنید ، می توانید علاوه بر دو مورد پیش فرض ، از این پیش تعیین شده انتخاب کنید:
Vue CLI v5.0.4
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for the router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: Lint روی save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N) y
پس از تهیه نامی برای از پیش تعیین شده ، پس از تماس با آنها نمایش داده می شود create دستور:
$ vue create my-app
Vue CLI v5.0.4
? Please pick a preset: (Use arrow keys)
> my-preset ((Vue 3) babel, pwa, router, vuex, eslint)
Default ((Vue 3) babel, eslint)
Default ((Vue 2) babel, eslint)
Manually select features
یا می توانید مستقیماً در حین ایجاد آن را صدا بزنید:
$ vue create --preset my-preset my-app
توجه داشته باشید: اگر فراموش کنیم که هنگام داربست پروژه خود ، برخی از افزونه های داخلی را نصب کنیم ، می توانیم به راحتی آنها را با استفاده از آن اضافه کنیم vue add my-plugin بعداً هر لحظه دستور دهید.
یک بار خلقت process تکمیل شده است ، ما می توانیم برنامه را در سرور توسعه مستقیماً از CLI با استفاده از دستور زیر اجرا کنیم:
$ cd my-new-app
$ npm run serve
دایرکتوری پروژه به راحتی از طریق سیستم پرونده یا یک دستور مانند تأیید می شود ls (dir برای کاربران ویندوز):
$ ls
README.md jsconfig.json package-lock.json public/ vue.config.js
babel.config.js node_modules/ package.json src/
سپس مرورگر ما باز می شود localhost:8080 جایی که شاهد اجرای برنامه خواهیم بود:
اکنون، توسعه آغاز می شود! می‌توانید با دایرکتوری‌ها و فایل‌های ایجاد شده توسط ابزار، خط لوله توسعه استاندارد خود را ادامه دهید. هنگامی که توسعه را به پایان رساندید، یا آماده هستید که تغییرات را به مرحله تولید فشار دهید، از دستور زیر برای ایجاد یک بسته تولیدی استفاده کنید:
$ npm run build
این همه چیز را به a خروجی می دهد dist پوشه در پروژه ما، که می تواند مستقر شود روی پلتفرم های میزبانی مختلف بیایید نگاهی به روش دیگری برای ایجاد یک برنامه Vue بیندازیم، اما در عوض از رابط کاربری گرافیکی (GUI) استفاده کنید!
Vue UI
با استفاده از Vue CLI، می توانید پروژه دیگری را نیز راه اندازی کنید – یک رابط کاربری گرافیکی برای ایجاد برنامه ها:
$ vue ui
با این کار رابط کاربری گرافیکی شروع می شود روی http://localhost:8000/:
ما می توانیم با رفتن به یک پروژه جدید شروع کنیم “ایجاد کردن” تب، که به شما امکان می دهد مسیر پروژه خود را انتخاب کنید:
هنگامی که مکان برای پروژه انتخاب شد، در یک مکان جدید page، می توانید نام را وارد کرده و مدیر بسته مورد نظر خود را انتخاب کنید:
این process ایجاد پروژه های اسکلت تقریباً یکسان است و همان کد در پس زمینه اجرا می شود. این فقط یک موضوع سلیقه ای است – چه CLI را ترجیح دهید یا UI. در همین راستا، از ما خواسته می‌شود پیش‌تنظیم مورد نظر خود را انتخاب کنیم، اما اگر روی «دستی» کلیک کنیم، به یک تغییر مسیر داده می‌شویم. page که در آن می توانیم به صورت دستی افزونه های مورد نظر خود را انتخاب کنیم، همانطور که در زیر نشان داده شده است:
مجدداً، پس از تنظیم تنظیمات برای وابستگی های مختلف، می توانید گزینه های انتخابی خود را به عنوان یک پیش تنظیم ذخیره کنید.
یک بار خلقت process تمام شد، ما به داشبورد پروژه منتقل می شویم، جایی که می توانیم همه پلاگین های خود را مشاهده کنیم، افزونه ها را اضافه کنیم، پیکربندی را مدیریت کنیم و وظایف را تعیین کنیم:
این وظایف شامل ، خدمت به برنامه ما است روی مرورگر ما، ساختن آن برای تولید و غیره.
نتیجه
در این راهنمای کوتاه، روش عملکرد Vue CLI و روش ایجاد پروژه های Vue جدید با آن را یاد گرفته اید. ما نگاهی به تنظیمات دستی و ذخیره تنظیمات از پیش تعیین شده، و همچنین سرویس دهی و ساختن پروژه ها انداخته ایم. در نهایت، ما نگاهی به رابط کاربری به عنوان جایگزینی برای CLI انداخته‌ایم.
منتشر شده در 1403-01-09 07:09:03
