脚本宝典收集整理的这篇文章主要介绍了

在 Vue-cli 中引入 Semantic UI

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p>首先,我们需要先安装 <a href="http://www.js-code.com/tag/jquery" title="jQuery" target="_blank">jQuery</a></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install --save jquery " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>npm <span class="hljs-keyword">install</span> <span class="hljs-comment">--save jquery</span> </code></pre> <p>然后在 webpack.dev.config.js 文件中,添加</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// plugins 区块内 new webpack.ProvidePlugin({ $ : &quot;jquery&quot;, jQuery : &quot;jquery&quot;, &quot;window.jQuery&quot;: &quot;jquery&quot;, &quot;root.jQuery&quot; : &quot;jquery&quot; }) " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-comment">// plugins 区块内</span> <span class="hljs-keyword">new</span> webpack.ProvidePlugin({ <span class="hljs-string">$ :</span> <span class="hljs-string">"jquery"</span>, <span class="hljs-string"><a href="http://www.js-code.com/tag/jquery" title="浏览关于“jQuery”的文章" target="_blank" class="tag_link">jQuery</a> :</span> <span class="hljs-string">"jquery"</span>, <span class="hljs-string">"window.jQuery"</span>: <span class="hljs-string">"jquery"</span>, <span class="hljs-string">"root.jQuery"</span> : <span class="hljs-string">"jquery"</span> }) </code></pre> <p>随后安装 semantic-ui-css</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install semantic-ui-css --save " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code>npm <span class="hljs-keyword">install</span> semantic-ui-css <span class="hljs-comment">--save</span> </code></pre> <p>之后在 webpack.base.config.js 文件中添加,</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="// resolve 区块 resolve : { extensions: ['', '.js', '.vue'], fallback : [path.join(__dirname, '../node_modules')], alias : { 'vue' : 'vue/dist/vue.common.js', 'src' : path.resolve(__dirname, '../src'), 'assets' : path.resolve(__dirname, '../src/assets'), 'components': path.resolve(__dirname, '../src/components'), // Semantic-UI 'semantic' : path.resolve(__dirname, '../node_modules/semantic-ui-css/semantic.min.js') } } " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-comment">// resolve 区块</span> <span class="hljs-string">resolve :</span> { <span class="hljs-symbol"> extensions:</span> [<span class="hljs-string">''</span>, <span class="hljs-string">'.js'</span>, <span class="hljs-string">'.vue'</span>], <span class="hljs-string">fallback :</span> [path.join(__dirname, <span class="hljs-string">'../<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>_modules'</span>)], <span class="hljs-string">alias :</span> { <span class="hljs-string">'vue'</span> : <span class="hljs-string">'vue/dist/vue.common.js'</span>, <span class="hljs-string">'src'</span> : path.resolve(__dirname, <span class="hljs-string">'../src'</span>), <span class="hljs-string">'assets'</span> : path.resolve(__dirname, <span class="hljs-string">'../src/assets'</span>), <span class="hljs-string">'components'</span>: path.resolve(__dirname, <span class="hljs-string">'../src/components'</span>), <span class="hljs-comment">// Semantic-UI</span> <span class="hljs-string">'semantic'</span> : path.resolve(__dirname, <span class="hljs-string">'../node_modules/semantic-ui-css/semantic.min.js'</span>) } } </code></pre> <p>随后在 webpack.dev.config.js 文件中,添加</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" plugins: [ new webpack.ProvidePlugin({ $ : &quot;jquery&quot;, jQuery : &quot;jquery&quot;, &quot;window.jQuery&quot;: &quot;jquery&quot;, &quot;root.jQuery&quot; : &quot;jquery&quot;, // Semantic-UI semantic : 'semantic-ui-css', Semantic : 'semantic-ui-css', 'semantic-ui': 'semantic-ui-css' }), " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-symbol"> plugins:</span> [ <span class="hljs-keyword">new</span> webpack.ProvidePlugin({ <span class="hljs-string">$ :</span> <span class="hljs-string">"jquery"</span>, <span class="hljs-string">jQuery :</span> <span class="hljs-string">"jquery"</span>, <span class="hljs-string">"window.jQuery"</span>: <span class="hljs-string">"jquery"</span>, <span class="hljs-string">"root.jQuery"</span> : <span class="hljs-string">"jquery"</span>, <span class="hljs-comment">// Semantic-UI</span> <span class="hljs-string">semantic :</span> <span class="hljs-string">'semantic-ui-css'</span>, <span class="hljs-string">Semantic :</span> <span class="hljs-string">'semantic-ui-css'</span>, <span class="hljs-string">'semantic-ui'</span>: <span class="hljs-string">'semantic-ui-css'</span> }), </code></pre> <p>接下来,引入 css 和 js 文件:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import semantic from 'semantic' import '../node_modules/semantic-ui-css/semantic.min.css' " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> semantic <span class="hljs-keyword">from</span> <span class="hljs-string">'semantic'</span> <span class="hljs-keyword">import</span> <span class="hljs-string">'../node_modules/semantic-ui-css/semantic.min.css'</span> </code></pre> <p>接下来,我们要测试一下,添加一个 vue 文件:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div class=&quot;semantic-component&quot;> <div class=&quot;ui selection dropdown semanticDropDown&quot;> <input type=&quot;hidden&quot; name=&quot;gender&quot; v-model=&quot;selected&quot;><br /> <i class=&quot;dropdown icon&quot;></i></p> <div class=&quot;default text&quot;>Gender</div> <div class=&quot;menu&quot;> <div class=&quot;item&quot; :data-value=&quot;item.Value&quot; v-for=&quot;item in items&quot; @click=&quot;changeSelection(item)&quot;><br /> {{ item.Gender }} </div> </p></div> </p></div> <pre>{{ JSON.stringify(selectedItem) }}</pre> </p></div> <p></template></p> <p><script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { data() { return { items : [ {Gender: 'Male', Value: 1}, {Gender: 'Female', Value: 0} ], selected : '', selecteditem: {} } }, methods: { changeSelection(item) { <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.selectedItem = item <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.selected = item.Value } }, mounted() { <a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a>.selecteditem = {} $(this.$el).find('.semanticDropDown').dropdown() } } </script></p> <style></style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">class</span>=<span class="hljs-string">"semantic-component"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"ui selection dropdown semanticDropDown"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"hidden"</span> <span class="hljs-attr">name</span>=<span class="hljs-string">"gender"</span> <span class="hljs-attr">v-model</span>=<span class="hljs-string">"selected"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">i</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"dropdown icon"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">i</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"default text"</span>&gt;</span>Gender<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"menu"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"item"</span> <span class="hljs-attr">:data-value</span>=<span class="hljs-string">"item.Value"</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"item in items"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"changeSelection(item)"</span>&gt;</span> {{ item.Gender }} <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">pre</span>&gt;</span>{{ JSON.stringify(selectedItem) }}<span class="hljs-tag">&lt;/<span class="hljs-name">pre</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { data() { <span class="hljs-keyword">return</span> { <span class="hljs-attr">items</span> : [ {<span class="hljs-attr">Gender</span>: <span class="hljs-string">'Male'</span>, <span class="hljs-attr">Value</span>: <span class="hljs-number">1</span>}, {<span class="hljs-attr">Gender</span>: <span class="hljs-string">'Female'</span>, <span class="hljs-attr">Value</span>: <span class="hljs-number">0</span>} ], <span class="hljs-attr">selected</span> : <span class="hljs-string">''</span>, <span class="hljs-attr">selecteditem</span>: {} } }, <span class="hljs-attr">methods</span>: { changeSelection(item) { <span class="hljs-keyword">this</span>.selectedItem = item <span class="hljs-keyword">this</span>.selected = item.Value } }, mounted() { <span class="hljs-keyword">this</span>.selecteditem = {} $(<span class="hljs-keyword">this</span>.$el).find(<span class="hljs-string">'.semanticDropDown'</span>).dropdown() } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span> </code></pre> <p>效果如下:</p> <p><span class="img-wrap"><img data-src="/img/bVEzKB?w=351&amp;h=454" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="62374105gw1f91c3c2zpnj209r0cm3yu.jpg" title="62374105gw1f91c3c2zpnj209r0cm3yu.jpg" style="cursor: pointer;"></span></p> <p>参考链接:<a href="http://stackoverflow.com/questions/36676215/using-vue-js-with-semantic-ui" rel="nofollow noreferrer" target="_blank">Using vue.js with semantic UI</a></p> <p>--EOF--</p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

在 Vue-cli 中引入 Semantic UI

全部内容,希望文章能够帮你解决

在 Vue-cli 中引入 Semantic UI

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过