1) 如果未安装 jQuery，请安装它（正确！）：
npm install --save jquery-
然后在您的 webpack.config 文件中（我只是将它添加到 webpack.dev.config.js 中，但也许将它添加到 prod 配置文件中）：
在插件中添加new webpack.ProvidePlugin
new webpack.ProvidePlugin({
// jquery
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
})
现在 jQuery 可用于所有应用程序和组件。
好消息是，现在对于您想要使用的所有外部库（数字、时刻等）以及语义 ui，这都是相同的过程！
我们走吧：
npm install --save semantic-ui-css
nb ：您可以使用主仓库（即语义 UI），但语义 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：您可以将其他外部库别名放在那里：
// 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 ：这里我用了几个名字，也许 semantic 就足够了 ;-)
同样，您可以在此处添加您的库/别名：
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 插件 - 就像语义 UI 一样！）
所以现在，还有最后一件事要做：
然后，在这一行之后添加：
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>
这个 sn-p 为带有复选框的列表创建一个简单的单元格。
在脚本中：
export default {
props: ['item'],
ready() {
$(this.$el.childNodes[1]).checkbox()
}
}
结果如下：
sample1
sample2
通常，一切都应该正常。
上周我刚刚开始使用 Vuejs 进行开发，所以，也许在那里
是一个更好的方法;-)