Artiely'Blog

Appearance

vite 起一个vue3项目 ​

sh
yarn create vite

创建组件helloWorld.ce.vue ​

vue
<template>
  <div class="hello">
    hello world
  </div>
</template>

<script>
  export default {
    
  }
</script>

<style scoped>
.hello{
  color:red;
}
</style>

vite 配置 ​

js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
// https://vitejs.dev/config/
export default defineConfig({
  define: {
    "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
  },
  plugins: [vue()],
  "process.env.NODE_ENV": "production",
  build: {
    outDir: "demo/dist",
    target: "esnext",
    minify: "terser",
    lib: {
      // formats: ['es', 'cjs', 'iife'],
      entry: "src/components/HelloWorld.js", //指定组件编译入口文件
      name: "my-vue-element", //指定组件名称
      fileName: "my-vue-element", //指定组件打包后的文件名称
    }, 
  },
});

官方文档详解

示例模板 ​

使用步骤

sh
yarn
yarn build
serve -S demo

react 转web components ​

工程代码 ​

https://github.com/artiely/react-vue-to-web-components