Introduction
uimi - A SSR for vue3 library
- 💪 Vue 3.0 SSR
- 🔥 Written in TypeScript
Install
pnpm add uimi理念和初衷
我们不会去开发其他插件已经实现的功能，任何时候我们都不会去增加用户的配置项，我们不会去增加用户的学习成本，不会去制定一套自己的规范或配置，我们只会依托vite生态去做特定范围的事情。
对于cli，我们原样复制了vite，然后仅在build.ssr为true时代理了构建行为。
为什么不以插件的方式开发？
因为插件有一些限制，比如在构建之前改变配置和插件，还有很多需要处理的事情，如果以插件的形式来开发，很多事情就变得复杂和棘手，并且可能会让用户配置一些行为，这违背了我们的初衷。
Quick Start
Don't Doubt, This is SSR; although it's the same as normal, We do a lot of processing during DEV and BUILD, Which allows you to use SSR without learning too much
别怀疑，这是SSR，虽然它跟普通的一样，但我们在DEV和BUILD期间做了很多处理，这使得你不必学习太多就能够使用上SSR!
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>uimi</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./main.ts"></script>
</body>
</html>As you can see, HTML doesn't need placeholders, and we can automatically confirm their locations!
如你所见，HTML并不需要占位符，我们能够自动确认它们的位置！
main.ts
import { createSSRApp } from 'vue'
import router from './router'
import App from './App.vue'
const app = createSSRApp(App)
app.use(router).mount('#app')router.ts
import { createRouter, createWebHistory } from 'vue-router'
const routes = {
//some routes
}
export default createRouter({
// only for createWebHistory
history: createWebHistory(),
routes,
})App.vue
<template>
<div>Hello SSR</div>
<router-view> </router-view>
</template>vite.config.ts
import { defineConfig } from 'vite'
export default defineConfig({
//this some vite config
build: {
// only set ssr option
ssr: true,
},
})scripts
{
"name": "test",
"type": "module",
"scripts": {
"dev": "uimi dev",
"build": "uimi build",
"preview": "cd dist && node server.js"
},
"dependencies": {
"uimi": "*"
// other...
}
}pnpm devuimi build
This will package a client build and a server render build, and pre render HTML
Please put your browser code in onMounted
see more Vue SSR
It's that simple. Take a look at the source code of the browser!
You can start using server-side rendering without making any changes
About
- base on vite
License
Copyright (c) 2022-present Yao Yi