当前位置: 首页 > 工具软件 > kbone > 使用案例 >

vue转kbone

华永逸
2023-12-01

新建一个kbone项目

将代码对应拷贝过去
注:
package.json:
    依赖需要修改,将我们的依赖添加进去,有重复的删除我们这边的
    注意一个Bable的版本可能会产生冲突,将我们dependencies的"babel-loader"版本改成和kbone里面生成的同样的版本即可

小程序中不支持<style scoped>??

突然会包缺少一个文件sitemap.json,之前没有这个问题,解决:
    在dist/mp下添加一个sitemap.json文件即可

样式名相同的
    .iphoneX    下面有id选择器,不知道会不会有影响
    .keyframes

-------------------------------------------------------------------------------
1 安装kbone-cli
    npm install -g kbone-cli

2 创建kbone项目
    kbone init 项目名

3 项目目录结构见项目下的README文件

4 迁移代码
    可以删除的文件:
        src/common,detail,home,list 这些是自动生成的demo代码
        src/store vuex相关的,暂时没用
            记得删除项目中导入了这个的地方,搜索一下即可,应该只有main.js和main.mp.js中有用到
        src/mp/other 可以删除,只留一个home即可
            需要修改配置文件:
                build/miniprogram.config.js
                    删除router下的other
                build/webpack.mp.config.js
                    删除entry下的other
        tsconfig.json 若要使用ts脚本的相关配置
    
    修改:
        1 将client下的.browserslistrc文件拷贝到对应目录
        2 将client的eslintrc.js的内容替换到kbone项目
        3 babel.config.js拷贝过来
        4 package.json
            1 将client中dependencies拷贝一份到kbone中,如果和kbone中有重复的,删除其中一个(这里删除的是client中的)
            2 devDependencies 同 dependencies
            3 将config添加到kbone中
            注意:Bable的版本可能会产生冲突,将我们dependencies的"babel-loader"版本改成和kbone里面生成的同样的版本即可
        5 将postcss.config.js拷贝到kbone
        6 可以将src/router下的index.js拷贝出来到src的根目录,顺便改个名 router.js(这个文件用于web端的),然后router文件夹就可以删除了
            //修改一下src/main.js中的import路径
        7 将client中的main.js替换一下kbone中的main.js内容
        
    迁移src下的代码
        1 将src下的assert/components/themes/views几个文件夹都拷贝过去
        2 将src下的api.js/filters.js/user.js拷贝过去
        3 将src/App.vue的内容替换掉kbone的内容
        4 打开kbone项目中的mp/home/main.mp.js文件
            将client中的main.js中的代码放到createApp函数中(不要覆盖了前面的document相关的几行代码就行,下面的直接覆盖掉)
            将import的内容也拷贝过来,修改下有问题的路径和缺少的包,处理下报错即可
                import router from './router'删掉
        5 client中的路由拷贝过来,放到const router中,会报错缺少包,import一下就行
        6 src同目录下的router.js也同步一下路由配置信息的内容,mode改为hash,导一下包即可
    
    启动项目:
        暂时先把home.vue中的v-if="!spirte_loaded"屏蔽一下或者改为v-if="spirte_loaded",否则进来页面不会显示
        1 npm install下载依赖包
        2 npm run web 先h5看下效果


5 vue转kbone需要修改的地方
    1 小程序的自定义组件不支持id选择器,所以需要将所有的id选择器都替换成class选择器
    2 kbone不支持scoped,所以删掉所有组件上的<style lang="less" scoped>中的scoped

 类似资料: