This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.
HTML-template 通常用在與「不是自己切版 & 對方提供靜態切版」的合作情境上，如非像這樣的特殊需要，還是建議採用前後端分離 + Vue router 的作法
- resolve > alias 打開 vue 選項
resolve: {
alias: {
vue: 'vue/dist/vue.esm-bundler.js',
// 下略 ...
}
}
- build > rollupOptions 打開
input: {
main: path.resolve(__dirname, './src/main.js'),
},
// 上略 ...
import App from './App.vue'
import GameApp from './pages/game/Index.vue'
// createApp(App) // 取消 createApp
createApp({})
.mixin({
data(){
return {
window,
}
},
components: {
...components,
GameApp,
},
methods
})
// 下略 ...
// pages > game > Index.vue
<script setup lang="ts">
import { reactive, nextTick } from 'vue'
import { useStore } from 'vuex'
import { isEmpty } from '@src/helpers'
interface IProps {}
const props = defineProps<IProps>()
const store = useStore()
const state = reactive({})
</script>
<template>
<slot
:store="store"
:state="state"
:isEmpty="isEmpty"
:nextTick="nextTick"></slot>
</template>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- dev mode -->
<script type="module" src="http://localhost:5173/src/main.js"></script>
<!-- dev mode -->
<!-- prod mode -->
<!-- <script type="module" crossorigin src="./entry/main.js"></script> -->
<!-- <link rel="stylesheet" href="./assets2/main.css"> -->
<!-- prod mode -->
</head>
<body>
<div id="app" v-cloak>
<game-app> <!-- 引入 main.js 的 page component -->
<template #default="{store, viewport, state}"> <!-- page component 透過 slot 拋到 HTML template 的參數 -->
...
...
</template>
<game-app>
</div>
</body>
</html>