https://virgool.io/vue-developers/feed در این انتشارات تمام مطالب مرتبط با فریم فرک Vue و فریم ورک های تابع آن منتشر خواهد شد. fa 2026-04-14 23:12:34 https://files.virgool.io/upload/publication/9euok56gv21a/lta0qe.png https://virgool.io/vue-developers https://virgool.io/vue-developers/%D8%AD%D8%A7%D9%84%D8%AA-darklight-%D8%AF%D8%B1-vue-js-kczeh0tmkohp یکی از ترند های جدید طراحی اضافه کردن حالت Dark/light به وبسایت ها و برنامه ها هست. توی این پست راحت ترین . جامع ترین روش رو مورد بحث قرار میدیم.در اصل به یه دکمه برای تغییر حالت نیاز دارین . پس اول دکمه رو که یه ورودی چک باکس استفاده میکنیم :<a class> <input type=&quotcheckbox&quot id=&quottheme-switch&quot class=&quottheme-switch&quot v-model=&quotdarkMode&quot /> <label for=&quottheme-switch&quot> <span> <svg viewBox=&quot0 0 285.919 285.919&quot class=&quottheme-switch&quot> <pathd=&quotM142.959 0C64.131 0 0 64.132 0 142.96s64.131 142.959 142.959 142.959 142.96-64.131 142.96-142.959S221.787 0 142.959 0zm0 260.919V25c65.043 0 117.96 52.917 117.96 117.96 0 65.043-52.917 117.959-117.96 117.959z&quot/> </svg> </span> </label> </a> در کد بالا از یه svg برای نمایش یه شکل گرافیکی استفاده شده که با توجه به نیاز خودتون میتونین اون رو تغییر بدین و مقدار darkmode رو برای مدل اینپوت خودمون ست میکنیم.در ادامه با توجه به ظاهر خیلی ابتدای از کد sass زیر رو برای اسکریپت خودتون اضافه کنید :input.theme-switch { display: none; } input.theme-switch+label { cursor: pointer; } input.theme-switch:not(:checked)+label:hover { cursor: pointer; } input.theme-switch+label:active, input.theme-switch:checked+label { cursor: pointer; } svg.theme-switch { fill: var(--dnicon); width: 0.8em; }توی کد sass بالا مقداری به اسم var(--dnicon) رو میبینین. در اصل این مقدار برابر یک متغیر رنگی هست که شما میتونین اون رو ست کنید. مثل عکس زیر :و الان وقتشه که قابلیت تغییر تم رو به دکمه ای که ساختیم اضافه کنیم:export default { name: &quotdarkMode&quot, data() { return { darkMode: true, darkIconColor: &quot#4B4E64&quot }; }, mounted() { localStorage.setItem(&quottheme&quot, &quotdark&quot); let bodyElement = document.body; bodyElement.classList.add(&quotapp-background&quot); let htmlElement = document.documentElement; let theme = localStorage.getItem(&quottheme&quot); if (theme === &quotdark&quot) { htmlElement.setAttribute(&quottheme&quot, &quotdark&quot); this.darkMode = true; } else { htmlElement.setAttribute(&quottheme&quot, &quotlight&quot); this.darkMode = false; } }, watch: { darkMode: function() { let htmlElement = document.documentElement; if (this.darkMode) { localStorage.setItem(&quottheme&quot, &quotdark&quot); htmlElement.setAttribute(&quottheme&quot, &quotdark&quot); } else { localStorage.setItem(&quottheme&quot, &quotlight&quot); htmlElement.setAttribute(&quottheme&quot, &quotlight&quot); } } } };و تمام! شما یک تم خیلی زیبا دارید.(سعی دارم برای این که کامپوننت بسازم . اگه شد میزارم توی npm و این پست رو ادیت میزنم) توسعه دهندگان VUE امیر حسین مکرمی فر Tue, 26 May 2020 16:14:22 +0430 https://virgool.io/vue-developers/%D8%B1%D9%81%D8%B9-%D8%A7%D8%B1%D9%88%D8%B1-event-%D9%87%D8%A7%DB%8C-vuejs-%D8%AF%D8%B1-w3c-yzqopp60fwyd سایت W3C یک سایت برای رفع مشکلات ساختار کد html شما هستش که فقط کافیه لینک سایت خودتون رو بدید بهش تا براتون تمام مشکلات موجود توی html سایتتون رو بگه تا هم سایت بهینه تری داشته باشید هم سئو سایت شما بالا بره.حالا مشکل اینجاست که این سایت event های vue.js رو که توی html نوشتید رو به عنوان ارور میشناسه که خب اگر مشتری ای داشته باشید که ازتون بخواد این ارور هارو رفع کنید به مشکل میخورید.برای رفع این مشکل ابتدا افزونه زیر رو روی پروژتون نصب کنیدnpm i vue-w3c-valid --saveبعد از نصب توی پروژتون لودش کنیدimport VueW3CValid from 'vue-w3c-valid';اگر میخواید که به صورت آنلاین لود کنید افزونه رو دو تا دستور بالا رو بیخیال شید و خط زیر رو به html خودتون اضافه کنید<script src=&quothttps://unpkg.com/vue-w3c-valid/dist/simple.js&quot>خب الان کافیه که قبل از ساختن شئ vue خودتون کد زیر رو بنویسیدnew VueW3CValid({ el: '#app' });حالا وقتشه که شئ vue خودتون رو بسازیدnew Vue({ el: '#app' });خب همه چی آمادست از این به بعد به جای استفاده عادی از event ها به شکل زیر استفاده کنید.به جای:<button v-on:click=&quotcounter+1&quot>test</button>بنویسید:<button data-v-on_click=&quotcounter+1&quot>test</button>یا به جای:<div v-if=&quottrue&quot></div>بنویسید:<div data-v-if=&quottrue&quot></div>خب دیگه اروری توی w3 validator برای vue مشاهده نمی کنید :)‌ اگر می خواید در مورد افزونه vue-w3c-valid بیشتر بدونید کلیک کنید. توسعه دهندگان VUE خشایار قندهاری Thu, 19 Mar 2020 03:46:10 +0330 https://virgool.io/vue-developers/%D9%85%D8%B3%DB%8C%D8%B1-roadmap-%DB%8C%D8%A7%D8%AF%DA%AF%DB%8C%D8%B1%DB%8C-%D9%81%D8%B1%D8%A7%D9%86%D8%AA-%D8%A7%D9%86%D8%AF-y71bx3k1rnez سلام دوستان عزیزم امیدوارم حالتون خوب باشه. این چندوقته خیلی شنیدم توی گروه ها که راهنمایی برای شروع فرانت اند و بکند میخوان و میخوان بدونن با چه زبانی و یا چه تکنولوژی شروع کنن. برای همین این مقاله رو مینویسم تا شاید به نوبه خودم کمی به دوستان کمک کرده باشم.دوستان عزیزی که به تازگی شروع کردن وب رو قاعدتا با html css شروع میکنن. خوب بعدش برای خیلیا این سردرگمی پیش میاد که حالا چی؟ برم سراغ PHP یا JS یا Sass یا Less و ... .خب این بستگی به علاقه شما داره که بعد از این ها برید سراغ PHP و بخواید بکند کار کنین یا همون فرانت اند رو ادامه بدین ولی این مقاله برای کسانی هست که میخوان فرانت رو ادامه بدن. (مقاله دیگری برای دوستداران بکند هم مینویسم).بعد از یادگیری HTML CSS بهتر هست که شما مباحث css grid و flex رو هم یاد بگیرین و بعد برین سراغ یادگیری JS و jquery. (با فرض اینکه شما Css رو خوب یادگرفتین و بهتره Sass یا Less یکیشون رو یاد بگیرین).جاوااسکریپت خام یا همون Vanilla js کار کردین بهتر هست که یک فریمورک برای خودتون انتخاب کنین و تا تهش برید. Vuejs ReactAngularاز بین اینها یکی رو انتخاب کنین نظر من روی Vueهست چون خیلی ساده است و شما توی یک هفته میتونین یاد بگیرینیش.فریمورک Vueفریمورک Angurفریمورک Reactخب شما یکی از اینها رو انتخاب کردین و حالا لازم هست که تا اخرش برید. معمولا مباحث پیشرفته رو تو حین یادگیری این فریمورک ها یاد میگیرین(مثلا من خودم خیلی از مباحث دیزاین پترن ها و اصول سالید و تست نویسی و کشینگ و معماری نرم افزار رو تو حین یادگیری لاراول یادگرفتم)بهترین منبع یادگیری همه اینها (اعم از فرانت اند و بکند) فقط یوتیوب! یوتیوب بزرگترین دانشگاه انلاین جهان هست بنظرم. هرچیزی که شما توی منابع فارسی نمیتونین پیدا کنین رو همش توی یوتیوب هست.حتما انگلیسیتون رو قوی کنین. این توصیه برادرانه من به شماست. حتما براش وقت بزارین حتی شده بیشتر از برنامه نویسیتون روی زبانتون وقت بزارین.امیدوارم موفق باشین :) مقاله بعدی رو برای دوست داران بکند مینویسم. توسعه دهندگان VUE متین نوروزی | Matin Norouzi Wed, 12 Feb 2020 11:30:53 +0330 https://virgool.io/vue-developers/%D8%B3%D9%87%D9%85-%D9%88-%D9%86%DB%8C%D8%A7%D8%B2-%D8%A8%D9%87-%D8%A7%D8%B3%D8%AA%D8%AE%D8%AF%D8%A7%D9%85-%D9%85%D8%AA%D8%AE%D8%B5%D8%B5%DB%8C%D9%86-%D9%81%D8%B1%DB%8C%D9%85%D9%88%D8%B1%DA%A9-%D9%87%D8%A7%DB%8C-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-l4ckdkeqlvdy نیاز به متخصص فریمورک های جاوا اسکریپت در آگهی های استخدام 10 روز گذشته به ترتیب زیر بوده:1) angular2) react3) vueنقشه راه جاب ترند این هست که بتونید چنین گزارش هایی رو خودتون از سیستم بگیرید و من کنار برم.زمانی که زبان برنامه نویسی جدید رو شروع کردم نمیدونستم برای ورود به "بازار کار ایران" چه تخصص هایی باید داشته باشم.این نیاز من بود که جاب ترند شکل گرفت. و احتمالا نیاز دیگرانم هست.لطفا زمان مطالعه گزارش ها به تاریخ ارسال مطلب هم دقت بفرمایید.جاب ترند - تجزیه و تحلیل هوشمند آگهی و نیازمندی های بازار کار در سطح اینترنت. توسعه دهندگان VUE جاب ترند Mon, 09 Dec 2019 19:45:37 +0330 https://virgool.io/vue-developers/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-vuejs-%D9%85%D9%82%D8%AF%D9%85%D8%A7%D8%AA%DB%8C-%D9%82%D8%B3%D9%85%D8%AA-%D8%A7%D9%88%D9%84-vuejs-%D9%88-declarative-rendering-irc0qhp1qkzp آموزش Vue.jsمعرفی Vue.jsvue.js (بخونید ویو مثل view) یک فریمورک جاوا اسکریپتی هستش که به ما کمک می کنه رابط کاربری App ها مون رو بسازیم. با کمک کتاب خونه های (library) فراوان و ابزارهای جدید با vue می تونید به راحتی App های Spa خیلی پیشرفته طراحی کنید. اگر شما برنامه نویس هستید (مثلا: فرانت اند) و میخواهید vue رو با فریمورک های دیگه مقایسه کنید، می تونید از این لینک استفاده کنیدپیش نیاز برای اینکه راحت با vue کار کنیم :درک متوسط از HTML, CSS و JAVASCRIPTپیشنهاد می کنم همراه مقاله های آموزشی vue کد بزنید تا بهتر یاد بگیرید. می تونید از لینک زیر استفاده کنید. https://codepen.io/hamideslami32/pen/LYYbYvQ و یا اینکه می تونید یک فایل index.html درست کنید و vue رو به سادگی با تگ script به فایل تون اضافه کنید. * توی مقاله های بعدی در مورد نحوه نصب vue-cli و nuxt به صورت کامل توضیح میدم. پیشنهاد می کنم کسانی که تجربه ی استفاده از vue رو ندارن با vue-cli و nuxt شروع نکنند. (کسانی که با ابزار های build بر پایه Node.js آشنا نیستند)Declarative Renderingیک الگو در vue داریم به اسم Declarative Rendering. (که معنی فارسی مناسبی برای این کلمه پیدا نکردم. پیشنهاد بدین) در برنامه نویسی، مفهومی داریم به اسم Declarative Programming که یک الگوی برنامه نویسی است - یک سبک ساختن ساختار و عناصر برنامه - که منطق محاسبات رو بدون توصیف نحوه انجام گرفتن آن بیان می کند.کد زیر رو ببینید :سینتکس ی که vue برای وارد کردن string به template مون ارائه کرده : {{}} یا double curly brace هستش.در مثال بالا هر مقداری رو که با javascript برای name و title قرار داده باشیم، به جای name و title در متن کد مون قرار می گیرند. به این روش ارائه کردن داده یا data ، توی بیشتر زبان های برنامه نویسی string interpolation گفته میشه. معنای کلمه به کلمه Declarative Rendering میشه ارائه اعلانی [ ( : ] که در واقع نوعی string interpolation هستش.فریمورک vue به ما این امکان رو میده تا داده رو declaratively داخل DOM توسط {{}} ، Render (ارائه) کنیم.مثال : Index.htmlhttps://codepen.io/hamideslami32/pen/ZEEBEVOخیلی خوب. ما اولین app مون رو با vue درست کردیم. به همین سادگی میتونید شروع کنید.منتظر قسمت بعدی آموزش vue.js باشید. منبع :‌https://vuejs.org/v2/guide/https://medium.com/@saltnburnem/declarative-rendering-in-vue-5704b4a7a2c2 توسعه دهندگان VUE حمید اسلامی Wed, 16 Oct 2019 00:21:59 +0330 https://virgool.io/vue-developers/%D9%85%D9%82%D8%AF%D9%85%D9%87-%D8%A7%DB%8C-%D8%A8%D8%B1-vue-%D9%82%D8%B3%D9%85%D8%AA-%D8%B3%D9%88%D9%85v-if-v-else-tru3pxgh2fgj دستورات v-ifو v-elseدر طراحی صفحات گاه پیش می آید که یک بلوک یا پنل یا هر عنصر دیگری از صفحه را در صورت تحقق یک شرط بخواهیم نمایش داده شود. مثال در تصویر زیر در صورتی که مقدار متغییر isA درست باشد در خروجی بلوک A چاپ شود در غیر این صورت بلوک B. برای حل مسائلی از این دست می توان از دستورات v-if ، v-else ، v-else-if استفاده کرد. به کد زیر توجه کنید:استفاده از ساختار v-if و v-elseخط ۳- درون تک با استفاده از دستور v-if تعیین می کنیم بلوک A در صورتی نمایش داده شود که مقدار شرط درست باشد. در این مثال خاص باید مقدار متغییر isA برابر true باشدخط ۴- در صورتی که مقدار شرط درست نباشد بلوک B نمایش داده می شود.ساختار حلقه تکرار گاهی آرایه ای از داده ها را در اختیار داریم و می خواهیم آنها را در یک ساختار تکراری نمایش دهیم مثال فرض کنید لیستی از کاربران را در اختیار داریم و می خواهیم آنها را در یک جدول نمایش دهیم. برای نمایش این گونه ساختارها می توان از حلقه ها و دستور v-for استفاده کنیم. به مثال زیر توجه کنید:دستور v-forدر این مثال آرایه ای از user ها را در اختیار داریم می خواهیم آنها را درون یک جدول نمایش دهیم.خط ۴- آرایه users را با استفاده از حلقه پیمایش کرده در هر مرحله یکی از عناصر آرایه را درون متغییر usr قرار داده و اندیس آرایه را درون متغییر index قرار می دهیم. در هر بار تکرار یک سطر ایجاد می شود.منبعیکی از سایت های آموزشی جالب در این زمینه سایت https://www.taniarascia.com است می توانید به مقاله زیر برای مطالعه بیشتر مراجعه کنید. https://www.taniarascia.com/getting-started-with-vue/ کدهای این آموزش در لینک های زیر قرار دارد: https://github.com/sedighi-mahdi/vue-login/blob/master/src/components/IFTest.vue https://github.com/sedighi-mahdi/vue-login/blob/master/src/components/ForTest.vue توسعه دهندگان VUE mehdi sedighi Wed, 02 Oct 2019 09:28:21 +0330 https://virgool.io/vue-developers/%D8%A7%D9%86%D8%AA%D8%B4%D8%A7%D8%B1-%D9%BE%D8%B1%D9%88%DA%98%D9%87-vue-%D8%B1%D9%88%DB%8C-windows-server-fdz3lbqflf0u سلام میخوام تو این مقاله تمام کار های پایه ای برای deploy پروژه vue ات رو windows server 2016 نیازه انجام بدی رو کامل توضیح بدم . یا کلا بلد نیستی که میخونی و یادمیگری یا اگر بلدی حکم یه چک لیست رو برات پیدا میکنه که سه سوت ببینی همه کار هارو انجام دادی یا نه پوستر زیباییه واقعانسخه productionخب ببین اون پروژه چند ده مگابایتی vue که الان داری کد میزنی و بعد save میکنی و نتیجه رو مرورگر میبینی رو نمیشه گذاشت رو سرور . به اون نسخه از پروژه ات میگن نسخه development ، برای deploy نیازه بیای یه نسخه production درست بکنی که فوق العاده کم حجم تر و نسبتا سریع تره و اونو بذاری رو سرور و برای اینکار اگر داری از CLI استفاده میکنی کافیه تو همون ادرسی که npm run serve رو زدی بیای بگی npm run buildخب بعد از اینکه فرایندش تموم میشه یه فولدری بنام dist توی فولدر پروژه اضافه میشه. بریم سراغ سرورخب وقتی ریموت زدی بیا اون فولدر dist رو تو ادرسی که تو عکس مشخص کردم برات کپی کندوس داشتم ، مخدوشش کردم :)تنظیمات iisببین بصورت پیش فرض وقتی ip سرورت رو بزنی iis میاد هرچی که به پورت 80 ربطش دادی رو نشون میده ما کاری که میکنیم اینه که میگیم اقا هرکی با پورت 80 کار داشت بیا فولدر dist رو بهش نشون بدهخب صرفا کافیه بریم تو iis و بعد بریم به قسمت default Web Siteدوس داشتم ، مخدوشش کردم :)و بعد بری به قسمت advanced setting و ادرست رو به چیزی که تو عکس پایین هست تغییر بدیدوس ...و تمام!میتوی هم با اون گزینه Browse *:80 تست کنی یا اینکه از رو کامپیوترت ip ات رو بزنی و بووووووووووووومانلاینی !!!!!!!ممنون که تا اخر مقاله همراهم بودی امیدوارم تونسته باشم قدری زندگیتو راحت تر کرده باشم ، اگر چیز دیگه ای هست که مفیده بقیه هم بدونن بهم تو کامنت بگو که اضافه کنم و اگه درمورد اتوماتیک کردن فرایند deploy هم چیزی میدونی خیلی عالی میشه که تو کامنت بهم بگی =)) توسعه دهندگان VUE ash_moh Fri, 06 Sep 2019 00:20:50 +0430 https://virgool.io/vue-developers/%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D8%A7%D8%B2-vue-%D8%AF%D8%B1-wordpress-g7rkwtbzzuhv سلام به همه‌‌ی دوستان ٬ تو این نوشته قصد دارم نحوه‌ی استفاده از فریم ورک محبوب Vue.js در وردپرس آموزش بدم.این نوشته آموزشی برای کسانی است که در WordPress و vue قبلاً کد زدن و یا علاقه‌مند هستند. سطح این نوشته متوسط هستش و جاهایی که نیاز به توضیح هست رو توضیح دادم ٬ امیدوارم نهایت استفاده رو ببرید.شاید کسانی که تو زمینه طراحی تم و پلاگین وردپرس هستن براشون سؤال پیش بیاد چرا باید از ‌Vue.js استفاده کنیم؟پاسخ کوتاه اینه که vue به خاطر سادگی و استحکامش شناخته میشه و اونو به یک انتخاب محکم برای توسعه تبدیل میکنه.وردپرس از React استفاده میکنه ٬ آیا میتونیم از Vue.js استفاده کنیم؟درسته بعضی ویژگی‌های WordPress با React نوشته شده اما ما رو محدود نمیکنه. خوب ما میخوایم یک پلاگین shortcode بسازیم که چیزی که توسط Vue تولید میشه رو نمایش بدهمراحلی که قراره طی این آموزش طی کنیم:۱−ساخت پلاگین وردپرس۲−ایجاد یک shortcode در پلاگین۳−ایجاد فایل Vue مرحله اول:ایجاد پلاگین وردپرس۱: به مسیر وردپرس خودتون برین ٬ سپس پوشه wp-content رو باز کنید و بعد پوشه plugins رو باز کنید۲:یک فولد به نام wp-vue-tutorial ایجاد کنید ٬ مسیرتون باید تا الان به این صورت باشه:/wp-content/plugins/wp-vue-tutorial۳:فایلی به نام wp-vue-tutorial.php که همنام فولدر ایجاد شده است بسازید.(توجه داشته باشید که فایلی که ساختید حتماً هم نام فولدر پلاگین باشه تا وردپرس بتونه پلاگین رو تشخیص بده)مسیر فایلی که ساختید:/wp-content/plugins/wp-vue-tutorial/wp-vue-tutorial.php۴:فایلی که ساختید رو باز کنید و کد زیر رو وارد کنید:<?php /** * Plugin Name: نام پلاگین رو اینجا بزنید * Description: یه توضیح کوتاه درباره پلاگین */ ?> نکته: اگر به پلاگین نویسی وردپرس علاقه دارید حتماً به :https://developer.wordpress.org/plugins سر بزنید.۵:برید به قسمت افزونه ها در داشبورد(پیشخوان) وردپرس و پلاگینی که ساختید رو فعال کنید.خوب تا اینجا هنوز کدی نزدیم ولی قراره یه پلاگین shortcode بسازیم ٬ خوب shortcode اصلاً چی هست؟جواب:یک shortcode به WordPress میگه که محتوای تولید شده توسط کد PHP شما را در محتوای صفحه یا پست وارد کن و نمایش بده.مثال:مثلاً کاربر میزنه ['mycode'] و وقتی صفحه بارگذاری شد محتویات shortcode رو نشون میده.۶:کد زیر رو به فایل wp-vue-tutorial.php اضافه کنید://Add shortscode function func_wp_vue(){ return "Hello Shortcode"; } add_shortcode( 'wpvue', 'func_wp_vue' ); توضیحات کد:تابع () func_wp_vue به ما "Hello Shortcode" رو بر میگردونه‌تابع add_shortcode ٬ shortcode رو به وردپرس اضافه میکنه پارامتر اول که میگیره اسم کد کوتاه هست (همون ['mycode'] که قبل تر توضیح دادم) و پارامتر بعدی تابعی هست که یک رشته رو برای نمایش shortcode برمیگردونه.فایلتون تا الان باید اینجوری باشه:<?php /** * Plugin Name: WordPress Vue Tutorial * Description: A demo on how to use Vue in WordPress. */ //Add shortscode function func_wp_vue(){ return "Hello Shortcode"; } // end function add_shortcode( 'wpvue', 'func_wp_vue' ); ?>‌ الان برید یه صفحه یا پست جدید بسازید و shortcode یا کدکوتاه رو به این صورت وارد کنید:['wpvue']وقتی برید صفحه یا پست رو ببنید باید نوشته باشه:Hello ShortCodeخوب حالا کد رو به صورت زیر تغییر بدید:<?php /** * Plugin Name: WordPress Vue Tutorial * Description: A demo on how to use Vue in WordPress. */ //Add shortscode function func_wp_vue(){ $str= "<div id='divWpVue'>" ."Message from Vue: " ."</div>"; return $str; } add_shortcode( 'wpvue', 'func_wp_vue' ); ?>‌// end function مرحله دوم:راه‌اندازی Vue۱−فایل Vue باید تو صفحه بارگذاری شه تا پلاگین کار کنه۲−ما به یک المنت html نیاز داریم تا Vue کار کنه (معمولاً از المنت Div استفاده میشه و اینجا هم قراره استفاده شه)۳− برای نوشتن کدهای Vue ما به یه فایل جاوااسکریپت احتیاج داریم۱:برای بارگذاری فایل از CDN خوده Vue استفاده میکنیم:https://cdn.jsdelivr.net/npm/vue/dist/vue.jsبرای بارگذاری فایل Vue نیاز داریم که اول به وردپرس معرفیش کنیم (رجیستر)کد زیر رو به اول فایل(قبل از کامنت add shortcode // اضافه کنید:function func_load_vuescripts() { wp_register_script( 'wpvue_vuejs', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js'); } add_action('wp_enqueue_scripts', 'func_load_vuescripts'); توضیحات کد:تابع wp_register_script به وردپرس میگه که این اسکریپت وجود داره ولی بارگذاریش نمیکنه ٬ پارامتر اول که میگیره اسمه اسکریپتمون هست که وردپرس با این اسم میشناستش و پارامتر دوم آدرس یا محل اسکریپتمون هست.تابع add_action به وردپرس میگه این کارو انجام بده ٬ پارامتر اول تابع قلاب(hook) هست و پارامتر دوم اسمه تابعی هست که قراره hook شه.(شاید یکم گیج شید میتونید برید توی این لینک برای مطالعه بیشتر)فایلتون تا اینجا باید این شکلی باشه:<?php /** * Plugin Name: WordPress Vue Tutorial * Description: A demo on how to use Vue in WordPress. */ //Register Scripts to use function func_load_vuescripts() { wp_register_script( 'wpvue_vuejs', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js'); } add_action('wp_enqueue_scripts', 'func_load_vuescripts'); //Add shortscode function func_wp_vue(){ //Build String $str= "<div id='divWpVue'>" ."Vue code here: " ."</div>"; //Return return $str; } // end function //Add shortcode to WordPress add_shortcode( 'wpvue', 'func_wp_vue' ); ?> تا اینجا ما Vue.js رو به وردپرس معرفی کردیم ولی هنوز بارگذاریش نکردیم ٬ دلیلش هم اینه که میخوایم وقتی shortcode صدا زده شد بارگذاریش کنیم.کد زیر رو به تابع func_wp_vue اضافه کنید://Add Vue.js wp_enqueue_script('wpvue_vuejs'); توضیحات کد:تابع wp_enqueue_script به وردپرس میگه این فایل رو برام بارگذاری کن ٬ پارامتری هم که گرفته همون اسمه اسکرپیتمونه که بهش دادیم.الان هنوز هیچ اتفاقی نیوفتاده اما اگر برید تو پست یا صفحه‌ایی که shortcode رو اضافه کردید و سورس رو نگاه کنید میبنید که <script type='text/javascript' src='https://cdn.jsdelivr.net/npm/vue/dist/vue.js?ver=5.1.1'>به صفحتون اضافه شده.۲:ساختن فایل جاوااسکریپتیه فایل جدید به نام vuecode.js توی همون پوشه پلاگینتون بسازید و کد زیر رو داخلش وارد کنید:var app = new Vue({ el: '#divWpVue', data: { message: 'Hello Vue' } }) توضیحات کد:ما یک instant از Vue به نام app میسازیمبا el ٬ id المنت رو انتخاب میکنیم و data میگه که این المنت انتخاب شده این اطلاعات رو داره که ما اینجا یک message داریم و مقدارش هم 'Hello Vue' است.اگر گیج شدین برید به لینک های زیر سر بزنید :https://vuejs.org/v2/guide/index.html https://vuejs.org/v2/guide/#Declarative-Rendering برای اینکه بتونیم message رو از Vue نمایش بدیم نیاز داریم که کد {{ message }} رو به div اضافه کنیم.حالا برید به فایل wp-vue-tutorial.php و این قسمت رو عوض کنید:function func_wp_vue(){ //Add Vue.js wp_enqueue_script('wpvue_vuejs'); //Build String $str= "<div id='divWpVue'>" ."Message from Vue: {{ message }}" // اینجا ."</div>"; //Return return $str; } // end function خوب الان باید اسکریپتمون رو بارگذاری کنیم ٬ کد زیر رو به تابع func_wp_vue اضافه کنید:wp_register_script('my_vuecode', plugin_dir_url( __FILE__ ).'vuecode.js', 'wpvue_vuejs', true ); توضیحات کد:این تابع رو قبلاً توضیح دادم ٬ اینجا یه تابع جدید به نام plugin_dir_url میبینید که بهتره برید به سایت خوده وردپرس و دربارش بخونید:https://codex.wordpress.org/Function_Reference/plugins_urlپارامتر سوم یعنی این اسکریپت یک وابستگی داره و پارامتر چهارم اسکریپت رو در فوتر بارگذاری میکنه چون نیاز هست که فایل هامون بعد از بارگذاری کامل DOM بارگذاری بشن.و در آخر کد زیر بعد از('wpvue_vuejs') wp_enqueue_script رو تو تابع func_wp_vue رو بزنید:wp_enqueue_script('my_vuecode'); شکل فایل نهایی php :<?php /** * Plugin Name: WordPress Vue Tutorial * Description: A demo on how to use Vue in WordPress. */ //Register scripts to use function func_load_vuescripts() { wp_register_script('wpvue_vuejs', 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js'); wp_register_script('my_vuecode', plugin_dir_url( __FILE__ ).'vuecode.js', 'wpvue_vuejs', true ); } //Tell WordPress to register the scripts add_action('wp_enqueue_scripts', 'func_load_vuescripts'); //Return string for shortcode function func_wp_vue(){ //Add Vue.js wp_enqueue_script('wpvue_vuejs'); //Add my code to it wp_enqueue_script('my_vuecode'); //Build String $str= "<div id='divWpVue'>" ."Message from Vue: {{ message }}" ."</div>"; //Return to display return $str; } // end function //Add shortcode to WordPress add_shortcode( 'wpvue', 'func_wp_vue' ); ?> شکل نهایی فایل جاوااسکریپت:var app = new Vue({ el: '#divWpVue', data: { message: 'Hello Vue!' } })اگه تا الان همه چیز درست باشه باید تو صفحتون پیغام : Message From Vue:Hello Vue رو ببنید اگر به جای Hello Vue ٬ {{Message}} رو دیدید یه جا اشتباه کردید.خوشحال میشم نظراتتون رو بشنوم ٬ موفق باشید ✋ توسعه دهندگان VUE محسن Thu, 11 Jul 2019 11:08:11 +0430 https://virgool.io/vue-developers/%D8%B3%D8%A7%DB%8C%D8%AA-%DA%86%D9%86%D8%AF-%D8%B2%D8%A8%D8%A7%D9%86%D9%87-%D8%AF%D8%B1-nuxt-js-mtlioriau1yx سایت چند زبانه در nuxt jsسلام به جاوااسکریپتی های عزیز.کارهایی که میخواهیم انجام بدیم:نصب کتابخانه vue-i18n نصب و کانفیگایجاد یه میدلویر برای رسیدگی به وضیعت زبان های مختلفساخت فایل زبان هانصب کتابخانه vue-i18n$ npm install vue-i18n --saveداخل پوشه plugins یه پلاگین جدید بسازید با عنوان : i18n.jsمحتوای درونش:import Vue from 'vue'; import VueI18n from 'vue-i18n'; Vue.use(VueI18n); export default ({ app, store }) => { // Setup i18n app.i18n = new VueI18n({ locale: store.state.locale, fallbackLocale: 'fa', messages: { 'fa': require('~/locales/fa.json') } }); app.i18n.path = (link) => { if (app.i18n.locale === app.i18n.fallbackLocale) { return `/${link}`; } return `/${app.i18n.locale}/${link}`; } } من زبان پیش فرض رو فارسی گذاشتم و شما میتونید هر چیز دیگه ای بزارید.داخل store/index.js یه state تعریف میکنیم برای نگهداری زبان فعلی و زبان هایی که قراره داشته باشیم.state: () => ({ locales: ['fa','en'], locale: 'fa' }),اولی برای زبان هایی که داریم.دومی زبان فعلی. حالا تکه کد زیر رو تو قسمت mutations فایل store/index.js قرار بدید برای تغییر زبان فعلی:mutations: { SET_LANG(state, locale) { if (state.locales.indexOf(locale) !== -1) { state.locale = locale } } },خب حالا باید پلاگینی که ساختیم رو داخل nuxt.config.js فراخوانی بکنیم:module.exports = { build: { vendor: ['vue-i18n'] }, router: { middleware: 'i18n' // برای اعمال بر روی تمامی مسیر ها }, plugins: ['~/plugins/i18n.js'], }حالا نوبت ساختن فایل میدلویر هستش: middleware/i18n.js export default function({ isHMR, app, store, route, params, error, redirect }) { if (isHMR) { return } else if (!params.lang) {//اگر پارامتر زبان وجود نداشته باشد اظافه میکند return redirect('/fa' + route.fullPath) } const locale = params.lang || 'fa' store.commit('SET_LANG', locale) app.i18n.locale = store.state.locale }حالا باید فایل زبان هارو بسازیم.من یک فایل برای زبان فارسی و زبان انگلیسی میسازم و شما میتونید چندین زبان دلخواه خودتون رو بسازید. locales/fa.json { "links": { "home": "خانه", "about: "درباره ما" }, "index": { "title": "سلام دنیا", }, } locales/en.json { "links": { "home": "home", "about: "about" }, "index": { "title": "Hello world!", }, } حالا کافیه داخل پوشه pages یک پوشه بسازید با عنوان lang_ و بقیه صفحه هاتون رو داخل این قرار بدید.برای صدا زدن محتوایی که تعریف کردیم برای مثال من یه صفحه ای ایجاد میکنم :pages/_lang/index.vue<template> <div> <h1 class="page_title">{{ $t('links.home') }}</h1> <nuxt-link class="navbar-item" :to="'/' + $i18n.locale + '/about'">{{$t('links.contact') }}</nuxt-link> </div> </template> export default { head() { return { title: this.$t('index.title') } } } بعضی وقت ها نیاز هستش که برای ترجمه ها یه پارامتر هم تعریف بکنیم که یه مقداری رو بهشون پاس بدیم، برای اینکار از روش زیر استفاده میکنیم: { "links" : { "home": "خانه شماره {number}", "about: "درباره ما" }, "index": { "title": "سلام دنیا", }, } موقع صدا زدن هم به این شکل:<h1 class="page_title">{{ $t('links.home',{number:1}) }}</h1>امیدوارم بدردتون بخوره.موفق باشید. توسعه دهندگان VUE بهمن عنایتی Mon, 01 Jul 2019 12:23:05 +0430 https://virgool.io/vue-developers/%D9%85%D8%B9%D8%B1%D9%81%DB%8C-%DA%A9%D8%AA%D8%A7%D8%A8%D8%AE%D9%88%D9%86%D9%87-%D8%B1%D8%A7%D8%A8%D8%B7-%DA%A9%D8%A7%D8%B1%D8%A8%D8%B1%DB%8C-element-%D8%A8%D8%B1-%D9%BE%D8%A7%DB%8C%D9%87-vue-2-ccy8opckfhgm حدود یک سالی هست که بصورت اتفاقی با پروژه هایی آشنا شدم که توسط برنامه نویس های چینی ایجاد شدند و طرز کدنویسی و تجربه هاشون باعث شد تا من به سمتشون جذب بشم تا جایی که بتونم توی یکی از پروژه هاشون بصورت متن باز مشارکت کنم و پول ریکوئست بدم.اما چی باعث شد که من جذب این برنامه نویس ها بشم:اول از همه رابط کاربری شیک و زیبا: چینی ها به رابط کاربری ساده و زیبا و همینطور انعطاف پذیر خیلی علاقه دارند. و با ایجاد رابط کاربری اختصاصی سعی در برطرف کردن این نیاز دارند. بر خلاف سایر برنامه نویس ها که با استفاده از کامپوننت های آماده قضیه رو ماستمالی میکنند.دوم متن باز بودن: خوشبختانه چینی ها به متن باز روی خوش نشون میدن و پروژه های کوچیک و بزرگشون رو بصورت متن باز منتشر می کنند. سوم خلاقیت: فقط همین که خلاق تر از آدمهای غربی توی زمینه برنامه نویسی هستنچهارم کد نویسی تمیز و قابل فهم: کد نویسی چینی ها به مراتب خیلی بهتر، ساده تر، و قابل فهم تر از سایر برنامه نویس هاست و همیشه از استاندارد های خاصی پیروی میکنند. که خب این باعث میشه مشارکت افراد دیگه توی پروژه ساده تر و بیشتر هم باشه.این ها دلایلی بود که من به سمت برنامه نویس های چینی جذب شدم و کارهاشون رو دنبال میکنم و اگرم کاری از دستم بر بیاد سعی میکنم تو پروژه هاشون مشارکت کنم.خب دیگه کافیه بریم سراغ اصل مطلب، از اونجایی که تو ویرگول برنامه نویس وب زیاد داریم میخواستم یکی از همین پروژه های چینی ها که اسمش Element هست و بر پایه Vue 2 طراحی شده و کاملا هم متن باز هستش رو به برنامه نویس های وب معرفی کنم. المنت خودش رو اینجوری معرفی میکنهElement, a Vue 2.0 based component library for developers, designers and product managers یه کتابخونه رابط کاربری بر پایه Vue 2 برای توسعه دهنده ها، طراح ها و مدیر برنامه هاالمنت به اندازه کافی عنصر برای استفاده در رابط کاربری رو داره هم عنصر های استانداردی که تو همه کتابخونه ها پیدا میشه و هم عنصرهایی که با خلاقیت خودشون ایجاد شدن. اگه سری به سایتشون بزنید میتونید مستندات کافی در رابطه با نحوه استفاده از عنصرها رو مطالعه کنید. نا گفته نمونه همین کتابخونه رو چینی ها دارن توی WPF ایجاد میکنن و نتیجه تا اینجا خیلی عالی بوده و من هم هر ازگاهی مشارکت میکنم. امیدوارم مفید بوده باشه.وب سایت المنت: https://element.eleme.cn/#/en-US گیتهاب المنت: https://github.com/elemefe توسعه دهندگان VUE آمنوتجیکارا Mon, 24 Jun 2019 12:28:20 +0430 https://virgool.io/vue-developers/%D9%88%DB%8C%D9%88-%D8%AF%D9%90%D9%88-%D8%AA%D9%88%D9%84%D8%B2-vue-devtools-%D9%86%D8%B3%D8%AE%D9%87-%DB%B5%DB%B0-%D9%85%D9%86%D8%AA%D8%B4%D8%B1-%D8%B4%D8%AF-rxpieuzfzq2l ویو جِی‌اِس گیوم چاو (Guillaume Chau) یکی از اعضای اصلی تیم توسعه فریم‌ورک ویو جِی‌اِس (Vue Js) ، اخیرا اعلام کرد که ویو دِو تولز (Vue Devtools) نسخه ۵.۰ برای گوگل کروم و فایرفاکس منتشر شده است.ویو دِو تولز (Vue Devtools) یک افزونه مرورگر است که برای اشکال‌زدایی (Debugging) اپلیکیشن‌ های نوشته شده با فریم‌ورک ویو جِی‌اِس، استفاده می‌شود. در واقع کاربردی ترین گزینه شما برای طراحی ساختار برنامه، اطلاع از پراپ‌ها و استیت‌های کامپوننت‌ها، مشاهده رویداد‌ها و البته دیباگینگ همین ویو دو تولز هست; اگر شما با ویو جِی‌اِس کار می‌کنید و از این ابزار استفاده نمی‌کنید، پیشنهاد من رو بپذیرید و هر چه سریعتر این افزونه رو روی مرورگرتون نصب کنید.Vue Devtools 5شما می‌توانید لسیت کاملی از امکانات جدید و تغییرات (برگرفته از یادداشت‌های انتشار نسخه ۵.۰ در گیت‌هاب) را در زیر مشاهده کنید.اضافه شده:تَب Routing گیت‌هاب: (۷۳۵#)تَب Performance گیت‌هاب: (۷۳۳#)تَب Settings گیت‌هاب: (۷۱۳#) استیت های قابل ویرایش برای VueX گیت‌هاب: (۷۲۴#)نمایش تنظیمات تراکم هاپشتیبانی اولیه از اسکریپت‌های بومی (۷۳۲#)مشاهده Ref ها در پنل توسعه دهندگان Vue گیت‌هاب: (۷۴۹#)افزودن $attrs به StateInspector گیت‌هاب: (۷۳۴#) و (۸۶۱#)فیلتر عبارات با قاعده در تَب Events گیت‌هاب: (۸۳۸#)قابل ویرایش ساختن Prop ها (۶۶۹#) و (۸۱۳#)تنظیمات جهت شناسایی ویو دِو تولز (۶۸۵#) و (۸۱۱#) بهبود یافته: تَب‌های Events و VueX عملکرد بسیار سریعتری دارند و از حافظه کمتری استفاده می‌کنند. (۷۲۱#)با انجام Collapse / Expand تمام اِلِمان‌ های فرزند تحت تاثیر قرار خواهند گرفت. (۷۱۵#)کامپوننت‌های فانکشنال در درخت کامپوننت‌ها (Component Tree) نمایش داده می‌شوند. (۷۱۹#)نوع تعاریف (Type Definitions) برای اپ الکترون (Electron App) اضافه شده است. (۸۳۶#) توسعه دهندگان VUE ali.bayat Thu, 28 Mar 2019 16:30:08 +0430 https://virgool.io/vue-developers/vue2-part1-a1koyhufobjf ویو فریم ورک خوش بر و روبا سلام خدمت دوستان من قرار هست فریم ورک vue 2 را در سطح مقدماتی در چندین پست (مقاله) آموزش بدم.معرفی vueخیلی خلاصه بگم بهتون که یک فریم ورک جاوا اسکریپت هستش که میخواد ما را در ایجاد رابط کاربری کمک کنه و به شدت در میان توسعه دهندگان وب محبوب هستش و هر روز به محبوبیتش افزوده میشه و شاید مهم ترین دلایل محبوبیتش موارد زیر باشه:یادگیری آسان تر این فریمورک نسبت به فریمورک های دیگرکم حجم بودن این فریم ورکشباهت بعضی از دستورات آن با فریم ورک انگولار ورژن 1 که به شدت محبوب بود مثل:v-if vs ng-ifv-for vs ng-forدوستانی که میخوان بیشتر از vue بدونن میتونن به وبسایت رسمی سر بزنن.پیش نیازها برای یادگیری vue جاوا اسکریپتجاوا اسکریپت 2015 یا همون ES6نصب و راه اندازی vueخب دوستان برای نصب و راه اندازی در اولین قدم برین به صفحه نصب و راه اندازی در وبسایت رسمیخب الان شما راه های مختلفی برای نصب و راه اندازی را جلوی خودتون مشاهده میکنین از جمله:دانلود نسخه فشرده یا غیر فشرده vue و include کردن با استفاده از تگ script (از فایل فشرده در هنگام توسعه استفاده نکنید)از طریق cdn از طریق npm که این روش برای برنامه های بزرگ پیشنهاد میشه توسط وبسایت vueاز طریق cli که موجب سرعت بخشیدن به توسعه میشه و میتونیم از این طریق ویو را نصب کنیم و با یک سری دستورات ساده که در ادامه قرار میدهم تغییراتمون در کد را بصورت hot reload مشاهده کنیم.# install vue-cli $ npm install --global vue-cli # create a new project using the "webpack" template $ vue init webpack my-project # install dependencies and go! $ cd my-project $ npm install $ npm run devما تو این سری آموزش از همان روش مستقیم (تگ script) استفاده میکنیم و از قسمت بعد میپردازیم به شروع کدنویسی با vue دوست داشتنی و محبوب. توسعه دهندگان VUE علی یوسفی Sun, 28 Jan 2018 12:23:11 +0330