1) Installare jQuery se non è installato (correttamente):!
npm install --save jquerypoi nella vostra webpack.config di file (ho appena aggiunto in webpack.dev.config .js, ma forse aggiungerlo nel file di configurazione prod):
nei plugin aggiungere un new webpack.ProvidePlugin
new webpack.ProvidePlugin({
// jquery
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
})
Ora jQuery è disponibile per TUTTA l'applicazione e i componenti.
la cosa buona è questo ora è lo stesso processo per tutte le vostre librerie esterne che si desidera utilizzare (in numeri, Moment, ecc ..), e, naturalmente, semantica-ui! Go
Let:
npm install --save semantic-ui-css
nb: è possibile utilizzare il repo principale (cioè semantico-ui), ma semantico-ui-css è il tema base per semantico-ui.
Quindi, ora, è necessario, in primo luogo, definire Alias nel file webpack.base.config.js di file:
sotto resolve.alias aggiungere l'alias per semantica:
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: che ci può mettere gli altri libs alias esterni:
// 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: usare il tuo proprio percorso lì (normalmente dovrebbero assomigliare a quelli!)
... stiamo per finire ...
passo successivo è quello di aggiungere il riferimento alias del provider di plugin, come abbiamo appena facciamo per 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: qui io uso diversi nomi, forse semantica è sufficiente solo ;-)
Anche in questo caso, è possibile aggiungere i lib/alias lì:
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'
})
Ecco tutte le librerie esterne che sto utilizzando nel mio progetto (si può vedere gridster, che è un plugin jQuery - come semantico-ui è!)
Così ora, solo un'ultima cosa da fare:
aggiungere css semantica:
faccio questo con l'aggiunta di questa linea, all'inizio degli main.js di file:
import '../node_modules/semantic-ui-css/semantic.min.css'
Poi, dopo questa riga aggiungere:
import semantic from 'semantic'
Ora è possibile utilizzarlo.
Esempio nel mio file Vuejs:
<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>
Questo frammento creare una cella semplice per una lista con una casella di controllo.
E nello script:
export default {
props: ['item'],
ready() {
$(this.$el.childNodes[1]).checkbox()
}
}
Ecco il risultato:
sample1
sample2
Normalmente, tutti dovrebbero funziona bene.
Ho appena iniziato a svilupparsi con Vuejs settimana scorsa, quindi, forse c'è è un modo migliore per a quella ;-)
non funziona per me, :( – dylan
non dovrebbe la ProvidePlugin e l'alias semantico ui ha lo stesso nome? In ogni caso, semantic-ui viene importato qui come oggetto vuoto, non ha funzionato –
Bene, il file semantico-ui js è tornato come oggetto vuoto qui. Suggerimenti? –