我正在尝试按照以下步骤将组件导入到Nuxt项目中:https : //github.com/viljamis/vue-design-system/wiki/getting-started#using-design-system-as-an- npm-模块
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
主题时,它会生成,但会收到警告:
警告在./plugins/vue-design-system.js 7:8-14中已编译,并带有1条警告警告“在'fp-design-system'中找不到导出'默认'(导入为'系统')
Seems to have an issue with the generated system.js
regarding the export (the command npm run build:system
).
In my page on screen I get the following error when trying to use a component in the design system:
NuxtServerError Cannot find module 'fp-design-system/src/elements/TextStyle' from '/Users/paranoidandroid/Documents/websites/Nuxt-SSR'
If I hard refresh the page, I then get another message:
NuxtServerError render function or template not defined in component: anonymous
Any idea what's happening here? It would be really great to get this working somehow.
At this current time, I'm not sure if it's a Nuxt issue or a Vue Design System issue. I think the latter, just because the Nuxt setup I have right now is very bare-bones...so it's not something else causing this.
Thanks.
Repository on GitHub:
Here is the repo for my "theme", but in order to get this going, you will need to create a design system separate from this with the same name and follow the steps to use the design system as a local (file) NPM module.
https://github.com/michaelpumo/Nuxt-SSR
console.log of system (from the JS import statement)