Comments (5)
嗯,是用到了window对象。目前还不支持服务端渲染,之后会研究下这方面,看能不能支持上。
不过我觉得这种背景动画应该没必要上服务端渲染吧😅。
from vue-canvas-nest.
用了nuxt.js 所以来问下看看支不支持☺
from vue-canvas-nest.
怪不得nuxt.js里头炸了。。。
from vue-canvas-nest.
这是个不错的选择
https://zh.nuxtjs.org/api/components-no-ssr/
用这个手法让代码在浏览器执行看看行不行(我不太会,不好意思)
https://zh.nuxtjs.org/faq/window-document-undefined/
我这么整的:
- plugin 插件 plugins\nest.js
import Vue from 'vue'
import vueCanvasNest from 'vue-canvas-nest'
Vue.component('vue-canvas-nest', vueCanvasNest)
- 配置 nuxt.config.js
plugins: [
{src: '~/plugins/nest.js', mode: 'client'}
]
- 直接使用
<vue-canvas-nest></vue-canvas-nest>
问题是会有报错
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render. vue.runtime.esm.js:619
VueJS 67
NuxtJS 2
tryCatch runtime.js:45
invoke runtime.js:271
method runtime.js:97
tryCatch runtime.js:45
invoke runtime.js:135
invoke runtime.js:145
- 使用时放到 client-only 里头(以前叫no-ssr)
<client-only>
<vue-canvas-nest></vue-canvas-nest>
</client-only>
from vue-canvas-nest.
这是个不错的选择
https://zh.nuxtjs.org/api/components-no-ssr/用这个手法让代码在浏览器执行看看行不行(我不太会,不好意思)
https://zh.nuxtjs.org/faq/window-document-undefined/我这么整的:
- plugin 插件 plugins\nest.js
import Vue from 'vue' import vueCanvasNest from 'vue-canvas-nest' Vue.component('vue-canvas-nest', vueCanvasNest)
- 配置 nuxt.config.js
plugins: [ {src: '~/plugins/nest.js', mode: 'client'} ]
- 直接使用
<vue-canvas-nest></vue-canvas-nest>
问题是会有报错
[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render. vue.runtime.esm.js:619 VueJS 67 NuxtJS 2 tryCatch runtime.js:45 invoke runtime.js:271 method runtime.js:97 tryCatch runtime.js:45 invoke runtime.js:135 invoke runtime.js:145
- 使用时放到 client-only 里头(以前叫no-ssr)
<client-only> <vue-canvas-nest></vue-canvas-nest> </client-only>
我刚刚测试了,发现只有页面下半部分有图案出现,而且图案跟鼠标的位置有偏差
from vue-canvas-nest.
Related Issues (13)
- 为啥我打开无法显示呢 HOT 3
- 路由切换时抛错 HOT 1
- dependencies HOT 1
- 为什么我按照教程中的引入了之后没有生效 HOT 2
- 在特定的区域显示时,鼠标位置不会在特定的位置 HOT 8
- 可以为typescript添加一个声明文件 HOT 1
- TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'
- 加个防抖机制就完美了
- 动态设置config为什么canvas还是未更新呢?
- Dependency Dashboard
- 在vue3中不可用
- 关于设置position: fixed后,向下滚动,焦点不跟随问题
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-canvas-nest.