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 dev
uimi 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