主页 / 问题 / 913006
Accepted
Sergei R
Asked:2020-11-29 11:31:30 +0000 UTC2020-11-29 11:31:30 +0000 UTC

Vue.js如何包含第三方materializecss库？

  • 772

我想在我的项目中使用materializecss库而不是 vue-material

您可以将其包含在索引文件中，如下所示：

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

好吧，据我了解，这不是正确的做法，虽然我为什么不明白，你也可以澄清一下。

您可以通过 npm 安装并创建一个插件：

./src/plugins/materializecss.js

import 'materialize-css/dist/js/materialize.min.js'
import 'materialize-css/dist/css/materialize.min.css'

./src/main.js

// Тут я пробовал и так ...
import '@/plugins/materializecss'

// ... и так
import M from 'materialize-css' 
Vue.use(M)

因为在这篇文章中

import './../node_modules/jquery/dist/jquery.min.js'
import './../node_modules/materialize-css/dist/css/materialize.min.css'
import './../node_modules/materialize-css/dist/js/materialize.min.js'

结果有样式，但是js不行。

./src/App.vue 插入下拉菜单

<template>
  ...
  <div>
    <!-- Dropdown Trigger -->
    <a class='dropdown-trigger btn' href='#' data-target='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" tabindex="-1"></li>
      <li><a href="#!">three</a></li>
      <li><a href="#!"><i class="material-icons">view_module</i>four</a></li>
      <li><a href="#!"><i class="material-icons">cloud</i>five</a></li>
    </ul>
  </div>
  ....
</template>

如何正确连接此类第三方库/框架？

vue.js

1 个回答

  1. Best Answer

    没有人禁止您包含在 index.html 中。所有连接第三方模块的例子基本正确。例如，当我创建一个项目并使用 vue-loader（基于 Webpack）时，使用另一个库作为示例是这样完成的：

    1) npm 和 axios

    2)

    import Vue from 'vue'
import Axios from 'axios'

//используем подключенную библиотеку
Vue.prototype.$http = Axios;

    这在您的情况下不应该工作，因为 materializecss 不是 Vue 插件。

    // ... и так
import M from 'materialize-css' 
Vue.use(M)

    安装了你的库并以这种方式连接

    import "materialize-css";
import 'materialize-css/dist/css/materialize.min.css'

    事实证明，一切正常：

    在此处输入图像描述

    我没有更进一步，看来您应该更仔细地研究库 API。

    • 1

相关问题