在Vue.js中实现
[英]Materialize inside Vue.js
问题描述
I am new with Vue.js and I want to make my project with Materialize. 
我是Vue.js的新手，我想使用Materialize开发我的项目。 I try a lot of plugins like: vue-materialize ( https://github.com/paulpflug/vue-materialize ), vue-material-components( https://www.npmjs.com/package/vue-material-components ) and didn't work. 我尝试了很多插件，例如：vue-materialize（ https://github.com/paulpflug/vue-materialize ），vue-material-components（ https://www.npmjs.com/package/vue-material-components ），但没有起作用。 I also tried to add jQuery plugin to webpack and I don't have any solution: 我也尝试将jQuery插件添加到webpack中，但没有任何解决方案：
new webpack.ProvidePlugin({
$: 'jquery',
jquery: 'jquery',
'window.jQuery': 'jquery',
jQuery: 'jquery'
}),
Now I am trying to make work a input select field. 现在，我试图使工作成为输入选择字段。 How can I make this work? 我该如何进行这项工作？
3 个解决方案
解决方案1
6 2017-10-29 20:34:48
You can use Vue-Material to materialize your Vue project. 您可以使用Vue-Material来实现您的Vue项目。 Following are the steps that you need to follow: 以下是您需要遵循的步骤：
- Install vuematerial
$ npm install --save vue-material安装vuematerial $ npm install --save vue-materialinstall-保存$ npm install --save vue-material - Import vuematerial to your main.js
import VueMaterial from 'vue-material'import 'vue-material/dist/vue-material.css'将vuematerial import VueMaterial from 'vue-material'import 'vue-material/dist/vue-material.css' - Start using vuematerial in your project
Vue.use(VueMaterial)开始在项目中使用vuematerial Vue.use(VueMaterial)
A sample main.js file should look something like this: 示例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 },
});
You will now be able to use vuematerial components inside your template. 现在，您将可以在模板中使用vuematerial组件。
解决方案2
5 2017-05-11 12:40:51
Here is my setup to use Materialize with Vue Webpack template : 这是将Materialize与Vue Webpack模板一起使用的设置：
build/webpack.base.conf.js build / 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 index.html
<head>
...
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
package.json package.json
{
...
"dependencies": {
"materialize-css": "^0.98.2",
...
"devDependencies": {
"@types/jquery": "^2.0.43", // ==> if using typescript
src/main.js src / main.js
import 'materialize-css'
import 'materialize-css/dist/css/materialize.css'
So, for a "input select field" like below: 因此，对于如下所示的“输入选择字段”：
<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>
...you could put this code in your mounted lifecycle hook: ...您可以将此代码放在已mounted生命周期挂钩中：
mounted() {
$(this.$refs.myInput).material_select()
解决方案3
-3 2017-02-08 12:09:13
Vue.js given link by you reffers Materializecss and both are look same. Vue.js给定的Vue.js链接代表Materializecss ，两者看起来相同。 Here I have added fully working code with drop down button . 在这里，我通过drop down button添加了完整的工作代码。
You can just copy and paste following code to a text file and save it as a .html file (ex: name.html ). 您可以将以下代码复制并粘贴到文本文件中，然后将其另存为.html文件（例如： name.html ）。 You can edit this code by adding relevant code in between the comment <!--your code start--> and <!--your code end--> . 您可以通过在注释<!--your code start-->和<!--your code end-->之间添加相关代码来编辑此代码。
Click the Run code Snippet button below to test online and you can see DROP ME! 单击下面的Run code Snippet按钮以进行在线测试，您会看到DROP ME! button. 按钮。 Once you click it you can see how drop down works. 单击后，您可以查看下拉菜单的工作方式。
More details refer materializecss which is more user friendly than the link you have given. 更多详细信息请参见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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.