新建一个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