如何在 Nuxt.js 中使用 Material.io 中的 Material 设计组件

How to use Material Design Components from Material.io in Nuxt.js

我真的卡住了,没有找到任何关于我的问题的相关搜索。 我想在我的 nuxt 项目中使用 material 设计组件,但它无法正常工作。 例如我想使用 Outlined Text ,通过 npm 安装组件,将 cdn 添加到我的 nuxt 头(因为我无法创建 scss 文件,它给了我错误,所以这部分也有帮助)和输入风格还可以,但脚本部分不行。所以添加了 "JavaScript instantiation" 部分代码,第二行给我以下错误: 参考错误 文档未定义

所以我真的很感激,如果有人帮助我,我将不胜感激。我知道 https://vuematerial.io/ 但它有两个问题,首先没有所有组件,其次很难改变它的风格(至少我不能)。

你试过使用 Vuetify 吗? Vuetify 是一个 Vue UI 库,包含精美的手工 Material 组件。

要使 SCSS 正常工作,您需要为其下载额外的包

npm install --save-dev node-sass sass-loader

另外 ReferenceError document is not defined 这是初学者很容易遇到的问题。

您需要将您的代码包装在这个 if 语句中,以检查您是否在客户端。我猜你已经将你的代码放入 created()mounted()。两者都执行了 2 次,一次在服务器端,然后在客户端。在服务器端运行时出现该错误,是因为服务器上没有window、文档或任何浏览器的东西,所以需要检查:

if(process.client) {
   //do stuff on client side, document is defined here
}