我正在尝试按照此处的步骤将组件导入到 Nuxt 项目中: https://github.com/viljamis/vue-design-system/wiki/getting-started#using-design-system-as-an-npm-module
Nuxt 没有 main.js
(一切都是基于插件的),所以我所做的是创建一个“插件”,然后像这样在其中执行导入代码(Nuxt 推荐这个也适用于其他图书馆并且工作正常):
vue-design-system.js
import Vue from 'vue'
import system from 'fp-design-system'
import 'fp-design-system/dist/system/system.css'
Vue.use(system)
然后在我的配置中我做了(删除了配置中的其他代码):
nuxt.config.js
module.exports = {
css: [
{ src: 'fp-design-system/dist/system/system.css', lang: 'css' }
],
plugins: [
{ src: '~plugins/vue-design-system', ssr: true }
]
}
当我在我的主题中运行 npm run dev
时,它会构建,但我收到警告:
WARNING Compiled with 1 warnings warning in ./plugins/vue-design-system.js 7:8-14 "export 'default' (imported as 'system') was not found in 'fp-design-system'
生成的 system.js
似乎有关于导出的问题(命令 npm run build:system
)。
在我的屏幕页面中,尝试在设计系统中使用组件时出现以下错误:
NuxtServerError Cannot find module 'fp-design-system/src/elements/TextStyle' from '/Users/paranoidandroid/Documents/websites/Nuxt-SSR'
如果我硬刷新页面,我会收到另一条消息:
NuxtServerError render function or template not defined in component: anonymous
知道这里发生了什么吗?以某种方式让它工作真的很棒。
目前,我不确定这是 Nuxt 问题还是 Vue 设计系统问题。我认为是后者,只是因为我现在拥有的 Nuxt 设置非常简陋……所以这不是其他原因造成的。
谢谢。
GitHub 上的存储库:
这是我的“主题”的存储库,但为了让它继续下去,您需要创建一个与此分离的同名设计系统,并按照步骤将设计系统用作本地(文件) NPM 模块。
https://github.com/michaelpumo/Nuxt-SSR
系统的console.log(来自JS import语句)
最佳答案
至于你的第一个错误(“”export 'default' (imported as 'system') was not found in 'fp-design-system'
”),UMD 从 vue- design-system 不会导出“默认”对象。但您可以通过将其导入为简单地解决此问题:
import * as system from 'fp-design-system'
代替:
import system from 'fp-design-system'
然后另一个问题很快出现,正如您在评论中注意到的那样:“window is not defined
”,再次由于 UMD 构建的 JS 希望 window
全局可用,而不是使用 this
的常用技巧(在浏览器中等于 window
)。因此,构建与 SSR 不兼容。
不过,您可以通过将第一次出现的 window
替换为 this
来稍微修改构建的 JS,但我不确定结果是否仍然有效。
很可能你最好只保留这个模块用于客户端渲染。
关于javascript - 在 Nuxt 中使用 Vue 设计系统会抛出有关在 system.js 中导出的错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51026715/