【Copy攻城狮日记】CML之5分钟入门多端一致框架

Created 2019-4-6 21:57:17 by huqi
Updated 2019-4-7 22:54:55 by huqi

↑残局一张图，故事端赖编↑

自从有小顺序以来，小顺序的第三方框架便孕育而生，从原始时代的只基于微信小顺序多如今多端一致开辟框架，能够说前端手艺从2018年到2019年又发生了天崩地裂翻天覆地的变化。以为如今和圈内人吹水，不蹦出几个诸如megalo、Taro、uni-app之类的新词都以为没法混，哈哈。本日逛掘金的时刻，偶然间打开了@Chameleon社区 宣布的我们用5分钟写了一个跨多端项目,Chameleon方才开源的时刻就有关注过，不过一向没有入手，看到开首这个视频教程就有了尝试的激动(比拟某个开源的商业化项目出的教程还需付出一定用度已很良知了)，三天节假日也已过去两天了，是该在Copy&Paste一下，不然连这个CP的妙技冷却时候会变得更长。
一句话引见CML：cml(Chameleon 变色龙） 作为真正让一套代码运转多端的框架，供应规范的MVVM形式，一致开辟各种终端。
为何要入手Chameleon？我以为Chameleon的头脑以为我们进修，毕竟多端一致对前端来说是个大趋势。

答案不一定的，固然也不是否认的，要根据用户的现实场景现实情况，假如我连前端开辟环境都木有，别说入门，就算是装个Cli环境以至Node环境能够都要消费好几分钟；假如我控制了一定技能且有优越的环境，Copy&Paste也易如反掌的事。空话不多说，条件是您最少要用node环境。

• 装置node环境
  详见@i5ting 的文章：狼叔：怎样准确的进修Node.js

• 全局装置Chameleon构建东西

  npm i -g chameleon-tool

  我已装置node@10.14.1、chameleon-tool@0.0.16(展现没看到更新敕令，最新0.1.1，而且暂不支撑yarn、cnpm等装置体式格局)
  

• 建立项目(可选参数:project、page、component)，输入项目名会自动建立项目文件并装置依靠

  cml init

  说实话，假如npm不给力，别说5分钟，能够15分钟过去了预计还卡在npm installing&＃8230;
  
  那就先看看目次构造

  ├── chameleon.config.js // 项目的设置文件
├── dist // 打包产出目次(build以后显现)
├── alipay // 付出宝小顺序代码(build以后显现)
├── baidu // 百度小顺序代码(build以后显现)
├── wx // 微信小顺序代码(build以后显现)
├── mock // 模仿数据目次(现在内置api和template文件夹)
├── node_modules // npm包依靠
├── package.json // 包文件
├── npm-shrinkwrap.json // 锁定依靠版本
└── src // 项目源代码
├── app // app启动进口(包括app.cml)
├── assets // 静态文件夹(包括默许images)
├── components // 组件文件夹(包括默许组件)
├── pages // 页面文件夹(包括默许页面)
├── router.config.json // 路由设置
└── store // 全局状况治理(相似Vuex)

  .cml文件vscode默许是不支撑的，不过已有拓展能够下载

  

  假如npm依靠装置不成功，能够手动装置；或许切换成taobao源

  

• 经由过程运转help敕令检察chameleon的协助提醒

  cml -h
Usage: chameleon [command] [options]
Options:
-V, --version 输出版本号
-h, --help 输出运用信息
Commands:
init [options] 初始化变色龙(chameleon)项目的模板
dev [options] 启动开辟形式
build [options] 启动构建形式
server [options] 开辟环境服务器的东西
web [options] Web项目的东西
weex [options] Weex项目的东西
wx [options] 微信小顺序项目的东西
baidu [options] 百度小顺序项目的东西
alipay [options] 付出宝小顺序项目的东西

• 运转dev敕令启动dev环境，同时浏览器会打开彩蛋

  cml dev web

  

• 固然，或许不一定一帆风顺，遇到问题先当地排查，着实解决不了再去chameleon官方堆栈翻翻issue，或许直接提出issue。
• 既然是Copy&paste，那就直接把@jalonjs 大佬建立的cml-first-demo直接复制过来，一边看文档一边敲代码，尽走上从入门到摒弃的平坦大路！