1) Instalacja jQuery, jeśli nie jest zainstalowany (odpowiednio):
npm install --save jquerynastępnie w webpack.config pliku (Właśnie dodałem go w webpack.dev.config js, ale może go dodać w pliku konfiguracyjnym prod):
w wtyczek dodać new webpack.ProvidePlugin
new webpack.ProvidePlugin({
// jquery
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
})
Teraz jQuery jest dostępny dla WSZYSTKICH aplikacji i komponentów.
Dobrą rzeczą jest to już ten sam proces dla wszystkich bibliotek zewnętrznych, których chcesz używać (liczebnik, chwilę, etc ..), i oczywiście semantycznej-ui!
Chodźmy:
npm install --save semantic-ui-css
nb: można korzystać z głównego repo (tj semantyczny-UI), ale semantyczny-ui-CSS jest tematem podstawą dla semantycznej-ui.
Teraz musisz najpierw zdefiniować aliasy w pliku webpack.base.config o nazwie .js file:
pod resolve.alias dodać alias do semantyczny:
resolve: {
extensions: ['', '.js', '.vue'],
fallback: [path.join(__dirname, '../node_modules')],
alias: {
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components'),
// adding our externals libs
'semantic': path.resolve(__dirname, '../node_modules/semantic-ui-css/semantic.min.js')
}
}
NB: można umieścić tam swoje inne zewnętrzne libs aliasy:
// adding our externals libs
'moment': path.resolve(__dirname, '../node_modules/moment/min/moment-with-locales.js'),
'numeral': path.resolve(__dirname, '../node_modules/numeral/min/numeral.min.js'),
'gridster': path.resolve(__dirname, '../node_modules/gridster/dist/jquery.gridster.min.js'),
'semantic': path.resolve(__dirname, '../node_modules/semantic-ui-css/semantic.min.js'),
'stapes': path.resolve(__dirname, '../node_modules/stapes/stapes.min.js')
nb: używać swojego własną ścieżkę tam (normalnie powinny wyglądać jak te!)
... mamy zamiar zakończyć ...
Następnym krokiem jest dodanie aliasu odniesienie do dostawcy wtyczek, jak po prostu zrobić dla jQuery =)
new webpack.ProvidePlugin({
// jquery
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
// semantic-ui | TODO : is usefull since we import it
semantic: 'semantic-ui-css',
Semantic: 'semantic-ui-css',
'semantic-ui': 'semantic-ui-css'
})
nb: tutaj używam kilka nazw, może semantyczny jest tylko wystarczająca ;-)
Ponownie, można dodać lib/alias tam:
new webpack.ProvidePlugin({
// jquery
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
// gridster
gridster: 'gridster',
Gridster: 'gridster',
// highcharts
highcharts: 'highcharts',
Highcharts: 'highcharts',
// semantic-ui | TODO : is usefull since we import it
semantic: 'semantic-ui-css',
Semantic: 'semantic-ui-css',
'semantic-ui': 'semantic-ui-css',
// Moment
moment: 'moment',
Moment: 'moment',
// Numeral
numeral: 'numeral',
Numeral: 'numeral',
// lodash
'_': 'lodash',
'lodash': 'lodash',
'Lodash': 'lodash',
// stapes
stapes: 'stapes',
Stapes: 'stapes'
})
Oto wszystkie libs zewnętrznych używam w moim projekcie (widać gridster, który jest plugin jQuery - jak semantyczny-ui jest!)
Więc teraz, tylko jedna rzecz do zrobienia:
Następnie, po tej linii dodać:
import semantic from 'semantic'
Teraz można go używać.
przykład w moim Vuejs pliku:
<div class="dimension-list-item">
<div class="ui toggle checkbox"
:class="{ disabled : item.disabled }">
<input type="checkbox"
v-model="item.selected"
:id="item.id"
:disabled="item.disabled">
<label :class="{disabled : item.disabled}" :for="item.id">{{item.label}}/{{item.selected}}</label>
</div>
</div>
Ten fragment utworzyć prostą komórkę na liście z wyboru.
A w skrypcie:
export default {
props: ['item'],
ready() {
$(this.$el.childNodes[1]).checkbox()
}
}
Oto wynik:
sample1
sample2
Normalnie wszyscy powinni działa dobrze.
Właśnie zaczął się rozwijać z Vuejs zeszłym tygodniu, więc może tam jest lepszym sposobem na to ;-)
nie praca dla mnie :( – dylan
Jeżeli nie ProvidePlugin i alias dla semantic- W każdym razie, semantic-ui jest importowany jako pusty Obiekt tutaj.Nie działało to –
Cóż, plik semantic-ui js wrócił jako pusty Obiekt tutaj. Sugestie? –