在 Vue.js 中实现
Posted
技术标签:
【中文标题】在 Vue.js 中实现【英文标题】：Materialize inside Vue.js 【发布时间】：2017-05-10 20:53:41 【问题描述】：我是 Vue.js 的新手，我想用 Materialize 制作我的项目。我尝试了很多插件，例如：vue-materialize (https://github.com/paulpflug/vue-materialize)、vue-material-components(https://www.npmjs.com/package/vue-material-components) 并没有奏效。我也尝试将 jQuery 插件添加到 webpack，但我没有任何解决方案：
new webpack.ProvidePlugin(
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
),
现在我正在尝试使工作成为输入选择字段。我怎样才能做到这一点？
【问题讨论】：
在material input 和this fiddle 上查看这个问题。 【参考方案1】：您可以使用Vue-Material 来实现您的 Vue 项目。以下是您需要遵循的步骤：
-
安装vuematerial
$ npm install --save vue-material
将 vuematerial 导入你的 main.js import VueMaterial from 'vue-material' import 'vue-material/dist/vue-material.css'
开始在你的项目中使用 vuematerial Vue.use(VueMaterial)
main.js 文件示例应如下所示：
import Vue from 'vue';
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.css';
import App from './App';
import router from './router';
Vue.use(VueMaterial)
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue(
el: '#app',
router,
template: '<App/>',
components: App ,
);
您现在可以在模板中使用 vuematerial 组件。
【讨论】：
【参考方案2】：这是我将 Materialize 与 Vue Webpack template 一起使用的设置：
构建/webpack.base.conf.js
var webpack = require('webpack')
module.exports =
resolve:
alias:
...
'jquery': 'materialize-css/node_modules/jquery/dist/jquery.js'
,
module:
rules: [
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
...
options:
limit: 10000
....
plugins: [
new webpack.ProvidePlugin(
$: 'jquery',
jquery: 'jquery',
jQuery: 'jquery',
'window.$': 'jquery',
'window.jQuery': 'jquery'
)
]
index.html
<head>
...
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
package.json
...
"dependencies":
"materialize-css": "^0.98.2",
...
"devDependencies":
"@types/jquery": "^2.0.43", // ==> if using typescript
src/main.js
import 'materialize-css'
import 'materialize-css/dist/css/materialize.css'
因此，对于如下所示的“输入选择字段”：
<div class="input-field" ref="myInput">
<select>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
<label>Materialize Select</label>
</div>
...您可以将此代码放入您的 mounted 生命周期挂钩中：
mounted()
$(this.$refs.myInput).material_select()
【讨论】：
【参考方案3】：Vue.js 给定的链接由您引用 Materializecss 并且两者看起来相同。在这里，我使用drop down button 添加了完整的工作代码。
您可以将以下代码复制并粘贴到文本文件中，然后将其保存为 .html 文件（例如：name.html）。您可以通过在注释<!--your code start--> 和<!--your code end--> 之间添加相关代码来编辑此代码。
点击下方Run code Snippet按钮在线测试，可以看到DROP ME!按钮。单击它后，您可以看到下拉菜单的工作方式。
更多详细信息请参阅materializecss，它比您提供的链接更加用户友好。
<!DOCTYPE html>
<html>
<head>
<title>Slider</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<!--your code start-->
<!-- Dropdown Trigger -->
<a class='dropdown-button btn' href='#' data-activates='dropdown1'>Drop Me!</a>
<!-- Dropdown Structure -->
<ul id='dropdown1' class='dropdown-content'>
<li><a href="#!">one</a></li>
<li><a href="#!">two</a></li>
<li class="divider"></li>
<li><a href="#!">three</a></li>
</ul>
<!--your code end-->
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>
</body>
</html>【讨论】：
vue 在哪里？这是主要问题的一部分 @oswaldo 谢谢你的评论。是的，你是对的。但提供的链接包含“Materializecss”。因此，我明确提到我指的是 Materializecss，因为有时它可能对他或其他用户有所帮助。祝你今天过得愉快。 :)以上是关于在 Vue.js 中实现的主要内容，如果未能解决你的问题，请参考以下文章
angular.js和vue.js中实现函数去抖（debounce）