react项目中的fancy-components

1. 首先当然是搭好react项目的脚手架 npx create-react-app react-web-com
2. 安装fancy-components yarn add fancy-components
3. 在index.js文件中引入并注册

// index.js文件
import { FcBubbles } from 'fancy-components';
new FcBubbles()

4.在各个文件中就可以肆意使用啦

// component中
<fc-bubbles click>
      {/* //fc-bubbles 不能驼峰命名,不需要驼峰命名 */}
        <img src={logo} className="App-logo" alt="logo" />
</fc-bubbles>

vue项目中的fancy-components

1. 搭建vue项目 vue create vue3-1
2. 安装fancy-components yarn add fancy-components
3. 在main.js中引入并注册

// main.js中
import { FcBubbles } from 'fancy-components'
/* eslint-disable no-new */
new FcBubbles()

4. 然后就是在vue.config.js中配置以fc-开头的组件并不是vue组件,不需要用vue来编译

//vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.compilerOptions = {
          ...(options.compilerOptions || {}),
          isCustomElement: tag => tag.startsWith('fc-')
        }
        return options
      })

  }
})

5. 然后就可以在组件中使用啦,但是在加Click的时候首字母C必须大写,至于为什么呢,我猜可能小写的click在vue里面是关键字吧,所以不能用.

// component中
<fc-bubbles Click>
      <!-- click 加好了,其他配置也配好了,但是无效, 可能vue3.0这里是一个bug 但是把Click 改成大写就可以了 -->
    <img alt="Vue logo" src="../assets/logo.png">
    </fc-bubbles>

6. 大胆发挥你的jsx功力😊

// component中的jsx组件demo.jsx
import { defineComponent } from '@vue/runtime-core'

export default defineComponent(() => () => (
  <div>
  <h1>hhhhhhh呵呵呵呵呵</h1>
  <fc-bubbles Click>
  {/* 用jsx的方式也解决不了,这里可能vue3.0有bug, 但是把Click 改成大写就可以了 */}
    <h1>
      JSX
    </h1>
  </fc-bubbles>
  </div>
))

vite搭建的vue项目中的fancy-components

1. vite搭建vue项目yarn create vite 跳出命令面板,输入项目名称
2. 安装fancy-components yarn add fancy-components
3. 在main.js中引入并注册

//main.js
import { FcBubbles } from 'fancy-components'
new FcBubbles()

4. 如果想写jsx需要额外装一个包yarn add @vitejs/plugin-vue-jsx -D 如果要在vite项目中写jsx需要安装这个插件
5. vite.config.js中配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import jsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue({
    template: {
      compilerOptions: {
        isCustomElement: tag => tag.startsWith('fc-')
      }
    }
  }), jsx({
    isCustomElement: tag => tag.startsWith('fc-')
  })],
})

6. 然后就可以在component中施展拳脚了,耐次勾~~~

// component中
    <fc-bubbles Click><img src="/vite.svg" class="logo" alt="Vite logo" /></fc-bubbles>

7.jsx示例

import { defineComponent } from '@vue/runtime-core'

export default defineComponent(() => () => (
  <div>
  <h1>hhhhhhh呵呵呵呵呵</h1>
  <fc-bubbles Click>
  {/* 用jsx的方式也解决不了,这里说明vue3.0有bug,后续再解决 但是把Click 改成大写就可以了 */}
    <h1>
      JSX
    </h1>
  </fc-bubbles>
  </div>
))

其他参考

1. 其他配置可以参考官方文档啦