Ответ 1
1) Установите jQuery, если он не установлен (правильно!):
-
npm install --save jquery -
затем в вашем файле webpack.config (я просто добавил его в файл webpack.dev.config.js, но, возможно, добавлю его в файл конфигурации prod):
в плагинах добавить a
new webpack.ProvidePluginnew webpack.ProvidePlugin({ // jquery $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' })Теперь jQuery доступен для ВСЕХ приложений и компонентов.
Хорошо, что теперь это тот же самый процесс для ВСЕХ ваших внешних библиотек, которые вы хотите использовать (Numeral, Moment и т.д.), и, конечно, semantic-ui!
Отпустите:
-
npm install --save semantic-ui-css
nb: вы можете использовать основное репо (т.е. semantic-ui), но semantic-ui-css - основная тема для семантического-ui.
Итак, теперь вы должны, во-первых, определить псевдонимы в файле webpack.base.config.js:
под resolve.alias добавить псевдоним для семантики:
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: вы можете поместить туда свои другие внешние псевдонимы libs:
// 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: используйте свой собственный путь там (как правило, они должны выглядеть как те!)
... мы скоро закончим...
Следующий шаг - добавить ссылку на псевдоним для поставщика плагинов, например, мы просто делаем для 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: здесь я использую несколько имен, возможно, семантику достаточно, -)
Снова вы можете добавить свой lib/alias:
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'
})
Вот все внешние библиотеки, которые я использую в своем собственном проекте (вы можете видеть, что gridster, который является плагином jQuery, похожим на семантику!)
Итак, теперь самое последнее, что нужно сделать:
-
добавить семантический css:
Я делаю это, добавляя эту строку в начало файла main.js:
import '../node_modules/semantic-ui-css/semantic.min.css'
Затем после этой строки добавьте:
import semantic from 'semantic'
Теперь вы можете использовать его.
Пример в моем файле 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>
Этот фрагмент создает простую ячейку для списка с помощью флажка.
И в script:
export default {
props: ['item'],
ready() {
$(this.$el.childNodes[1]).checkbox()
}
}
Здесь результат:
Обычно все должно работать нормально.
Я только начал развиваться с Vuejs на прошлой неделе, так что, может быть, там это лучший способ: -)