v-sapporo MeetUp #2
2019.9.6.Fri 山田 典明
パンセのwebサイトにツッコミを入れることを勤しんでおります
@noliaki
何を作ったの?
なんで作ったの?
使ってる技術
サーバーサイド
クライアントサイド
Tips
まとめ
tsconfig.jsonで
こんな感じに設定してあげれば
こんな感じで読み込めるはず
\(^o^)/
issue発見
-r tsconfig-paths/register ってオプションを付与して起動で解決
Nuxtの起動コマンドは
TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' ts-node -r tsconfig-paths/register ./server/index.ts
こんな感じになった
{
"watch": ["server", "./nuxt.config.ts", "src/serverMiddleware"],
"ext": "ts",
"env": {
"TS_NODE_COMPILER_OPTIONS": "{\"module\":\"commonjs\"}"
},
"exec": "ts-node -r tsconfig-paths/register ./server/index.ts"
}
export interface State {
socketId?: string
roomName?: string
status: Status
stream?: MediaStream
selectedFrameIndex?: number
paused: boolean
decided: boolean
animationFileName?: string
videoScreenCanvas: HTMLCanvasElement | null
}
src/store/signage.ts
import Vue from 'vue'
if (!('$signage' in Vue.prototype)) {
Object.defineProperty(Vue.prototype, '$signage', {
get(this: Vue) {
return this.$store.state.signage
}
})
}
if (!('$controller' in Vue.prototype)) {
Object.defineProperty(Vue.prototype, '$controller', {
get(this: Vue) {
return this.$store.state.controller
}
})
}
src/plugins/inject.ts
import Vue from 'vue'
import * as Signage from '@/store/signage'
import * as Controller from '@/store/controller'
declare module 'vue/types/vue' {
interface Vue {
$signage: Signage.State
$controller: Controller.State
}
}
@types/nuxt.d.ts
アプリを作ってる途中で3Dに出来ねーかなーって思った
すぐ思いつかなかったので、とりあえずいいやってなってた
ごめんなさい、Reactで作りました
(最近Reactにもハマってて)