如何在Vue.js中使用MaterializeCss？

Question

我既不想使用Vue-Material也不想使用Vuetify。

我要使用Materialize。 我要做的是：

npm install materialize-css@next

在main.js中，定义了我的新Vue应用的地方，我像这样导入Materialize：

import 'materialize-css'

以某种方式可以运行javascript，但是CSS无法加载；我用Card Reveal进行了测试。

交换动画有效，但未设置样式。 Card Reveal是我要使用MaterializeCss的原因之一，而其他两个都不提供此功能。而且我还想使用“常规” HTML元素，而不是使用100个新元素（例如，在vuetify中）。

Answer 1

第1步：安装

npm install materialize-css@next --save
npm install material-design-icons --save

步骤2：在src / main.js中导入实现的CSS

在src/main.js

import 'materialize-css/dist/css/materialize.min.css'
import 'material-design-icons/iconfont/material-icons.css'

步骤3：初始化实现组件

在组件中添加以下代码（例如App.vue）：

import M from 'materialize-css'

export default {
...
mounted () {
    M.AutoInit()
},
...

Answer 2

此行导入javascript（node_modules文件夹中npm模块的入口）：

import 'materialize-css'

要导入CSS文件，只需执行以下操作：

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

Answer 3

我还建议您在using System.Collections.Generic; using System.Data; using System.Data.OleDb; List<string> serverNamesList = new List<string>(); OleDbDataAdapter dtAdapter = new OleDbDataAdapter(); DataTable serverNamesDataTable = new DataTable(); //populate data table dtAdapter.Fill(serverNamesDataTable, Dts.Variables["User::ObjectVariable"].Value); foreach (DataRow dr in serverNamesDataTable.Rows) { //either access server names from column index 0 of DataRow or add to list serverNamesList.Add(dr[0].ToString()); } 中添加实现CSS CDN。 Aand还创建一个脚本标签并添加以下标签：

=ARRAYFORMULA(INDIRECT(
 ADDRESS(3, MATCH(E2, G2:2, 0)+6, 4)&":"&
 ADDRESS(200, MATCH(E2, G2:2, 0)+9, 4)))