话接上回

话接上回，武松打死西门庆后，被充军发配。

镜头一转，只见酒馆高阁楼台中，又走出一位头带大红花，手执摇扇的人。原来武松打死的竟是西门庆安排的替死羔羊。

什么，你们不喜欢看这个？什么，接错了？好吧，我辈正经人，大家继续聊代码。

如果大家不是上篇文章跳转过来的，一定要先看这篇文章

呕心沥血之react中使用vue组件_不应识的博客-CSDN博客https://blog.csdn.net/baidu_41632421/article/details/125065875?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22125065875%22%2C%22source%22%3A%22baidu_41632421%22%7D&ctrtid=SVB3P

版本及配置文档

我的飞冰版本是ice-scripts 2.x，此文章只对此版本做处理，其他版本大家自己触类旁通，参考文档去配置吧。

ice-scripts 2.x文档地址ice/plugin-dev.md at stable/docs-backup · alibaba/ice (github.com)https://github.com/alibaba/ice/blob/stable/docs-backup/docs/guide-0.x/builder/plugin-dev.md 所有文档地址版本升级 | 飞冰 (gitee.io)https://iceteam.gitee.io/docs/guide/upgrade

飞冰ice-scripts 2.x配置

此处只展示差异，请结合你的项目

//ice.config.js//你的代码...const VueLoaderPlugin = require('vue-loader/lib/plugin');module.exports = {//你的代码....chainWebpack: (config, { command }) => {// 你的代码...config.module.rule('new-rule').test(/\.vue$/).use('vue-loader').loader('vue-loader');config// 定义插件名称.plugin('VueLoaderPlugin')// 第一项为具体插件，第二项为插件参数.use(VueLoaderPlugin, [[{libraryName: /@ali\/ice-.*/,stylePath: 'style.js',},]]);//添加这段代码后vue组价可以正常使用, 但是原项目中的组件会受到影响, 有的加载不出来, 所以先暂时注调, 换用别的方式//['jsx', 'tsx'].forEach((rule) => {//  config.module//    .rule(rule)//    .use('babel-loader')//    .tap((options) => {//      // 添加一条 babel plugin，同理可添加 presets//      options.plugins.push(require.resolve('vuera/babel'));//      return options;//    });//});},
};

我在这个项目中添加vuera/babel会有问题, 所以换成了如下方式, 此例子是vuera官网例子。这样做会麻烦一点，大家有更好的办法，欢迎交流指教。

import React from 'react'
import { VueWrapper } from 'vuera'
//你的vue组件
import MyVueComponent from './MyVueComponent.vue'export default () => (<div><VueWrappercomponent={MyVueComponent}message='Hello from Vue!'/></div>
)

没了，结束，下班，啥？你看不懂？继续话接上回啊

呕心沥血之飞冰（icejs）项目使用vue组件 -- vuera相关推荐

呕心沥血之react中使用vue组件 -- vuera
目录前言介绍vuera 补充vue环境配置环境其他项目飞冰项目解决办法报错解决如何解决vue的ui库问题前言首先需求是领导要求咱融合两个项目, 一个是vue一个是react. 什么? ...
java NumberPad实现_旺财记账项目-Money.vue组件实现(下)
1. 实现TypeScript的Vue组件. 以Types组件为例改写 JS写法 @click="selectType('-')">支出 @click="selec ...
html input 比字长,旺财记账项目-Money.vue组件实现(上)
1. 小技巧:快速包裹每一行选中,按两下 shift,输入 surround ,选择 surround with emit,输入 li*,意思就是 n 个 li 包住行数 2. input,labe ...
Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
div旋转 vue_详细解析：uniapp项目|vue组件形式实现的水珠晃动loading纯CSS动效
前言上一篇文件给大家分享了一个颇具科技感的loading动效,[→传送门]这篇文章,小凡再来跟大家分享一个很酷的水珠晃动loading动效,依然是纯CSS实现的哦! 一.效果展示及思路分析 1.效果 ...
vue项目调用通用组件_详细解析：uniapp项目|vue组件形式实现的科技感loading纯CSS动效...
前言本人是一枚并不安分守己的后端程序猿,一直对前端开发"垂涎三尺",所以,一有机会就会"不务正业"一番.最近,发现了一个非常好的学习资料,于是乎,我的老毛病又 ...
项目总结-vue分页组件集成
项目总结-vue分页组件集成后台管理的大部分页面都需要对数据进行分页显示,但是在每个页面都写分页代码太过冗余,而且当分页出现问题时,需要修改每个页面,所以我集成了一个分页组件,在每个页面直接引用这个 ...
bootstrap 打印组件_如何在Bootstrap项目中用Vue.js替代jQuery
Bootstrap是 Web 开发最受欢迎的框架之一,没有比它开发响应式网站项目效率最高了. 随着Vue.js的逐渐流行,更多人们用它来控制页面元素,实现强大互动功能.而jQuery出现了一些技术落后 ...
js 获取vue组件html_vue项目中，index.html数据与组件之间通信，传值，以获取MAC地址为例...
最近在项目里接手别人的代码来做完善,其中一个是修复获取不到MAC地址的bug,仔细看了下代码,发现需要用到Activex控件. 上一位同事在写的时候把写在index.html文件中,获取mac地址的j ...

呕心沥血之飞冰（icejs）项目使用vue组件 -- vuera

话接上回

版本及配置文档

飞冰ice-scripts 2.x配置

呕心沥血之飞冰（icejs）项目使用vue组件 -- vuera相关推荐

最新文章

热门文章