在Vue.js中实现

Question

我是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'
}),

现在，我试图使工作成为输入选择字段。 我该如何进行这项工作？

Answer 1

您可以使用Vue-Material来实现您的Vue项目。 以下是您需要遵循的步骤：

安装vuematerial $ npm install --save vue-material install-保存$ npm install --save vue-material
将vuematerial 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组件。

Answer 2

这是将Materialize与Vue Webpack模板一起使用的设置：

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

<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()

Answer 3

Vue.js给定的Vue.js链接代表Materializecss ，两者看起来相同。 在这里，我通过drop down button添加了完整的工作代码。

您可以将以下代码复制并粘贴到文本文件中，然后将其另存为.html文件（例如： name.html ）。 您可以通过在注释和之间添加相关代码来编辑此代码。

单击下面的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.js中实现

问题描述

3 个解决方案

解决方案1
6 2017-10-29 20:34:48

解决方案2
5 2017-05-11 12:40:51

解决方案3
-3 2017-02-08 12:09:13

在Vue.js中实现

问题描述

3 个解决方案

解决方案1 6 2017-10-29 20:34:48

解决方案2 5 2017-05-11 12:40:51

解决方案3 -3 2017-02-08 12:09:13

解决方案1
6 2017-10-29 20:34:48

解决方案2
5 2017-05-11 12:40:51

解决方案3
-3 2017-02-08 12:09:13