需求
可以封装一个方法, 在其他环境(比如vue2)中可以调用方法渲染vue3的组件
调用示例:
renderVueComponentToDOM(document.getElementById('app'), ...argument)
实现
1. 创建工程
使用vite创建, 选择vue
pnpm create vite
2. 项目结构
image.png
3. 编写代码
核心是main.js, 组件就用默认的HelloWorld.vue
import { createApp } from 'vue'
import App from './components/HelloWorld.vue'
function renderVueComponentToDOM(domElement) {
createApp(App).mount(domElement)
}
export default renderVueComponentToDOM
3. vite打包配置
因为是需要单独的当作sdk库使用, 所以需要把组件的css打包到js中
所以需要安装vite插件vite-plugin-css-injected-by-js
pnpm add vite-plugin-css-injected-by-js -D
配置vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
import { resolve } from 'path'
export default defineConfig({
plugins: [
vue(),
cssInjectedByJsPlugin(),
],
define: { 'process.env.NODE_ENV': '"production"' },
build: {
lib: {
entry: resolve(__dirname, 'src/main.js'),
name: 'sdk',
fileName: 'sdk'
}
},
})
4. 打包使用
pnpm build
可以在dist文件夹下看到打包后的文件
image.png
umd文件是给node用的 不需要
我们直接新建个index.html引入sdk.js进行测试
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test</title>
</head>
<body>
<div id="app"></div>
<script type="module" >
import renderVueComponentToDOM from './dist/sdk.js'
console.log(renderVueComponentToDOM)
renderVueComponentToDOM(document.getElementById('app'))
</script>
</body>
</html>
可以看到正常渲染
动画.gif
