search

arshivbastian / vue

a teamwork for vue
0 stars 0 forks source link

[IMPORTANT] add Semantic UI Vue (full functional) #2

Open arshivbastian opened 5 years ago

arshivbastian commented 5 years ago
برای اد کردن semantic ابتدا این دستور را در پوشه ی پروژه اجرا می کنیم

npm install semantic-ui-vue --save

سپس برای افزودن css این کد را اجرا می کنیم

npm install semantic-ui-css --save

سپس در مسیر src/main.js تغییرات زیر را اعمال می کنیم 
window.$ = window.jQuery = require('jquery')
import PortalVue from 'portal-vue'
import SuiVue from 'semantic-ui-vue'
import 'semantic-ui-css/semantic.min.css' 

Vue.use(PortalVue);
Vue.use(SuiVue);

2018-12-20_10-44-27

تست کردن این که آیا کتابخانه درست اضافه شده یا نه:

console.log(SuiVue)

در console.log همچین چیزی میبینیم

2018-12-16_11-53-25


اما در عکس اولportal-vue چیه؟

برای استفاده از امکانات کامل semantic مثل popup باید از portal-vue استفاده کنیم به همین منظور : کد زیر را در main.js اضافه کردیم 
import PortalVue from 'portal-vue';

Vue.use(PortalVue);
همچنین کد زیر را به پروژه خود اضافه کنید 

  <portal-target name="semantic-ui-vue"></portal-target>
به مکان قرار گیری کد در عکس دقت کنید

2018-12-19_12-28-14