{"_id":"chameleon-tool","_rev":"93-8800f2364996db8c119d5ee7ae192b03","name":"chameleon-tool","dist-tags":{"latest":"1.0.8","alpha.0-0.0.12":"0.0.12-alpha.0","alpha-0.0.13.2":"0.0.30-alpha.2","alpha.1-0.1.0":"0.1.0-alpha.1","alpha.2-0.1.0":"0.1.0-alpha.2","alpha.3-0.1.0":"0.1.0-alpha.3","alpha.0-0.0.15":"0.0.15-alpha.0","alpha.0-0.0.16":"0.0.16-alpha.0","alpha.4-0.1.0":"0.1.0-alpha.4","alpha.0-0.1.1":"0.1.1-alpha.0","alpha.0-0.2.0":"0.2.0-alpha.0","alpha.1-0.2.0":"0.2.0-alpha.1","alpha.1-0.3.0":"0.3.0-alpha.1","alpha.2-0.3.0":"0.3.0-alpha.2","alpha.3-0.3.0":"0.3.0-alpha.3","alpha.4-0.3.0":"0.3.0-alpha.4","alpha.5-0.3.0":"0.3.0-alpha.5","alpha.6-0.3.0":"0.3.0-alpha.6","alpha.7-0.3.0":"0.3.0-alpha.7","alpha.8-0.3.0":"0.3.0-alpha.8","alpha.9-0.3.0":"0.3.0-alpha.9","mvvm.1-0.4.0":"0.4.0-mvvm.1","mvvm.5-0.4.0":"0.4.0-mvvm.5","mvvm.6-0.4.0":"0.4.0-mvvm.6","mvvm.7-0.4.0":"0.4.0-mvvm.7","mvvm.8-0.4.0":"0.4.0-mvvm.8","mvvm.9-0.4.0":"0.4.0-mvvm.9","mvvm.10-0.4.0":"0.4.0-mvvm.10","alpha.0-0.3.3":"0.3.3-alpha.0","mvvm.11.1-0.4.0":"0.4.0-mvvm.11.1","mvvm.11-0.4.0":"0.4.0-mvvm.11","mvvm.12-0.4.0":"0.4.0-mvvm.12","mvvm.13-0.4.0":"0.4.0-mvvm.13","alpha.1-0.3.3":"0.3.3-alpha.1","alpha.2-0.3.3":"0.3.3-alpha.2","alpha.qq.1-0.3.3":"0.3.3-alpha.qq.1","mvvm.15-0.4.0":"0.4.0-mvvm.15","alpha.3-0.3.3":"0.3.3-alpha.3","alpha.4-0.3.3":"0.3.3-alpha.4","mvvm.16-0.4.0":"0.4.0-mvvm.16","alpha.5.1-0.3.3":"0.3.3-alpha.5.1","alpha.5-0.3.3":"0.3.3-alpha.5","alpha.6-0.3.3":"0.3.3-alpha.6","alpha.7-0.3.3":"0.3.3-alpha.7","alpha.2-0.4.0":"0.4.0-alpha.2","alpha.0-0.4.1":"0.4.1-alpha.0","alpha.1-0.4.1":"0.4.1-alpha.1","alpha.0-1.0.3":"1.0.3-alpha.0","alpha.1-1.0.4":"1.0.4-alpha.1","alpha.2-1.0.4":"1.0.4-alpha.2","alpha.1-1.0.5":"1.0.5-alpha.1","alpha.2-1.0.5":"1.0.5-alpha.2","alpha.1-1.0.6":"1.0.6-alpha.1","alpha.2-1.0.6":"1.0.6-alpha.2","alpha.3-1.0.6":"1.0.6-alpha.3","alpha.5-1.0.6":"1.0.6-alpha.5","alpha.6-1.0.6":"1.0.6-alpha.6","alpah.0-1.0.8":"1.0.8-alpah.0","alpah.1-1.0.8":"1.0.8-alpah.1","alpha.1-2.0.0":"2.0.0-alpha.1"},"versions":{"0.0.1":{"name":"chameleon-tool","version":"0.0.1","description":"","main":"index.js","scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"author":"","license":"ISC","_id":"chameleon-tool@0.0.1","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-Ct3LGwAKcGTaQ80gUTaMFqVOraPm67bWktiG9rUDGiK0mUCGYS8FOErXZDRCdQiK9l0loGAi5+Be51/i7pzWyw==","shasum":"2eec40f380a3e3e771d8d280e17cf21e7bb9ffd1","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.0.1.tgz","fileCount":2,"unpackedSize":246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcEcO1CRA9TVsSAnZWagAAhi8P/jyFPOFPqQ+onDadSFO6\nlIWUcxu8DXnf00DT4+yscBX6dLedMxYch19a7bz/R6Sxq/uj3uLvDCE9Byt8\nVUyUzQvi1kR3WKuG2ttc/xsUnFKiRTbwK04yKFf1WyOEtKyyDZpcVE/t3a54\n395uhLq9NKccIycJx3KivETLw0a4HRIPM810psRHGuZZH8qCIdMi5HPTHrZe\nlDcf9pQHTxsbNEAoaIXO6eTGjzor1qO8nT7pyMGa2XrMu10H9X0LzUKQVNft\nXlXUk4Y0xNKLCOEOjHMffPSTjpQ1OHxpLg8gdjBSUMXWeIw65Pwivh67ACHO\nMm/E4ayZUdIGW0GylIm0sr1Tc+igw2aYrQVYXHeDD84dmBKUb9QzFadwcYt7\nfpMBwfcXrhlskObhF9RgyWSA2Guv2tecQvUSIW+YxjeFZU6bYPjwftIRl7X1\np8vX5ndO0T1PtMsEnSx83ySy1VWubvmy5NV5tKk1w99YtfajnMLYKd3GnkbM\nmMpm474iXbSx6idn+UhRl5oBW3Jhy+yDnbMyM+gp09v/09QFufEYUXgl7RNJ\nGM8CjwG8Nxd0R9VOolqW+gbSgWKvZZ6GHSUZYU4XH5IPC50ApXcnRXjYXMF0\nEfjhh+Qqc1Z4naHVoy3IKE2OiA1NDY4Qy++4gD5qxzfAbzh2tUhBsy+Y1zWC\nmfjw\r\n=pkgc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCmgFvgfSFrmBHQXFI/8uvoNlGz+MrLEVirjT06wKt6IQIgP7MIlGYG7KX9rLQgzrlN4+ptL3w/uMxAb+FlZQR+24M="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.0.1_1544668084521_0.5514924876793701"},"_hasShrinkwrap":false,"deprecated":"this version has been deprecated"},"0.0.2":{"name":"chameleon-tool","version":"0.0.2","description":"http://docs.didialift.com","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"0.0.17","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chameleon-css-loader":"0.0.17","chameleon-dev-proxy":"0.0.17","chameleon-linter":"0.0.17","chameleon-loader":"0.0.17","chameleon-miniapp-target":"0.0.17","chameleon-mixins":"0.0.17","chameleon-template-parse":"0.0.17","chameleon-templates":"0.0.17","chameleon-tool-utils":"0.0.17","chameleon-url-loader":"0.0.17","chameleon-vue-precompiler":"0.0.17","chameleon-webpack-dev-middleware":"0.0.17","chameleon-webpack-plugin":"0.0.17","chameleon-weex-vue-loader":"0.0.17","clean-webpack-plugin":"0.1.19","colors":"1.3.0","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extract-text-webpack-plugin":"3.0.2","fetch-detector":"1.0.1","fetch-ie8":"1.5.0","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","http-proxy-middleware":"0.18.0","inquirer":"6.0.0","interface-loader":"0.0.17","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mpvue-webpack-target":"1.0.1","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-loader":"14.2.3","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"0.0.17","webpack-chunk-hash":"0.6.0","webpack-dev-middleware":"2.0.6","webpack-dev-server":"2.11.2","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"0.0.17","webpack-manifest-plugin":"2.0.3","webpack-merge":"4.1.3","write-file-webpack-plugin":"4.3.2","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@0.0.2","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-7ewqNF8gR9yRt7vLwuZghBGRw1bzK+ZlYl2CTKab0rKdfEQ16QfV4LBxWbxM5sx8htUy4XRDHzFfINAD/4nQyg==","shasum":"fc5c1a6484be0c0096e5e80d69d9c3ea1423886f","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.0.2.tgz","fileCount":79,"unpackedSize":764078,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcN4DaCRA9TVsSAnZWagAAzjEP/15eZYC6SBmcR8BDC9Wa\nEfujKCFKSz2i4Uhw9fYGETqawX6ZfV8VHRckzOLW7rT8OJo0WBzVpk+e6I98\nhX8tAwZOy9T0a3zJGRhUdoA+Z0GmBHbH5xlaEmAk4Xfk0zhmVs10PEH8TgMj\nV78oo6/vvZucBnGL1s/zhRSVhdZEOfRXfEbjSIBYgCx28rnLCn5PJrDBZv8G\nIed29iLdCCRpQ1nKKqIa+VR1A/7rVx29tzTTh7nBOcz6hYx5mv7fqLtB23kf\nZN4VVDgIiLXqES+gcl5uwl5FrZfBLmga6JG4nPGiambTP+DxXsb/hFpiKD1S\nPGdVvCJDsqqxGvw7PmAJG9u7VxQCFXfsbp9/NXEtfZlOwkWjAvpXVUNn/y5p\nw+0QXh03knE8RUQpub58lt7R3GebugkgmwTsBJiC7uZRCD1YnVeL/cucgbNg\nBxEIUBA0O8ivhCpfRJ7Ptz7uVdvMiA5kUEGRuxJergGsxRUIHb4AezPHU9Hk\nQA7YoydpPY4ux0mOjxeJM/G0KL+S4wBcLTfxKLOLOwqshyleAzQRa7ylrYd+\nKy0Hu4NwW8gKJeMl8lE+7TKsa/4f2zRfbKCxXp+enj2FnYRzr5Uqrna9FH6I\nJ5j0GYvyiOSG6Rn33BBQAH/itcGHoofB6j2kf9PFiU+z8vqnbg9qzw7yF5fd\nUzZS\r\n=eOS5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGl3XrT3D7eeEqTjiI/maF6L+oSJ1hf+csJfiTGOZMdkAiBnfyUzs3N4CzTNXqqTNG0TCjpb5ORwjvCfg4oAuiUUEQ=="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.0.2_1547141338053_0.5791010526380465"},"_hasShrinkwrap":true},"0.0.3":{"name":"chameleon-tool","version":"0.0.3","description":"http://docs.didialift.com","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"0.0.19","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chameleon-css-loader":"0.0.19","chameleon-dev-proxy":"0.0.19","chameleon-linter":"0.0.19","chameleon-loader":"0.0.19","chameleon-miniapp-target":"0.0.19","chameleon-mixins":"0.0.19","chameleon-template-parse":"0.0.19","chameleon-templates":"0.0.19","chameleon-tool-utils":"0.0.19","chameleon-url-loader":"0.0.19","chameleon-vue-precompiler":"0.0.19","chameleon-webpack-dev-middleware":"0.0.19","chameleon-webpack-plugin":"0.0.19","chameleon-weex-vue-loader":"0.0.19","clean-webpack-plugin":"0.1.19","colors":"1.3.0","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extract-text-webpack-plugin":"3.0.2","fetch-detector":"1.0.1","fetch-ie8":"1.5.0","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","http-proxy-middleware":"0.18.0","inquirer":"6.0.0","interface-loader":"0.0.19","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mpvue-webpack-target":"1.0.1","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-loader":"14.2.3","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"0.0.19","webpack-chunk-hash":"0.6.0","webpack-dev-middleware":"2.0.6","webpack-dev-server":"2.11.2","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"0.0.19","webpack-manifest-plugin":"2.0.3","webpack-merge":"4.1.3","write-file-webpack-plugin":"4.3.2","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@0.0.3","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-bKT+JgRzp8VMUDk+jjvicG7BetjV8keE8dSAVQj13kQVjLnz7LBfdvZz9JxtuIFNtxBGjj+iCJxzZtM4GjaDvg==","shasum":"b48fb9e5f80dd20a8cadde5f6a827541e503f19b","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.0.3.tgz","fileCount":78,"unpackedSize":188179,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcN4gXCRA9TVsSAnZWagAA2MIP/1PRwIQKRJERqS7kTsyY\nU4YSk5+QABPiOqjolnqpGjqxdoEb8/t9wD9PckYLf6IenEqQOqmbpuTyppSu\nTATrLbHBubNukNU5MrupZ/6QT5xmBuOtSqpICsa+HJEnlHu4nKHfVCUzTPd4\nZkoUbtcdk5NtotVps9vjXPUYJiv1TmV3chdA+BDDMZfOa2+oUrof73T/8vkh\n61eg+/HZ8mVl2qc39X9iHWB+zt5LR9YTk5JKqiGAWv+N732ateOOSv9cGPdp\npURDAKIA+QFF1eOUxTad35uprM3DRioXXZvYguxtwq2i1c9x5P3KvISJqaKK\nFOW/tnovTG7Usv7VnL1r5Xzu83kjT2tt4XDLcciobKiHwrZY3nRo6WtmHLSH\nqRbGUVPJwJpAnGnGn7tiUfDtNi2yjmqdIjFDHLH5w+c8r5xFSn4NXfjpYp5z\nMzms/hlZTjW3KWaBryJBpQQVeP93w2IDF7F4NVLuPVKIaU4oUzpR5PZHLo/H\ndFZeAJrHUvBvtR8Yf8t1le5iA8ocaQWwSfWP6nwNbYYlpPSBiVPz9Fh80IMX\nDmur1CA5ItUxUEYnURqxH5q66Jtn9sb2Y3sKMVH82MUwnjehRZ0WBD/AsLbe\nmtsUcTxkifJLdKhbx6eqSuuC0HLv6wOJ7FJ4E1b1HfGUhVAosXEPPrH2QLJp\nkTlN\r\n=sQrm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDXtST7iBOMvmmsxc6zcBUF1C3D8ilpywjpjBSr6SIe+gIhAMqvyI9E9eRg+DWpoBkCR9JzxVrXQo5aVrz+vLEI60PN"}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.0.3_1547143190802_0.4137757931534034"},"_hasShrinkwrap":false},"0.0.4":{"name":"chameleon-tool","version":"0.0.4","description":"http://docs.didialift.com","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"0.0.21","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"0.0.21","chameleon-dev-proxy":"0.0.21","chameleon-linter":"0.0.21","chameleon-loader":"0.0.21","chameleon-miniapp-target":"0.0.21","chameleon-mixins":"0.0.21","chameleon-template-parse":"0.0.21","chameleon-templates":"0.0.21","chameleon-tool-utils":"0.0.21","chameleon-url-loader":"0.0.21","chameleon-vue-precompiler":"0.0.21","chameleon-webpack-dev-middleware":"0.0.21","chameleon-webpack-plugin":"0.0.21","chameleon-weex-vue-loader":"0.0.21","clean-webpack-plugin":"0.1.19","colors":"1.3.0","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extract-text-webpack-plugin":"3.0.2","fetch-detector":"1.0.1","fetch-ie8":"1.5.0","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","http-proxy-middleware":"0.18.0","inquirer":"6.0.0","interface-loader":"0.0.21","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mpvue-webpack-target":"1.0.1","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"^1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-loader":"14.2.3","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"0.0.21","webpack-chunk-hash":"0.6.0","webpack-dev-middleware":"2.0.6","webpack-dev-server":"2.11.2","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"0.0.21","webpack-manifest-plugin":"2.0.3","webpack-merge":"4.1.3","write-file-webpack-plugin":"4.3.2","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@0.0.4","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-lzup3tIv/AFFjAmSIV/C8RpiYTh/ZtfwvQKHs9/Gm9TQ9I5wDiUvcYPHAhLZQ+rx5kpsvuVASnwWEGBfLH9aNw==","shasum":"7fdb5ed648e43ecc662e9879e42960e13470dee6","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.0.4.tgz","fileCount":79,"unpackedSize":771893,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcOJPUCRA9TVsSAnZWagAAt2gP/jSL8ofy1BDNX4rd/z6a\nOdlfszhiDzwuLqyfzBlRb1HN7YAXHhShabrAyc6VgWoOv/A/czPjlKqb1kbs\n9quhSjRILfQ5mOuxqCISDHBmYz8C/Kmx+bsTdluLgurGWovqXB3LYgEmpzpO\nW4u8H+tbxHW93VxvKXi14/4JrV91YkvxW646ZXHBITFMILqssFqsl3Dx5I5o\nc9P3AXFu6fEMz7boDaWa1eWIuOIXeQLtJ9+mx1X/ibLK3IsYpFP3X31jOtvJ\nFE1oJccDXLrczBYHsrURjXR/FGRk+tnfONJsqGhdjFho7eCpf1oBjZFfMk0Z\nDreMqSxZbVCT0VlBdM2ZMyu5LTo0TXUzmXdnklDZXdYD6QHxfH5P2DHzKo8d\nDsoG3HKrX4V3eJglPg98XFaPR+FjYUNqk2TydM1emCNVwsZBU21u/5U4IflN\nA9lGZ0Zw/gzsRoo8e5aqJUdQ9uZzVCVNJJy0T4/5hQ9KwNMl3M0nYybEeMmD\neXAAlEpRMIXAqkKTURfoKsIduPAIWNYvzu/fk4KVqW9baQKaIUpY2EyLKDPC\nDuOqXrvdmjVrbdpVbD68ukeMttO293z+tzMTgccY8dv0yITGixPg1q7w5Zy+\nGLBkmIDXqUnuJTee+Zwsz7pQbLi7FrfmHtj9GwmKCC9ksxJ5TbPrzDC+JDDm\ngJAq\r\n=VdDa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCkhCJdzmyCXugpWeySF5pSRePfp1dXTJD100xNmIyG2QIhAKPTP/G52GNIj7I/4g6ExLlrY8SwE9EzeQGsxov1d59B"}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.0.4_1547211731515_0.4763497654889921"},"_hasShrinkwrap":true},"0.0.5":{"name":"chameleon-tool","version":"0.0.5","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"0.0.22","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"0.0.22","chameleon-dev-proxy":"0.0.22","chameleon-linter":"0.0.22","chameleon-loader":"0.0.22","chameleon-miniapp-target":"0.0.22","chameleon-mixins":"0.0.22","chameleon-template-parse":"0.0.22","chameleon-templates":"0.0.22","chameleon-tool-utils":"0.0.22","chameleon-url-loader":"0.0.22","chameleon-vue-precompiler":"0.0.22","chameleon-webpack-dev-middleware":"0.0.22","chameleon-webpack-plugin":"0.0.22","chameleon-weex-vue-loader":"0.0.22","clean-webpack-plugin":"0.1.19","colors":"1.3.0","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extract-text-webpack-plugin":"3.0.2","fetch-detector":"1.0.1","fetch-ie8":"1.5.0","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","http-proxy-middleware":"0.18.0","inquirer":"6.0.0","interface-loader":"0.0.22","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mpvue-webpack-target":"1.0.1","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"^1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-loader":"14.2.3","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"0.0.22","webpack-chunk-hash":"0.6.0","webpack-dev-middleware":"2.0.6","webpack-dev-server":"2.11.2","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"0.0.22","webpack-manifest-plugin":"2.0.3","webpack-merge":"4.1.3","write-file-webpack-plugin":"4.3.2","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@0.0.5","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-CVOoLdE/ty1D52fH8wSo9vUWa/YF5hzYtjowNpUMCMtZckuuq9OWWZtdptCXVeP70wsUf50VodjRDRm7CZefoA==","shasum":"b1fcefa6610d19fe17781c7bcbd3dcbd97a70ea7","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.0.5.tgz","fileCount":89,"unpackedSize":837791,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcONITCRA9TVsSAnZWagAA6KwP/1X5Db0HNOPqvEVO2acH\nXFm0fJBAnscWrxvqT/maxsVeuo7YM8m1WxQXAL3gVbSW2ybFn8sRehkyhj7U\nGUM0HcuoulPCM3Cz44ogVVXUOtY/n4hZgptj1QVihqHtBFuAdxILGBQV7UcM\nEUnHIAO/zojRggL66fhlFstWKoWsBgcVfakY9G9EUKGqDilUwsuXqTHGXiXX\n2/+hbrRwnRgu8zkLI/rW/B+mNp6+BCypY2r9LGWn9uKkF2klV3DR00+V/4pt\niSVYuJsoQAKJ/UrzdoOO2nAFHSVB113+6iUinkc1ATvMnjuGG03d8/HMuSYd\ngdkH2nMMzS82x6gOZzF/Hqvi9col2NPlJVBXY7M73LnNS/UEq3ygWxZfRa9s\nwdzbelgZ1fuU4L9vSxBobsGUaUN9IL7t1BnPlkkPvvSbEMO6QKqn/wf5ZpbF\no5l8UEBj4bKqMt+wIRK594VI3K++zRGP3BUmI2ZeikunGXnQwKOKASuhXSCy\ngnDZEHsNqNZaoX8pt0dJCl3mXVfCW3v/39gklHAeJvMw2XajJsbdpUYAA+ZL\nyiBjetnIAECjfVGFxDObel3FbNAM8S1QKcBvF/DSmW0xJOVpIv5EW0H1O5Ps\np5vjaEzfx10hf4nLGIAhH3Ws6YszaIcPDYlC/9/A9rNszJVHe+N6frkVVi+0\niuut\r\n=4HL5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDG5lDbUqLrNghA/kDdlwO8NgBxidxSqilWjkyb04ETJAIgN3MgsYwuAXCQSI3yb0eLvIPauhcM3FTM4R0RjUsJN9k="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.0.5_1547227666235_0.022398381137985535"},"_hasShrinkwrap":true},"0.0.6":{"name":"chameleon-tool","version":"0.0.6","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"0.0.23","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"0.0.23","chameleon-dev-proxy":"0.0.23","chameleon-linter":"0.0.23","chameleon-loader":"0.0.23","chameleon-miniapp-target":"0.0.23","chameleon-mixins":"0.0.23","chameleon-template-parse":"0.0.23","chameleon-templates":"0.0.23","chameleon-tool-utils":"0.0.23","chameleon-url-loader":"0.0.23","chameleon-vue-precompiler":"0.0.23","chameleon-webpack-dev-middleware":"0.0.23","chameleon-webpack-plugin":"0.0.23","chameleon-weex-vue-loader":"0.0.23","clean-webpack-plugin":"0.1.19","colors":"1.3.0","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extract-text-webpack-plugin":"3.0.2","fetch-detector":"1.0.1","fetch-ie8":"1.5.0","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","http-proxy-middleware":"0.18.0","inquirer":"6.0.0","interface-loader":"0.0.23","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mpvue-webpack-target":"1.0.1","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"^1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-loader":"14.2.3","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"0.0.23","webpack-chunk-hash":"0.6.0","webpack-dev-middleware":"2.0.6","webpack-dev-server":"2.11.2","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"0.0.23","webpack-manifest-plugin":"2.0.3","webpack-merge":"4.1.3","write-file-webpack-plugin":"4.3.2","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@0.0.6","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-vnQbWJmQCaqwYT3rr6e7f8hk5I3HO6OI/DRM93VeClnGgDOBg0j/tUXDm3G4SsO5NNOLwrXT5VMWeTeIwRwcAw==","shasum":"13a0709e7fa6ff81c5ce443cdea35945a2441b4e","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.0.6.tgz","fileCount":89,"unpackedSize":837826,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcOb2zCRA9TVsSAnZWagAAc+8P/Anf4RkNH7wdKtcOT6AV\nbVWJps/F3EKbz7CraV9goqIqo6oEsJzxfET+0h+1Fs7JLonmF2ZvxI+Vjvku\nMQMdQIDoa6tZUxYYftLJ0TasUnw+qBzvr2/eCg7UUqYHo1R+yQpK4o2UQsRx\nejPLjatEiwmntwGC0UbgRrYheLw7GtBZzsjdkn6um5HmVIZyl7SYJBD2NnyT\nl0ZGB77VlXLIDNFecjtC7X1m2a5k5ne4kFmjpzl1fo0Mq4CiLHn2KWbcxcli\n4TC0anO7JP1usdZFeMetZbNu0z2adMd6HZ9B51Qq2gO37it/js1a602zH/vM\niJ/pS8g4x/MH0ls/Y8NqwNAE5Iki2blk/LSUIfpElqns9E9CbkLKHVB/ahiq\ndQ28z1jOyJyczsy1HSHPHY+GjxejwMPwlAZ1IBrtjQWrbuAxeLp1YMhaM3jd\n3jKw7gOvOJp2bR7ZQwZRVvUHJhd0YV6+LK2M7EaQ3ZUWrVP/3YV5BvIasmYp\n99WVxiTM8Blqjj8FCi67PydbKvkuqopLnC5NJXvxWbiJdJ98ku70l66ULctf\nL73oBKYsuRRzAIcQ3Hgvg6GB8jaZEXi9p3N4cg1H8fFiiqxq99LERPSJOqCS\nVmCnkEEoHNdKri7R4x6ri4TbcuP2wNkOLBag6QzM9reftJA3cC9ZfpCuofQl\nR7L5\r\n=U6eB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHbTn8e/wJH4dDEak4rzrpYK6KLQXCg/wIZJTkWOKTIaAiEAnfpG9ilCzLcrKhIez/u3TSV9Q3YD8TFY+zVFZyS17HA="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.0.6_1547287986560_0.9956535744439172"},"_hasShrinkwrap":true},"0.0.7":{"name":"chameleon-tool","version":"0.0.7","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"0.0.24","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"0.0.24","chameleon-dev-proxy":"0.0.24","chameleon-linter":"0.0.24","chameleon-loader":"0.0.24","chameleon-miniapp-target":"0.0.24","chameleon-mixins":"0.0.24","chameleon-template-parse":"0.0.24","chameleon-templates":"0.0.24","chameleon-tool-utils":"0.0.24","chameleon-url-loader":"0.0.24","chameleon-vue-precompiler":"0.0.24","chameleon-webpack-dev-middleware":"0.0.24","chameleon-webpack-plugin":"0.0.24","chameleon-weex-vue-loader":"0.0.24","clean-webpack-plugin":"0.1.19","colors":"1.3.0","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extract-text-webpack-plugin":"3.0.2","fetch-detector":"1.0.1","fetch-ie8":"1.5.0","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","http-proxy-middleware":"0.18.0","inquirer":"6.0.0","interface-loader":"0.0.24","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mpvue-webpack-target":"1.0.1","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"^1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-loader":"14.2.3","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"0.0.24","webpack-chunk-hash":"0.6.0","webpack-dev-middleware":"2.0.6","webpack-dev-server":"2.11.2","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"0.0.24","webpack-manifest-plugin":"2.0.3","webpack-merge":"4.1.3","write-file-webpack-plugin":"4.3.2","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@0.0.7","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-ERpN/dUhSaxm5oNpA5pM/PraiGAcziOHfxZcBRk/qaQ0ZQUUuwXzDnaol7iy79xp1SvEyPC90jCy33JV7oChTg==","shasum":"3b11db10ba88b91c7aff98efba4a47f7217c86c2","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.0.7.tgz","fileCount":89,"unpackedSize":837881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcOekrCRA9TVsSAnZWagAAryQP/j5qhTA7xb3ncAtRg3Pf\n/ZIemuwNfEbNX7sqKv8YnRWcJMLZsMeJbUQFdZG3oUMM8T5SXscK0kNlqnFs\ntCqZAUaMbwBHjQsIRrn6hOBdiPfGs9SIUq/LKJ9YjPc+61azefoMnlCm6lqN\nqti8KF7QtX3I1psH0qHCunn0k02NL5PRBQkdeUFccknudoLWeWwZqnCX0eWx\nfNx7VN0k9V27fGKB1fPjR7fI7yxRU45gUdledf8Lac2phv3tKf9+GH1SG7fu\nmOtzr06Yvgr3ZwRW0m9aM0XqaP5Qm3VmzRp30JeJSALgjbqOFkzPtverYXuv\nstaJXPtwgCupgYLLuM35gUp3qjszLgTQnCr9UFRDmSxeNbur5hmM0LD3gmFJ\nWg08uPNLg80QhGR6d26WGz38zZR4blQ64G+sZV7i0cqQRTd79bUOJpvkXLae\nNByKwbOqA10gtFzV9RXEjwS/dLrUj+FiX5P6g0SE7zCt17/yozHndywsoSFl\ngNl/mB4noah4iLWszIMJ/UFpjygMjFHdjQhz5U3EwFEvEwhVuVi7CvuwBiW0\nOkQ5RS8e9MeE57zR7Y3lk1BMjod13DhTyU/lBH3e3r4a1YEtYvnWKpDjzvXr\nk+bYtiT02g8vRZxDZYPk21smufCOrxPBQkVeeFcnbdDm1Zbnhabgb4KR/PAZ\nOwE+\r\n=xGXS\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAjCBi0US88m+5FYzWkCtDNAQRNURaOOBaYkPyYXQRjgAiB2/p6I98JEvySboiJVvrYd1Luy7+HxEzreamlCcpZA9w=="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.0.7_1547299114583_0.6271179860294482"},"_hasShrinkwrap":true},"0.0.8":{"name":"chameleon-tool","version":"0.0.8","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"0.0.26","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"0.0.26","chameleon-dev-proxy":"0.0.26","chameleon-errors-webpack-plugin":"0.0.26","chameleon-linter":"0.0.26","chameleon-loader":"0.0.26","chameleon-miniapp-target":"0.0.26","chameleon-mixins":"0.0.26","chameleon-template-parse":"0.0.26","chameleon-templates":"0.0.26","chameleon-tool-utils":"0.0.26","chameleon-url-loader":"0.0.26","chameleon-vue-precompiler":"0.0.26","chameleon-webpack-dev-middleware":"0.0.26","chameleon-webpack-plugin":"0.0.26","chameleon-weex-vue-loader":"0.0.26","clean-webpack-plugin":"0.1.19","colors":"1.3.0","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extract-text-webpack-plugin":"3.0.2","fetch-detector":"1.0.1","fetch-ie8":"1.5.0","file-loader":"1.1.11","friendly-errors-webpack-plugin":"^1.7.0","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","http-proxy-middleware":"0.18.0","inquirer":"6.0.0","interface-loader":"0.0.26","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mpvue-webpack-target":"1.0.1","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"^1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-loader":"14.2.3","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"0.0.26","webpack-chunk-hash":"0.6.0","webpack-dev-middleware":"2.0.6","webpack-dev-server":"2.11.2","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"0.0.26","webpack-manifest-plugin":"2.0.3","webpack-merge":"4.1.3","write-file-webpack-plugin":"4.3.2","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@0.0.8","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-YfQTzPGrDFcx87JsvNR8ZdMjv+XZotLyvTxQikTuOlW5HM1ELF2aNivcK2CZom52I5EEFXW7n5MmsA9Lg0M/WA==","shasum":"89b1a6ed2231a6be882fd9a4cdb4cef9e01bbcee","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.0.8.tgz","fileCount":90,"unpackedSize":841275,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPdANCRA9TVsSAnZWagAADloP/2bOvz58Oo7+XnjbP15D\nD8VrvOhMrbpemX+mCgtmORR3WDumDq9Lf6qLSg4n5DgjVwKLVrqSH5wVLSE5\nI3AgeaG9THonjmJ/eAnIg+lkB3FMC3+hrArnRA1nwotIcmGQdmRf7RJI4ZRy\nvPnT36jrUSpqOOkk5bLvF3JEOAc19+nGMCJlXhdfkONUJKJRqIy9E5U6S/5A\nAA4kTguIHT7lBA827uJp+phuzm0Kq+BeSyUpCT6hIcthm3EFMctL4RN8E2C9\n/yrO1xtmK/N1a5QZE3Y85edUeJNFDcoF4KNsxVRWDp21krcEQSHjkUhWSvqS\nAAtCQlRKnxbZ3lybYcUvJW/VsryqT9jaZ0hPuYmCIcfrbbZ+LLQsH/uolTOx\n4OmlsMGpdjhzm4LhcyIFq/5TiRch5MiO+8KyaLZJaBXCiZEN6qtexx+KuRI1\nxDrAZEp3m4v3FZUJEIo2gnuhf6dXUSJWrd+7QU3Mm8PtFmTUjbAp2vd6GI9G\nYSSnFB9hKRSU+XXYuhadA5KELtjdwRfpzzRDCfru60lGsZ3gZ9vW3gIB/O1w\nhnvsIy7M8h9h+Ck3ctSZP9Yb45dEUDRYqlhPAKhxs7NXipWqTOy9iwuT5OX5\nDOMmw8z4DPRiFiMCgc0aNrxN28ofqOUDtml5N/8G/nAI3uCrKUUZBzwSn0xa\nFyte\r\n=1Vdu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD3MlhQZr6vr1HAhmcfq8yPOOSNFEgtYV4Gvz3n6Nmw+gIhAKGEn46jqS4BmatfW/JsL/VlJK7NKtF9LVZP3f2z/mm9"}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.0.8_1547554828980_0.8361118174658306"},"_hasShrinkwrap":true},"0.0.9":{"name":"chameleon-tool","version":"0.0.9","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"0.0.27","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"0.0.27","chameleon-dev-proxy":"0.0.27","chameleon-errors-webpack-plugin":"0.0.27","chameleon-linter":"0.0.27","chameleon-loader":"0.0.27","chameleon-miniapp-target":"0.0.27","chameleon-mixins":"0.0.27","chameleon-template-parse":"0.0.27","chameleon-templates":"0.0.27","chameleon-tool-utils":"0.0.27","chameleon-url-loader":"0.0.27","chameleon-vue-precompiler":"0.0.27","chameleon-webpack-plugin":"0.0.27","chameleon-weex-vue-loader":"0.0.27","clean-webpack-plugin":"0.1.19","colors":"1.3.0","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extract-text-webpack-plugin":"3.0.2","fetch-detector":"1.0.1","fetch-ie8":"1.5.0","file-loader":"1.1.11","friendly-errors-webpack-plugin":"^1.7.0","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","http-proxy-middleware":"0.18.0","inquirer":"6.0.0","interface-loader":"0.0.27","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mpvue-webpack-target":"1.0.1","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"^1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-loader":"14.2.3","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"0.0.27","webpack-chunk-hash":"0.6.0","webpack-dev-middleware":"2.0.6","webpack-dev-server":"2.11.2","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"0.0.27","webpack-manifest-plugin":"2.0.3","webpack-merge":"4.1.3","write-file-webpack-plugin":"4.3.2","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@0.0.9","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-MVI8DK6tUGTOVzTH+gHtSVs2kKhcE3Qi64IyjJn57Vjz8IpUhZsDdi/PrJFYqwjlMcoWMVGjfgRd/vbcgfl/Dw==","shasum":"5af7725380b79083cdb388ecc12ccd08f83f02c5","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.0.9.tgz","fileCount":90,"unpackedSize":841849,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcPycOCRA9TVsSAnZWagAAJpIP/jCeJ9AGZ50uye0oR/ny\nXb5lMHf+haX5q/y+zrRoLllDbW81SUzpn1zWgU9RYCHxEGlqEYCCkro3zzDB\nD3MRQVeRkm2oSzUbORqqEqltWctlVIT5Ggx4HX874hPU4r+71nI2S5zOZY7n\nx+DXoFXxUVySrqTnlKDXHbySdRRQium50e8O/DIKqSuFgAlCarli430028u3\ntcm3Hr0FpAdGH+cqIyDkI61CKZzyVH8lN72akeND7FJEF1cgJnkGuMJeh5b5\nyuj6+O7mRXw3OpyeW9DzsHTHwsoI4/ZEXtDR6BTu2aVSXsX9ZVVjvCEpcuHH\n/ng76ap4tkBb06kw4S4WPNBsJ6dyu5jI4o0610RWLXSpk3uajy5YbL+ER0AZ\njh6M3a7NDI1wSP+09nwxj6l8/HuwV/8kLyzl1Up2UxY9LLmmifHHGxRsd6cm\nWzywC+Sf5TlJxUTOZhPm546D5farn+3O2J7u7nvh1iNUiWijkkn9CTgL8MLe\nai+yxPkAKdcUQS82TnAikOkla2GWPdjDSTOTiTIc5lAHnPc7fPJiaAah04aL\nMa0keqW7YiY5hZJMumXsBj8RVteehpgaMEcH5W8is9ZaM9yvyVRysriAkhHD\nyY0z+RwmiDliTdBxn0V+twwNxquJsjC4ryFAR7IhZ85E8T26EE6Bs4NHoxi+\neZ8s\r\n=fOr0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHX6Yv0Zkv5bUFE9Rqg9aiOKI8BQsUa9YbJwwyTOiFNyAiEAzpNbJdYK2PpjEPS3Gu6TRyDiGl/HedAiXO9PVJLSvT8="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.0.9_1547642637929_0.95274136324742"},"_hasShrinkwrap":true},"0.0.10":{"name":"chameleon-tool","version":"0.0.10","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"0.0.28","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"0.0.28","chameleon-dev-proxy":"0.0.28","chameleon-errors-webpack-plugin":"0.0.28","chameleon-linter":"0.0.28","chameleon-loader":"0.0.28","chameleon-miniapp-target":"0.0.28","chameleon-mixins":"0.0.28","chameleon-template-parse":"0.0.28","chameleon-templates":"0.0.28","chameleon-tool-utils":"0.0.28","chameleon-url-loader":"0.0.28","chameleon-vue-precompiler":"0.0.28","chameleon-webpack-plugin":"0.0.28","chameleon-weex-vue-loader":"0.0.28","clean-webpack-plugin":"0.1.19","colors":"1.3.0","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extract-text-webpack-plugin":"3.0.2","fetch-detector":"1.0.1","fetch-ie8":"1.5.0","file-loader":"1.1.11","friendly-errors-webpack-plugin":"^1.7.0","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","http-proxy-middleware":"0.18.0","inquirer":"6.0.0","interface-loader":"0.0.28","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mpvue-webpack-target":"1.0.1","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"^1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-loader":"14.2.3","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"0.0.28","webpack-chunk-hash":"0.6.0","webpack-dev-middleware":"2.0.6","webpack-dev-server":"2.11.2","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"0.0.28","webpack-manifest-plugin":"2.0.3","webpack-merge":"4.1.3","write-file-webpack-plugin":"4.3.2","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@0.0.10","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-BcihW2JLyVOx0d3hX2XM8IV7z7VRY0tcPVXqzrAz9pWC1+qdBukjXEb5GitCplYIsQCI4BXWcTvSXEnzi5iuiw==","shasum":"8e718b6126d6cefff97c28cd61c42bc6436cfef8","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.0.10.tgz","fileCount":89,"unpackedSize":842119,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQU2RCRA9TVsSAnZWagAAPUsP/0pNOCRJt3iy54wlbUDs\n78GPapVAQjrgbtp7XtVrSrZPLZL8egpThNGjvIrz7Z0mFPUrkKlbHzAlyq5h\n3aXFiPnVVjUmeqQyY5T6wy2mBPX5ZFqOvHs1SIFeOv3mM4Bk4HcZNslIqnya\ngyyRMxhbE8B2qi+fXf/oPAPg8jI9Bc9+E+DBf7feM31blENJ7m2KgOsZENgZ\ntPM8rm97xnMwnaFOmgR+6oCrXPELr9n7396Oce276wEIqQGM73Fv9L+DvmR5\n+rSz3w62yf14P1dSbxJnHcUDx4aT3BzZsUVRkk4vUKVJOGLkSHXo/wLKJjSI\nIqcHgBGueWh7pUEU6BDuUMgumofuT9WG3wgmhkOSfb6+a5ixp9Eb1LoxXvKt\n38OjuExTIpKTyNqCiumvGlrO6VxxIN7aQZe9r8nHUYxHsVN3qpfdUxDdptv0\ncRqIo83EGiWwGQ+AMz8hpTerVy+kKn/ZQ3kXxLlNx1VHlFQuNGQpBCXYMDFl\nua+1I8ao7W/MZG1RuXGBpbdJacXDuHu/aTY/sGNn5kqeZjuKAYPoVvxz6tjo\nvGlU1P0hDWZqPNf3Dkoiabu5SXBDa8cWbbG0iRgBO1/hJIr7/vtMTHgJwz+T\nxPfOn6z0J3yaZksqACZPzndJYfVBJpwbTM33PxFGk0WXN61cSQgsaqMYtu/M\nJnH5\r\n=Ycsc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB2OzyE0oa+VXiwHOacAhD7vPfJvWQQcRoxyorcV4TArAiA7FgjLr41gjS6huf4KUoCdxa2lUDOccUCFk3FHWDge6Q=="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.0.10_1547783568463_0.8516591446940305"},"_hasShrinkwrap":true},"0.0.11":{"name":"chameleon-tool","version":"0.0.11","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"0.0.28","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"0.0.28","chameleon-dev-proxy":"0.0.28","chameleon-errors-webpack-plugin":"0.0.28","chameleon-linter":"0.0.28","chameleon-loader":"0.0.28","chameleon-miniapp-target":"0.0.28","chameleon-mixins":"0.0.28","chameleon-template-parse":"0.0.28","chameleon-templates":"0.0.28","chameleon-tool-utils":"0.0.28","chameleon-url-loader":"0.0.28","chameleon-vue-precompiler":"0.0.28","chameleon-webpack-plugin":"0.0.28","chameleon-weex-vue-loader":"0.0.28","clean-webpack-plugin":"0.1.19","colors":"1.3.0","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extract-text-webpack-plugin":"3.0.2","fetch-detector":"1.0.1","fetch-ie8":"1.5.0","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","http-proxy-middleware":"0.18.0","inquirer":"6.0.0","interface-loader":"0.0.28","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"^1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-loader":"14.2.3","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"0.0.28","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"0.0.28","webpack-manifest-plugin":"2.0.3","webpack-merge":"4.1.3","write-file-webpack-plugin":"4.3.2","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@0.0.11","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-zVxnek13vhaIufXFor3QFO4iV4j1xJ3cxQmi2I6ccA1XtB5xfCX0UQbBxIsmot99fNfQySnmsnTep5iMn7owZg==","shasum":"b65368bf30fc24c871a2277d24110734278a4ff0","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.0.11.tgz","fileCount":88,"unpackedSize":809922,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcQeEWCRA9TVsSAnZWagAAvjcP/3+b184yuVEBl3uiwXXT\nH65B5p83zMiTbE0XYRSe7cvkYDxZTrQEA+b1HGEckAYHKH2o/W5AMhvHPIZf\nDxT4oh1H1ijL+yqcUj44Se7KkmbI8NZcrmthsQJ4zSkQJuLGHded+vdGNcPh\nVKrRDVHFtNeNfkgzA8vkxsHtSgu5ykt0SZHcwkwY/Royf8ApGt2MWZInN5Dc\nXqufq6sQlmEsEqSwki6NveB7qm6XK2NEFuZNo4jafFnycbEi+zjUXRLpQIu5\n8K1WF1vvthic+rZ4eUNk9TgxpQAchBfKarhlHo8f3pdKplCvHUB9j9MG8yT5\nQJmE/J6Kuxaja06TueTwwT3daZcboUZroKtlXzyZ74YPPG+1EsVMXTEI9UyP\nZ/h/9DUyHm+bU02WUUHWC6n9/fOOVFTnf8nra5cB5AOS0YkyCXsow8GreNMj\nKJNjz/wUj/vLQ2ltZOboOw86EhsN7LqKl3GLEIfjQYoNxuwTCKKIhmnbSkJ6\n0KPvkcaOj69iEv757H1sR0PxueLlA+9mz/JENS0IyrUg144V28mKMqZvkdsV\npIXUozx3Qy53hMEwn0wJQOsLgg4UhzA6OUmKsEiO+obc3Ao/ZhwY+LHEacOJ\nYqS/zR0049RcgbNF7TzAgOzUEpow9mKOrHWIq3/mZsoDAKGebK7B9rIVfIzb\ndIxk\r\n=OP3J\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIE6gX9vasHaBYi1yvbDt3JCjJqgA16jE4p2sNkHopc31AiEArTEmQKnv0Qcb/cQVwAIjWUl9sgyUvyqQ+GRltqGNUxg="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.0.11_1547821334251_0.7986249742415081"},"_hasShrinkwrap":true},"0.0.12-alpha.0":{"name":"chameleon-tool","version":"0.0.12-alpha.0","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","dependencies":{"assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"0.0.30-alpha.1","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"0.0.30-alpha.1","chameleon-dev-proxy":"0.0.30-alpha.1","chameleon-errors-webpack-plugin":"0.0.30-alpha.1","chameleon-linter":"0.0.30-alpha.1","chameleon-loader":"0.0.30-alpha.1","chameleon-miniapp-target":"0.0.30-alpha.1","chameleon-mixins":"0.0.30-alpha.1","chameleon-template-parse":"0.0.30-alpha.1","chameleon-templates":"0.0.30-alpha.1","chameleon-tool-utils":"0.0.30-alpha.1","chameleon-url-loader":"0.0.30-alpha.1","chameleon-vue-precompiler":"0.0.30-alpha.1","chameleon-webpack-plugin":"0.0.30-alpha.1","chameleon-weex-vue-loader":"0.0.30-alpha.1","clean-webpack-plugin":"0.1.19","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extract-text-webpack-plugin":"3.0.2","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"0.0.30-alpha.1","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"^1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-loader":"14.2.3","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"0.0.30-alpha.1","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"0.0.30-alpha.1","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"ERROR: No README data found!","_id":"chameleon-tool@0.0.12-alpha.0","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-JsBxyDuwRjrqkLLZCpNnyrUJjDST0fj8r0w7j0/f86d8bfFW4kyU1jOI3VZg+aZWBYCzL/wRwOUrIL9sUdJ3sg==","shasum":"c8c2a291ab6bdd8951d3c56cfbbf309a37defee4","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.0.12-alpha.0.tgz","fileCount":89,"unpackedSize":862328,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSvRTCRA9TVsSAnZWagAAAMQP/0yhFnMj/gjuSnTuqhd5\nixy7NSn9DFe16roZQBTbjPdGwC6MEG5XMTYXJf1t9KpFpQ5M+plNhU5mli0M\nLjCG6jmbzkOcKtQErASKRj9BVhvkoQrSeyfMtRWHGdX9S+AyQh7qa8bvVLRJ\nMBm7rDwgVx+h3Z/xX2hM9iSBXUTprMIHdTZeRbZxkzk6zDVdxaEQDVx2qQ88\nwV4AiC8lHnmCz/ihzzV3DZUt3Li5HgCyUTvctQ8PMvoxq53YGerJG6m2P5W+\nRN2Sw190OQ/WZCSthlETipLynR2CwebfOaeAOj/vX32LW7NfhBMSr+nGnC8C\nrGjQZSpvsMlCJjNf0yF1FCcMjF8ltxemT9HN04EAbz7Au5gsl2jOpF2hDdJG\nrFsbb1rtsUQtPfaYS/vIkJKh/vvs5YM2Pt/APf7JP9Pa7lZdtMYacqSFPypD\n7SB5PORLbCkIPVnJAIs2A3W2Q32taBmIVueRIJogaxzl3LhZD9JEzLb5g5tl\nKvlkaSx6tUhovIse9NwnzS5Q92PYYlKycZj+/9O9MFSbf4vueNZVgO63BdOg\nczO0ugSW748eNp4gO49sGpxapm8Te9ZAfgm0JEvxTw+ccKcK5V/nAJOsHTnS\nzcKfTeOWRVIpPOhBx4fYCR3trgaRyGh/2aNaBoNFYVaUR9etX8ZcW68E0t2P\nh8PC\r\n=eRs+\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEasERTNOVmrSKLv99n2sr8OfKmzAmpgD8mHLZWOcx3BAiEAggrJO20FMYn2zF5Wu1SSvFSvKiTJ/yfdsZ0lS+etGu0="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.0.12-alpha.0_1548416082979_0.6662946900465714"},"_hasShrinkwrap":true},"0.0.12":{"name":"chameleon-tool","version":"0.0.12","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","dependencies":{"assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"0.0.30-alpha.1","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"0.0.30-alpha.1","chameleon-dev-proxy":"0.0.30-alpha.1","chameleon-errors-webpack-plugin":"0.0.30-alpha.1","chameleon-linter":"0.0.30-alpha.1","chameleon-loader":"0.0.30-alpha.1","chameleon-miniapp-target":"0.0.30-alpha.1","chameleon-mixins":"0.0.30-alpha.1","chameleon-template-parse":"0.0.30-alpha.1","chameleon-templates":"0.0.30-alpha.1","chameleon-tool-utils":"0.0.30-alpha.1","chameleon-url-loader":"0.0.30-alpha.1","chameleon-vue-precompiler":"0.0.30-alpha.1","chameleon-webpack-plugin":"0.0.30-alpha.1","chameleon-weex-vue-loader":"0.0.30-alpha.1","clean-webpack-plugin":"0.1.19","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extract-text-webpack-plugin":"3.0.2","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"0.0.30-alpha.1","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"^1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-loader":"14.2.3","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"0.0.30-alpha.1","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"0.0.30-alpha.1","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@0.0.12","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-rP7aO79J9AHo67WSFtVjOPVMQ6PCq2y3fIHmHWm2kGfFLEIs3GkZsC8LHOX72F69gKxiy02c4DUxFKCvmhyKVQ==","shasum":"7248105b0f3de6528878cda44dfd4df74731f0b3","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.0.12.tgz","fileCount":89,"unpackedSize":862312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcSwn0CRA9TVsSAnZWagAAKRcP/Rfgrhh9bWU1RI6JMbic\nZMlp0rgLs6ub2Tq24VksO+qvSOTANYI4OmGdVNIimlQWM4EXH+6wkacIwS8d\nZLQs1F3bXtUqOcgRFLx/Kd12+iv85qAg0rZ3/3yApRCB8MJiEoZxLpe7qD3b\n7vSiS5nv60I6eXbcGHHdUxsd+/nj2kyJ/fw0NXd1Or8E75Oc5Vm3m0LDGsx0\nxnpRV7nb6vOiONtY2r+BRdIxM4Nt9rfDjfdS3mqdnlRYGKkL3g8bO2eOG1P7\neVBB//UhQ6akkCysG7gTronTXwtAzDBGP88U5uUqd1yLG5M3XyQ1tVSmpjz2\n8/9iOR5lqsQlaa+1fs4DsqXf+LdOiMAkBRkcXK8llh+J7bx0/UelFtj7Nrkf\nrCZKifJzL+LyAk03/yJDjY26rGU2sC6M5pfhAUusQzMwiBzWBPz7P2mJxweV\nDcj90C5YT9t6i1rDyJRBAmm/EV02xhkmM7otvI6eC+NF9gWS0QzXJM1XeJqW\nvwKKvcE/UQxxwgDq1ixrUaM1jhaMcf6W85FDkJtREJlPNiQeDfvUOsMs2e4D\nncZEQ21E311Lfsod33PCzWFWU4JFysrqLH8X4lZYV0LZsu/0I1qfwy0fQEt2\nrmkeGOa++JyZPLRJytEaLvcU6Wba8XkVqMhC3Svzq7O0u86J22AVccv9eBhZ\nrGsv\r\n=x2YQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQClACmMUffEqM3q93nbAfr4B1FDKh/Pn+iQ/mVUbLgcOgIhAKozkSd66bgE8lPURJYWksNKDS9ARglW1yNfKd27Pd+0"}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.0.12_1548421619683_0.06988646524423259"},"_hasShrinkwrap":true},"0.0.30-alpha.2":{"name":"chameleon-tool","version":"0.0.30-alpha.2","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","dependencies":{"assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"0.0.30-alpha.1","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"0.0.30-alpha.1","chameleon-dev-proxy":"0.0.30-alpha.1","chameleon-errors-webpack-plugin":"0.0.30-alpha.1","chameleon-linter":"0.0.30-alpha.1","chameleon-loader":"0.0.30-alpha.1","chameleon-miniapp-target":"0.0.30-alpha.1","chameleon-mixins":"0.0.30-alpha.1","chameleon-template-parse":"0.0.30-alpha.1","chameleon-templates":"0.0.30-alpha.2","chameleon-tool-utils":"0.0.30-alpha.1","chameleon-url-loader":"0.0.30-alpha.1","chameleon-vue-precompiler":"0.0.30-alpha.1","chameleon-webpack-plugin":"0.0.30-alpha.1","chameleon-weex-vue-loader":"0.0.30-alpha.1","clean-webpack-plugin":"0.1.19","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extract-text-webpack-plugin":"3.0.2","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"0.0.30-alpha.1","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"^1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-loader":"14.2.3","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"0.0.30-alpha.1","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"0.0.30-alpha.1","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"ERROR: No README data found!","_id":"chameleon-tool@0.0.30-alpha.2","_npmVersion":"5.6.0","_nodeVersion":"8.11.4","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-fQ3lpLgFk6ZkNWnSA/BjX1HbL7898XYlQZT9xMbVsXmgF28FlhlbS32oTBqgAbgJ245CIyIkv9RuxZGxJHOJDw==","shasum":"4ab312917ac9b374f97aa735533832273187c982","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.0.30-alpha.2.tgz","fileCount":89,"unpackedSize":862320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcTr+cCRA9TVsSAnZWagAAWisP/i/xhjDb+Fg8Xkk+uG4g\nKL7VStLzm6IYoSy0LIL1obdhVua00BokylwqMTu5boh7ifc7cHLKZYg0mOe2\n8DGnX5sfXiG7XNEaJ8lA40HmeMi+HMYQRXvq7tcHtxzeGJQM7GscPrHYXQay\nL62v3IgRfska4tj+iKMfgIdNdHRyU/fuhHLEDnGv8nscUJ8CqAm0x0EjKNHh\n6Baip6BtL+LW20Olv22j/ZTCOiW88EEJEaDXUjerK1bk4p6ijujAXkUKSaCC\nhFAE2HPFqPh7ABWntUInYH4sGlAfzuxusxKVWhicd6NKs9Jn0t/eBhRG6JfP\nK+sfEnPZ9m85+4nQJhi5tZQw0K8ICeoQZE5v7liCcG1OGo+0PAqGBu+n1c6g\n8H9j3Y9jmzAw3mZeNK0qiYBoRWtuoO5d/cnXYhxGnxKCRIlIjJYNWa0gst3A\nRfIvGMEPYJYWjGJtu77YgRbud1il1YYohZxbD+1rCC5//2MP4XGLpIfz2PPl\nGG5+MT/t8y9n1KJeZ7wMPp4XzLWvP1zyUClloLvJwUC8ENiqryqG8WMRMjyE\nid4p8Rs82ptkoI9JEdg+VywcFinSVY2FaUMyjrdT88cNRicjnSGhRGd04LP1\n3r0OA0N8r6JewXqX6dk2hoYKyHUVt24RsNFCqXvIYNDuJau2x27+f6g3jWmc\nmKnb\r\n=fDVU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCOQBDcLQr3QTxwgAiBkLA7T26Q1ISFGUKG8T5jqLJeJQIgCC54OvMqLjRvMXlEp22EsMUNAPF4LUb0T3NE7H4zJ48="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.0.30-alpha.2_1548664731493_0.6767029071471429"},"_hasShrinkwrap":true},"0.0.13":{"name":"chameleon-tool","version":"0.0.13","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","dependencies":{"assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"0.0.30-alpha.1","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"0.0.30-alpha.1","chameleon-dev-proxy":"0.0.30-alpha.1","chameleon-errors-webpack-plugin":"0.0.30-alpha.1","chameleon-linter":"0.0.30-alpha.1","chameleon-loader":"0.0.30-alpha.1","chameleon-miniapp-target":"0.0.30-alpha.1","chameleon-mixins":"0.0.30-alpha.1","chameleon-template-parse":"0.0.30-alpha.1","chameleon-templates":"0.0.30-alpha.2","chameleon-tool-utils":"0.0.30-alpha.1","chameleon-url-loader":"0.0.30-alpha.1","chameleon-vue-precompiler":"0.0.30-alpha.1","chameleon-webpack-plugin":"0.0.30-alpha.1","chameleon-weex-vue-loader":"0.0.30-alpha.1","clean-webpack-plugin":"0.1.19","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extract-text-webpack-plugin":"3.0.2","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"0.0.30-alpha.1","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"^1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-loader":"14.2.3","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"0.0.30-alpha.1","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"0.0.30-alpha.1","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@0.0.13","_npmVersion":"5.6.0","_nodeVersion":"8.11.4","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-DxNcj2mXMjVsTvEzPF3tQ4R9YKM+kTZg6aTCSAx4RUkJ4LSRDPm05jSYjAmqz5ckeB+ObFlpCYOCETJJrtW1aQ==","shasum":"c1b25d15697c6f4e74f13bf027f93b6b7dc661b5","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.0.13.tgz","fileCount":89,"unpackedSize":862312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcTsDqCRA9TVsSAnZWagAA4/4P/RPG8D0aZahfEx6v4cGP\n1p+WkpOT2y01bOmIVqw+x4bZkp9CKGs6AIjKuKXUbRAKoYHHgMa+3DxdlQta\n8Ov8aEtsxFF+nCeuy+NJsVKE9xRV09OkN2yOk1LRnqlva7bjPr/RF5TDntSe\nTq/s94otmIQJBRUn550iqU+KwOJp7sx/P6u/zEKIoBL4oiP1vhl+mAjYg0co\nAqEy4Jze4kOeCBd6OMatqLWp+ZqZBil+bkuPi7sBysxO1VLHXZn6KMcvLmYt\neLwwF6gtKwSvAJmZEpgmAWxRBxpA/08KAIdAwjxIw+x0v+2om+WpdzLtb1Q+\noc7zgmbaDBhL5d28SCuIqOng1vBOZ/PkC+pPmGcVCHmB8KJwIYKrXZMLwHcd\nn7uotvDwHwuylUnFwg53eQ2D/1fZfxhw2cYQMTzmK6Q/mYeDf2s1gAkW4tpr\npWx/J1PwrcJainzQy3R3cyjmF5KFKxDR/nEbstiZiPR3JqtOidbLkTIzJA63\nBWxgSvBdryeRyM8W6GVMW0CyQl/MUoqa2YayEGJbFCyiGnKnyB04xKwc0G6n\ncOjBmOU+jn6kB04Pr0NCKdYVAYrvvbIxUBlJUjMKTMt//05c618YSCmskUoh\nwqTD4+mLVEyTJFw55LuU+tH9SUOKn8/Np5O1EeCTCZL3wXGievYY413mBzaM\n3+hb\r\n=mgJc\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC2ovgE094KpLDY1Vl27kLFsRBKrpOgkoJtzqoDl5jzlwIgB/fkMnmsP0zlTz9LClT75WeCVJ0EJ9nfFHC53w4trVw="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.0.13_1548665065916_0.4441395649068238"},"_hasShrinkwrap":true},"0.1.0-alpha.1":{"name":"chameleon-tool","version":"0.1.0-alpha.1","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","dependencies":{"assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"0.1.0-alpha.1","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"0.1.0-alpha.1","chameleon-dev-proxy":"0.1.0-alpha.1","chameleon-errors-webpack-plugin":"0.1.0-alpha.1","chameleon-linter":"0.1.0-alpha.1","chameleon-loader":"0.1.0-alpha.1","chameleon-miniapp-target":"0.1.0-alpha.1","chameleon-mixins":"0.1.0-alpha.1","chameleon-template-parse":"0.1.0-alpha.1","chameleon-templates":"0.1.0-alpha.1","chameleon-tool-utils":"0.1.0-alpha.1","chameleon-url-loader":"0.1.0-alpha.1","chameleon-vue-precompiler":"0.1.0-alpha.1","chameleon-webpack-plugin":"0.1.0-alpha.1","chameleon-weex-vue-loader":"0.1.0-alpha.1","clean-webpack-plugin":"0.1.19","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extract-text-webpack-plugin":"3.0.2","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"0.1.0-alpha.1","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"^1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-loader":"14.2.3","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"0.1.0-alpha.1","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"0.1.0-alpha.1","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"ERROR: No README data found!","_id":"chameleon-tool@0.1.0-alpha.1","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-6MC+vDLmhGtMmmDRV9Ch+NRQZrJqWUOGqWgZ6bOxhG8FVTYjZwDdrVxf2jol2BQq+wDS9/k+T1vi+NeSZ9WANA==","shasum":"4ad5f4d917080f67d5c018758be8480f2ac75e33","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.1.0-alpha.1.tgz","fileCount":89,"unpackedSize":861808,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcUGMyCRA9TVsSAnZWagAAih8P/1pJRBIDWq6o3Hsg1W+N\nClA5zvpk70A92fNt3x83eDwHCHH+aoIEQ8v/iOS+EAKBc+AsYkL87da32jk+\nuwGQB+fwdX3w+2bzhwfdlGIKhZKR9BFzHxxOV6gVlQBTIwjBwpJKL44rB9oR\nuDqG0BNi7bpL1TGLv2Kv7Q1i75+2f3uE99ZrypXR421HGYhU7Pu9yWGehJ7/\nOImUwEPljySgw3LC/X3qWhcRbL2uYvvkgzUVUZQ3g83f5dEY4KkaF36U5mvo\nKbqfg28Mle20ir8rNgE4c7Oyv+xM30ck6fE4HMHL/cB+JxaRlYG2Uq/pSoff\nYzOuF5/0X/7u0IdyBx5kumo0xRCYUMxbuIM6UQcEI+/ZpLNPz3Nv56E1DyvQ\n6lrif1W9qTc/MJONSvnjscMDMALwsGivYt/rnFj3o7J2MJIPfhXfdyVKEZ7W\nUYRSMWsnAKacU0YpEPuOjtnpyxBGDVWoE6Cn28cW59pe6/t7Nd9FAM1AGpyE\ntdA9bW1OZQflskW2Rj0+aFPwih7Ocxde/n7z9QbGjOQV/Abbd8rsLlMto/n9\nCfvO+u4fkJ0Rf6aap/DkKZZfP663iQ6Pdu9rT+lj3xqT+AgZx+RXNMu6wiK6\nlS3RSTq9otVeOa51NH9UIJZ2J8OOy0IOoVdiyfYYDuU63uQYWLuEFIwgFKIk\nYvtf\r\n=5beg\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEdbiWFNXDCpmWbg+tBSrgU+1rESsSs1FczGuJxIRTfBAiBvfCKsn1cA+GsaQ+7eGoyyrdZr0Jmzad+3NaV5tRdySw=="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.1.0-alpha.1_1548772146268_0.8071412739483779"},"_hasShrinkwrap":true},"0.1.0-alpha.2":{"name":"chameleon-tool","version":"0.1.0-alpha.2","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","dependencies":{"assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"0.1.0-alpha.2","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"0.1.0-alpha.2","chameleon-dev-proxy":"0.1.0-alpha.2","chameleon-errors-webpack-plugin":"0.1.0-alpha.2","chameleon-linter":"0.1.0-alpha.2","chameleon-loader":"0.1.0-alpha.2","chameleon-miniapp-target":"0.1.0-alpha.2","chameleon-mixins":"0.1.0-alpha.2","chameleon-template-parse":"0.1.0-alpha.2","chameleon-templates":"0.1.0-alpha.2.0","chameleon-tool-utils":"0.1.0-alpha.2","chameleon-url-loader":"0.1.0-alpha.2","chameleon-vue-precompiler":"0.1.0-alpha.2","chameleon-webpack-plugin":"0.1.0-alpha.2","chameleon-weex-vue-loader":"0.1.0-alpha.2","clean-webpack-plugin":"0.1.19","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extract-text-webpack-plugin":"3.0.2","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"0.1.0-alpha.2","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"^1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-loader":"14.2.3","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"0.1.0-alpha.2","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"0.1.0-alpha.2","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"ERROR: No README data found!","_id":"chameleon-tool@0.1.0-alpha.2","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-+ehhZJNVaHcrvRa6oKhGutmnAMnq5ZcMGQR6xPwwISdgg00QgvfRytSxfzl0wCaJESYtTpMk9+i8bx9IyVYiAQ==","shasum":"b0485ecee6774ed5a4516865facde5bd945d79f4","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.1.0-alpha.2.tgz","fileCount":89,"unpackedSize":861716,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcVp8yCRA9TVsSAnZWagAA72UP/1Du4h+cYkVl03gsecO7\noU0VFuVin+BRNjYdre1CS3edHWKum77o8Vy2vXDBH4rux3CN0LSlQcunEe0P\nSQ+FtoW16qXvOU+bb3B+/GFOzZVHooSkgvCELXMbhL0r/X6eQ3RsRDfNfsQQ\n4RTzUW9d6lj+lsR5XJ0VuVPpQjV5zDFl14cIVHtjPwnWf2/zXQk05J9R6XtT\ntbi8Wj6BI/Nd2ymyjqJIcQFEtmomvJZw3xnaAXgJWXi/fDjiaZx+bqJwoT8D\nBWcz34wh5gbvWLGzj2568Li8VHq9Rv5YfxtlaiUWLaedYKsoxNK1E57YTxZ+\nizOu5QCiI/0lfNDEp996k466z0o8dVliw8eg+wQYlsRrNHAtarmqnbtZjQsP\nqsxGP+mT52wn7NWIZ3jDcR07q1EmtJLSZhyn2d6uX03qw5fUaYkPmFa8kJPi\nNll6ek6b4x78wZHhzJvn8S6H8rmiSBEhMPoYwcXF8MSqYCM2EZ+88ZTBit+H\nVABc7NhHKb3/x3OnQ+s0HBbzeY+/39FB3UPNRYw6KH5hMMiODHR26+0xpZIJ\ntLCEC/82rHHXCFwoHlhWczV5tyFuyrGoBxvmL5/C4vCOA0xoS1b4TBQoYO9P\nxOU8S9WbUxEa4HedkKnoPSV+hj4UjY+M1W4uzIo0YsrQbuW3p5a6SomRBtzo\nmwqN\r\n=Jwhr\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDLMAj57nacG/1fjNUFfoHr75PLcTabzr8IDpgasGhDKwIgLUxTlIDJJDqCec0hVJkMOqW95HSSwewJMzKLvefrb5o="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.1.0-alpha.2_1549180721717_0.08896353237183519"},"_hasShrinkwrap":true},"0.1.0-alpha.3":{"name":"chameleon-tool","version":"0.1.0-alpha.3","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","dependencies":{"assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"0.1.0-alpha.2","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"0.1.0-alpha.2","chameleon-dev-proxy":"0.1.0-alpha.2","chameleon-errors-webpack-plugin":"0.1.0-alpha.2","chameleon-linter":"0.1.0-alpha.2","chameleon-loader":"0.1.0-alpha.2","chameleon-miniapp-target":"0.1.0-alpha.2","chameleon-mixins":"0.1.0-alpha.2","chameleon-template-parse":"0.1.0-alpha.2","chameleon-templates":"0.1.0-alpha.2.0","chameleon-tool-utils":"0.1.0-alpha.2","chameleon-url-loader":"0.1.0-alpha.2","chameleon-vue-precompiler":"0.1.0-alpha.2","chameleon-webpack-plugin":"0.1.0-alpha.2","chameleon-weex-vue-loader":"0.1.0-alpha.2","clean-webpack-plugin":"0.1.19","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extract-text-webpack-plugin":"3.0.2","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"0.1.0-alpha.2","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"^1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-loader":"14.2.3","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"0.1.0-alpha.2","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"0.1.0-alpha.2","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"ERROR: No README data found!","_id":"chameleon-tool@0.1.0-alpha.3","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-HzShO4ZruxIXwjDAnC30kaK0w4Jt9phImLM+d7YwxwJ7YATWfjHedoCzxOcpC68f2167vg4hK6hLFFhK2+dKag==","shasum":"e196e1951049d63d5e556fcd772aff4bae3f35ec","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.1.0-alpha.3.tgz","fileCount":89,"unpackedSize":861453,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcYUOiCRA9TVsSAnZWagAANrYQAInniv8pMNXUKhKhHs2u\nVXzTlJuplozIE/mTVCtGYlHZToN0NHk/iR+JZIVmRaWMf62IvgWK7qmeotKH\nvT8feLVW0ULfFDtxMvTdVEJNQcaj4dKb0qx3kUqORBEiB+a/nI2i0aYuxh3v\nee2IXAbYzjxuiuyV28NL5y6zD+Qf1D4u4QBXQZFEZhlYo166CQ0w4NYF7ZNp\n/QsieQggL2LbS5zmNSuXDilRJIUMPqb9e274SlCEuOAwJmIELdeXeBIWW4nP\nPJ0M25OO0gFUAJkYp1z3d3TFzv652DJ7tZqW9TUyWpY3NzbqyU1r9MftV6X+\n9cntvh8wxwewGPLU7Fpw2oSUnlwLPEd/6s7kwdBQDtm8diQ1HRBvOxc/Klsn\n+95Ig91GDhQ9rN7pLIGVAtRiA/YML/pm/FBP+Jx8UI9hbM9UYGvteBU8S8H9\nfcQ0GADnWGdOws4/w6UIzXsbLw0NUngCzNFYwp/llUBQLGpTrkNNG3zHbkbV\n7562eXr/BWDVd4rUaxKsJYgiMKuiPZGxs2XZyXj2hm6ls8VLLKR8+o3sqB2Z\n/Rrhl0Xl1TaXau5dlWcfCM5VqED5m7eODLktCcH9rk8N4y6Qa5yYThnH5OSu\nbXE76zP6GTxC7iA4oqDpgmwegugFPozHJCc6+EuNxv50PknRUewUgpuK1PO2\nl3ev\r\n=vm1C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1XD0iVaLSjsgABkUlF1hsU2xRoahpHgosrJJ/jwa2rgIhALu2PnuJXbFJk3lWRCzChAzQhkh2YiA8WacS4jNV0KUH"}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.1.0-alpha.3_1549878177777_0.5921027802446932"},"_hasShrinkwrap":true},"0.0.14":{"name":"chameleon-tool","version":"0.0.14","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","dependencies":{"assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"0.0.30-alpha.1","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"0.0.30-alpha.1","chameleon-dev-proxy":"0.0.30-alpha.1","chameleon-errors-webpack-plugin":"0.0.30-alpha.1","chameleon-linter":"0.0.30-alpha.1","chameleon-loader":"0.0.30-alpha.1","chameleon-miniapp-target":"0.0.30-alpha.1","chameleon-mixins":"0.0.30-alpha.1","chameleon-template-parse":"0.0.30-alpha.1","chameleon-templates":"0.0.30-alpha.2","chameleon-tool-utils":"0.0.30-alpha.1","chameleon-url-loader":"0.0.30-alpha.1","chameleon-vue-precompiler":"0.0.30-alpha.1","chameleon-webpack-plugin":"0.0.30-alpha.1","chameleon-weex-vue-loader":"0.0.30-alpha.1","clean-webpack-plugin":"0.1.19","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extract-text-webpack-plugin":"3.0.2","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"0.0.30-alpha.1","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"^1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-loader":"14.2.3","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"0.0.30-alpha.1","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"0.0.30-alpha.1","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@0.0.14","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-5O5CNcaI1DEuI1RkeSh7KwJN73FlRha45fIQaUcIXJVm+qUFSOKqy8rru5gwvqebA0PsUYu/7BIYgKUwqZh2TQ==","shasum":"31fe738c74f574e3f23867eccccf55a0ede5f8e9","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.0.14.tgz","fileCount":90,"unpackedSize":873230,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcYrnHCRA9TVsSAnZWagAASOsP/2XwzPlB4oMNfvtJzqLw\nRerBYIqOiWrPi10qCLWJwA/JFoTk37jWHqWSlYVIZ83WU+OIrsUQqY6ljWe1\nb5Ia0dlqKT/RlNCSkiu7KATUjJDJw8fpmbTDbKlEFImKs5nWWwlaa3OjsV3D\nArhXeO8vjYae8M47qct8kxR+ivMnFVe5/TuYxCfgtltGCcU8r3H5rpQlV/8B\nN2fDoI2yHnkz1ETrVv9vPLawgH9Fp1NFvZ02BsqPblHzdeSTKQPrqY2G/uGU\nE3/jX8RlKe4R9psybB/jQIL9es/qPlHaQgnkX1pK2vzDRNczgKdaqChw4BQI\nvq5IHycLKeevwIb58LTQ3b/xyVu5Nemr8MHL1sTLW3pB0Pyz534InDv+vpYI\nQyam9FTGot8Ts/BuVAM3n4PfIpxN7wQMEHAhgSTeEutdJBlM5nkCNzT3jWAO\npmQH89MGT58rhSi1ldEk+bRlTicnme3dPkLE626InVMRAmYcgcwKy1OMHS2B\nvWgmLZcDn4a6GC5dCbq+UOnlimQFLLfTgIiC1ly19OpOtHlDXYEO4dIN7Goj\ns/HEOCK5PnwJnPXVGyLyJgrhhBlTda/vU0yadj4y4uukIxpwSUTZoUvW1jVy\nZ9EOwGUsRsofDQiyYh2BKmYBc9z8oATe/ZWMH+LeJO5pqclNmcKupbsRyn5C\nmZRX\r\n=orJJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEJKs+WP5QgtbmBEib4cRwzPpKN6DeYvZqGywBd6ucKkAiBPV3rormZEocayOovl9MpOdPHyCwvF6ZOn0WbO2uv7pw=="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.0.14_1549973958460_0.027028330306184456"},"_hasShrinkwrap":true},"0.0.15-alpha.0":{"name":"chameleon-tool","version":"0.0.15-alpha.0","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"0.0.15-alpha.0","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"0.0.15-alpha.0","chameleon-dev-proxy":"0.0.15-alpha.0","chameleon-errors-webpack-plugin":"0.0.15-alpha.0","chameleon-linter":"0.0.15-alpha.0","chameleon-loader":"0.0.15-alpha.0","chameleon-miniapp-target":"0.0.15-alpha.0","chameleon-mixins":"0.0.15-alpha.0","chameleon-template-parse":"0.0.15-alpha.0","chameleon-templates":"0.0.15-alpha.0","chameleon-tool-utils":"0.0.15-alpha.0","chameleon-url-loader":"0.0.15-alpha.0","chameleon-vue-precompiler":"0.0.15-alpha.0","chameleon-webpack-plugin":"0.0.15-alpha.0","chameleon-weex-vue-loader":"0.0.15-alpha.0","clean-webpack-plugin":"0.1.19","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extract-text-webpack-plugin":"3.0.2","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"0.0.15-alpha.0","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"^1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-loader":"14.2.3","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"0.0.15-alpha.0","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"0.0.15-alpha.0","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.0.15-alpha.0","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-b+tMkXasLdE7G7akPd1Ne+8Y8nHs6+hezMfEIwcZx0uLX+U0DKEvedcrpf7/5r+RDSyJ1wajhAbSsklcFYTH4Q==","shasum":"d2f12cf8aa549e94ed22850319ea038aebefe5b0","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.0.15-alpha.0.tgz","fileCount":90,"unpackedSize":872481,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcZA57CRA9TVsSAnZWagAAsywP/2/uJkckHC+a4ozawQgy\nXt6jotCVRFh+2N0s5xtQ9lB94GS95228iv5nPgCKF2YAOxjeouEdynd9vRh9\n4mTncZpKnxZdXHWSlukHRr/5Vk0jSAWTcGLs1mN/5dFMICYn2P/oLX37/RHK\nRYXU04WKUtpm+q49nu48t4ati2++qLWzrgqfZg6v8Y6LSQvOstzWI92WS+bl\nPV5b62AUWe5/LYT60HhCd/3uVo5BZVrvSX8n239kM3APwxHYrQp4fWPD2hU0\ncaOkQG6wS/JAMUxQJ4fESWJXTwHogoaYsgzMU87ba7xE9KvoqiRP2pHTvUN+\nr6/iVTwd8AIsBCgPSbN82K3nrA72LND3s+VfCRlR8xDAM46jfJFWO65srcfd\ngG+V+/CqVk32Wrt9Hq7jod5hpx1MvR482OmffAfhQuo6zuz4ElHOcuS+kzgF\nVkos6enaLJEKKtNMsRT/DGZRs8Lx7Rj8ZPiTu55JfszczkCz8W/Erkug5tIe\ni98B/EoMjp7J78Jp+TvKba5hcHdsKFhha1XOJ/jqm6FQVkd1IIbyfc+7Z7Pa\nkJ8kXvwULTqlKsejVUTmtnz3wlwXYZs5WnqGEqaUX62g2c5aDUWtNx4rvg1W\ncxJh6KxaDIWS8nYJEp0pl0gJNStqajiP2pzqU8P6s6Fncs/+H5lzw4wLEFPn\n1fJv\r\n=3TIC\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBsVW449kl0mkjC7XNrV4q7wG5p7gOJ3cQyXgNp0AYyIAiBNLPgbTWug6rdBxMn0Y07YG269XJy1kAahlZYfW2OSbw=="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.0.15-alpha.0_1550061178972_0.11541407717857544"},"_hasShrinkwrap":true},"0.0.15":{"name":"chameleon-tool","version":"0.0.15","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"0.0.15-alpha.0","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"0.0.15-alpha.0","chameleon-dev-proxy":"0.0.15-alpha.0","chameleon-errors-webpack-plugin":"0.0.15-alpha.0","chameleon-linter":"0.0.15-alpha.0","chameleon-loader":"0.0.15-alpha.0","chameleon-miniapp-target":"0.0.15-alpha.0","chameleon-mixins":"0.0.15-alpha.0","chameleon-template-parse":"0.0.15-alpha.0","chameleon-templates":"0.0.15-alpha.0","chameleon-tool-utils":"0.0.15-alpha.0","chameleon-url-loader":"0.0.15-alpha.0","chameleon-vue-precompiler":"0.0.15-alpha.0","chameleon-webpack-plugin":"0.0.15-alpha.0","chameleon-weex-vue-loader":"0.0.15-alpha.0","clean-webpack-plugin":"0.1.19","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extract-text-webpack-plugin":"3.0.2","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"0.0.15-alpha.0","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"^1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-loader":"14.2.3","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"0.0.15-alpha.0","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"0.0.15-alpha.0","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@0.0.15","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-IwDuIFA4lcau8VbNg17HJ7rrZzQwKO4PA4DqIRG1SxXGyTuZtpuOu/9SwbeZPaQXhZR+mu++r9jKC4mdc1ECyg==","shasum":"f57b85cdb9a0c25e7bc239cc5729dc7c6bcf8524","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.0.15.tgz","fileCount":90,"unpackedSize":872465,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcZBKwCRA9TVsSAnZWagAAm1QP/i/QvAMAfr+0xbWUumzu\nJyGtcgDcY6Gha8exQ/n9e3BIGHU/IZCcBrA94kH7fGpiDTr7lvSXPNCsIX4P\nFFUnZqSqIb5L1eAUVgnH0S1rYgyrMEtIZv/qt414Tg95DbGj5zBT8Vk+rJ7b\nXcLtRq9ReZSdmV4slev31vPdQLQu3t3IEw4ERGLR5gehBadUK5bIvCbhkRjq\n83WI92qR8JTNwicLoKKsABvyRJfjVgK1ZM5CbvQPPXpGP1PiYHMqJUdjcCi1\nB9NoKvgpzHn/TwgH8tyA72HhvoHIW6Ae2d9PZF4IMiOhZUZ7zb2ndj2aJwPI\nkdeyDhY1c5Hp1uWCDxLGAC4U5VNx/XqPGy3bSACfbYZ/z1pFNQdVYxK9rinB\nNu3fDKTMuGeox3y/sLXkvLw8USZANa5nHM1kcMyuCpzZE4JLywWSfENGx5Mw\nwMAJD8t1e2N8LyifkqSQiIKiUKDWfqS3lZNTbpgC4aBudeChZxeAznJXk4jJ\nTCz3dI2DxGJccLdwaMZ6F5Mdj9RCzsfSPCtrHsGsYxYJdfJ54AF5F+lA35xk\nyyVu16lZTf9O7L1sBJAEPNZXH4MAVRDc5SWxmzUM0Lp1h2SM4WIE5xEWR0Pq\n/Nb//6/ncLkr1Cg+doKl95sHIwNMipv8ZcfjbUY2VTF5czl2IKrPLKmuY+C/\nDwYQ\r\n=cPQz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDraza5cVUEwvDPPjpJ3ZgCSTAS79C1G1plIEcEpIDutAIhAMgaAUwysrufze7c02Dc6Wmey4XEwlYAnM/shgo95ckc"}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.0.15_1550062255860_0.6620379826716749"},"_hasShrinkwrap":true},"0.0.16-alpha.0":{"name":"chameleon-tool","version":"0.0.16-alpha.0","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"0.0.16-alpha.0","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"0.0.16-alpha.0","chameleon-dev-proxy":"0.0.16-alpha.0","chameleon-errors-webpack-plugin":"0.0.16-alpha.0","chameleon-linter":"0.0.16-alpha.0","chameleon-loader":"0.0.16-alpha.0","chameleon-miniapp-target":"0.0.16-alpha.0","chameleon-mixins":"0.0.16-alpha.0","chameleon-template-parse":"0.0.16-alpha.0","chameleon-templates":"0.0.16-alpha.0.1","chameleon-tool-utils":"0.0.16-alpha.0","chameleon-url-loader":"0.0.16-alpha.0","chameleon-vue-precompiler":"0.0.16-alpha.0","chameleon-webpack-plugin":"0.0.16-alpha.0","chameleon-weex-vue-loader":"0.0.16-alpha.0","clean-webpack-plugin":"0.1.19","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extract-text-webpack-plugin":"3.0.2","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"0.0.16-alpha.0","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"^1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-loader":"14.2.3","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"0.0.16-alpha.0","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"0.0.16-alpha.0","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.0.16-alpha.0","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-wsJkhIvvivKXb0ZAR2luYsSJAtFIIKBA55Nx53PZIzMhv40h4Qx6YaSf3MZYGPuPpv50moVZ/b3I+XOIz/QV8g==","shasum":"18e40bd65293b078bf308f5e43570e825671fefa","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.0.16-alpha.0.tgz","fileCount":90,"unpackedSize":872690,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbUK3CRA9TVsSAnZWagAAtrUP/2XcgAgedU/9mo8XYMdU\nP34J8AryhTKlduvY08NWQQv0PaWzvxumhEifXfWnOjdDCqR+WTvhAE01uRLy\n8kqxXy9b0u2vaLsNKXyThkzClFJGaRgGQxuV5O5mmx/002tFWJGTGz3Kb0dX\n5aKKKjGijt+Zumb0/ANBihtBLZNW77ICMZV/vu8EIro7Y60BqLMxA1yYOTB8\nJO02sSjtO8fVLlCIX2NRITZUdHoBHdwbeXWdtc+fl2Jp5MWm2DhG8Y5SLzFN\n8V6WCDNFQSc0esmm/IawrEidkd5otmew4dPj4YZzRUsALWB2TiZ//0nj1Z4S\nt28wL/yKUI1Vx/P6yZhV69+UpT+z7Zq9/RZKW3PmktcVK49SFN8Mp2Jh86d6\n3d+3XBh8LSNWVT/3/aPx8U+73xjZgbkCLEtyU2WKLacSEZiTAz2QWuz9VdX5\nMTumaM53qbhXvUg27vPs/PE0YTm3SeGqdV/cxx6SBHhkHqzZC/A4R8fQArIP\nn94IxbH3vPQySd2hqwtsVjz6N+w0XzQajV+qdcuzbOtRO1/wyZS3x04aE4kj\naxcYxqr/lquRa2oZOP3l9DFxiuFI4iKSeKhD6phZ4Lu0MSsp1KvqOOHdWHuO\nnyHQrscB7eYrhdHoXWCAPtVPUIdaY84CBclbmpP1fawK0dIi2filL46RrAlr\nCouN\r\n=Ds7C\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH5cSq8URcMueaZhuwp7px87XXGcIMZZKthHyANukRBRAiEA6jX5X17Z/wceLcSUpRcrDeYmBmzLl1TX+aqOCMGExUM="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.0.16-alpha.0_1550664374601_0.3361960197794527"},"_hasShrinkwrap":true},"0.0.16":{"name":"chameleon-tool","version":"0.0.16","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"0.0.16-alpha.0","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"0.0.16-alpha.0","chameleon-dev-proxy":"0.0.16-alpha.0","chameleon-errors-webpack-plugin":"0.0.16-alpha.0","chameleon-linter":"0.0.16-alpha.0","chameleon-loader":"0.0.16-alpha.0","chameleon-miniapp-target":"0.0.16-alpha.0","chameleon-mixins":"0.0.16-alpha.0","chameleon-template-parse":"0.0.16-alpha.0","chameleon-templates":"0.0.16-alpha.0.1","chameleon-tool-utils":"0.0.16-alpha.0","chameleon-url-loader":"0.0.16-alpha.0","chameleon-vue-precompiler":"0.0.16-alpha.0","chameleon-webpack-plugin":"0.0.16-alpha.0","chameleon-weex-vue-loader":"0.0.16-alpha.0","clean-webpack-plugin":"0.1.19","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extract-text-webpack-plugin":"3.0.2","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"0.0.16-alpha.0","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"^1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-loader":"14.2.3","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"0.0.16-alpha.0","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"0.0.16-alpha.0","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@0.0.16","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-GYrhBP6pp6jdL3ir7ooNTgovACEkX6LTssX54OCemqC+v6hxrES3emebnbSn+yErjOWG3dXsnjmR/89rfeAxOg==","shasum":"aeb6e6cf4c835983813cda763ff885012c6d8053","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.0.16.tgz","fileCount":90,"unpackedSize":872674,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbku4CRA9TVsSAnZWagAAa/UP/0y6gwFA4EOso3S/uyc+\ntc5QvvcTfTBQRNfoJ4y+r6pqPPYf2p5G1ERJ54LTchROeFmuYUciHtgym1el\nvquT/GpJEeMfv0bqrnwxVw/zpWRx5ZXu56w9UJLOl/vpjL//4koUxyiZqDrj\nF8LEtJ77yjA0aC5c1EJTDYi21IPODCht5oRg7nND8f7+JxN7Rn7YiZ+e5G2Y\njOUELoF6mOXGGM6jTnkMwM1qQrmwyCZmKp/PmqJ/+Pc9WopxEQQaInEaLjXk\nH1i6sChJsGHrrAf1wzmdPFyMXQgjTHx/6wUpUcpzqM7dyMg6fY87qNmECqNa\nJ6R4Mf98++JlK7omrR2ltqFkwdBNQ9hL8b4vMKJ3piCm1fRvZxqPAW2BHM8A\nIz9v+q154NztafZK2hvNWbmq/6PK/MXNKEEx5rrMk8oidDoYURVvMcZbzVT4\nB9+4fN13jZyeeKPer2Wzl5qqsskheDRm5yLVwNOO0oEnrFJZyWMO6UTGtIm3\n7ezmWvcKhCMGW4LhdLf+Co85j8CgZUEpDAvGlO9hPUCq60GxRaswAm5FucVh\naBDF4XX8T0p7jXHh1RNWtJvJ4HfDoO342fKRZVPpWGiLXi13MRlkouHKOXAL\nY6kbffh4V4H2SUa5Kp4AWjXyZF+Q3HZ0q4EFzEPAiu60Vf7dh6gBZq2WEJpu\nWUhk\r\n=KV/v\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEtyQnefuHKax3N78F6AH6uRLMJBKmrrZ/gSbL1Y+Ze1AiAvuKehf95erY2KmnXNnjBXuyl3kaVDSDpnC5KdCUpJmw=="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.0.16_1550732215443_0.5190591190715235"},"_hasShrinkwrap":true},"0.1.0-alpha.4":{"name":"chameleon-tool","version":"0.1.0-alpha.4","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"0.1.0-alpha.4","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"0.1.0-alpha.4","chameleon-dev-proxy":"0.1.0-alpha.4","chameleon-errors-webpack-plugin":"0.1.0-alpha.4","chameleon-linter":"0.1.0-alpha.4","chameleon-loader":"0.1.0-alpha.4","chameleon-miniapp-target":"0.1.0-alpha.4","chameleon-mixins":"0.1.0-alpha.4","chameleon-template-parse":"0.1.0-alpha.4","chameleon-templates":"0.1.0-alpha.4","chameleon-tool-utils":"0.1.0-alpha.4","chameleon-url-loader":"0.1.0-alpha.4","chameleon-vue-precompiler":"0.1.0-alpha.4","chameleon-webpack-plugin":"0.1.0-alpha.4","chameleon-weex-vue-loader":"0.1.0-alpha.4","clean-webpack-plugin":"0.1.19","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extract-text-webpack-plugin":"3.0.2","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"0.1.0-alpha.4","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"^1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-loader":"14.2.3","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"0.1.0-alpha.4","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"0.1.0-alpha.4","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.1.0-alpha.4","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-yZ5PqjzmJfmy1wufPHTRtG9duVjnvZITrXGS5Ong8sBH75PV9IoJJ7RmVa489mSzbp1a5x8/MAivg1EtL2sCDQ==","shasum":"dcd1899022bb6f92e7bb70ceb582b7ef0590c8e7","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.1.0-alpha.4.tgz","fileCount":90,"unpackedSize":874130,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfiEYCRA9TVsSAnZWagAA+rgP/iapiRISoovOPp+EvzLY\nr7V/spt56XGJXu3qcwG8WevXoo2Y1bbtm44c+1CzsPsY6f8Yp9qqsetFNpDW\n6CTXtJAxyG1Sdu+CvxtbG+/QGd60e9PKe+EtqKf5esjyRI/C79Jv8b0SnVNA\nlEYdWtI+LplmSqMiu7IrUA/ICtnP2iQ314FaWMMUWbIaVs3F0wP/YZdAe0FW\nX1OS4jS+nXtnPI/BNMSaHBnYdaUr3XWgZZmMfxqu8m5nZx4/dUkQetqhXB0r\nJyWudgDgYcZVA6ySptUSGW/M731h8KIRDJ8njb8xg3wMy9XtDnuLUisaRR2W\nkikB4CVA/AgzA+DU6GkHQHiTIf5Zt1HM9OMxFaLry9PQ/6Y5Bi/zy9gARbFJ\n5dE2lzGae7in6+/2A48mk5Tb+VQG8c8Fq5XbOpKmZH8GqEUdQARIJXUp4ki+\n9SEgfyeldG3h9WNBmjQBxvxh6Veg1d9MaoZDqmo7pgxaguq5DBIVbyS4A+zb\nvRPKx6D6ehurh4Db/dgItqdSSevywSWfbTndD0em6hNi/Qz7K3KsGBSPAXF4\nrwsuEuqtvB2pon02obekoxiFlYJNKIuBcmTsdWwGVIn+gqLtWqyvDz2pBofz\nR5ii5/qxxUWtMFk8P9BmurkuCfYLT2QsfRIG+QwErkeJhXIRXoBJR/GJLyQV\nM6Wn\r\n=aecn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC1mwrYp4UF0qVMQtJlaUX0k8KI1W/sfARhsL4ya9qAigIhAPCc0VxvxejvXEwkPNGEt9VXmm+/Cu6ZOCMipdR75HA7"}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.1.0-alpha.4_1551769879490_0.4570729175370223"},"_hasShrinkwrap":true},"0.1.1-alpha.0":{"name":"chameleon-tool","version":"0.1.1-alpha.0","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.1.1","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.1.1","chameleon-dev-proxy":"^0.1.1","chameleon-errors-webpack-plugin":"^0.1.1","chameleon-linter":"^0.1.1","chameleon-loader":"^0.1.1","chameleon-miniapp-target":"^0.1.1","chameleon-mixins":"^0.1.1","chameleon-template-parse":"^0.1.1","chameleon-templates":"^0.1.1","chameleon-tool-utils":"^0.1.1","chameleon-url-loader":"^0.1.1","chameleon-vue-precompiler":"^0.1.1","chameleon-webpack-plugin":"^0.1.1","chameleon-weex-vue-loader":"^0.1.1","clean-webpack-plugin":"0.1.19","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extract-text-webpack-plugin":"3.0.2","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.1.1","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"^1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-loader":"14.2.3","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.1.1","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.1.1","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.1.1-alpha.0","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-PdJMlo4I2ZfWJxN7RozIj5KoBoN8RUyGH7w8V8hvuujs5aiW+xr3ZfpibjrpZX7X8wwxYYojaeo/eDLciffJqA==","shasum":"677bd7a5f24a3defd876fd2723573f601006e505","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.1.1-alpha.0.tgz","fileCount":145,"unpackedSize":1604431,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckf6XCRA9TVsSAnZWagAAZtoQAKIh9MTvKjT/kIUfAuY8\nRon7fk8eK/QjJpsupkSWtuZ15LPhAFuyVbpG4bVto6lUPrKsYAJ/cidS/fK+\n7YxwfYTikzpeMWLCgdM3q9sNQAw0COSvlzDkkTnmSmn8EtqXGQCpUPmNhRdJ\n20rBUfLXqjIT7ZMkPijxFlK/3UxtXkr45MnFvEpgi1jtRPWu7z2ryoCPcftZ\nE9K6a/8IiME+8wyF8yrTio+F/eZnBywg/DUUA1xN67Dwu9QPGJwAC3LlEkhp\nejnSY6CdX3PyMmTSbrnonC0Wh0sJ57ALY4VMJoHrg1VCBPIdGmpOJze9DaOb\ntPOIGeCAiuI5FpMUz/axOwUb7aS0DOViX41r2GGG8re91Q4TzeK3v64NozjE\n8jhw9MkFfXvl2MANPli1eN8L7Tnyv4lj6Fuv7fMsDlem2a3rPsEJqUAwunQT\n3SQnXpycq6YwqicIMy3FO/PvcpT7HfL1yLPpp2DmVAZi6Q+alHjuxm04iVPU\ngbWI3i9MnLYi6QgpFQrtp9NNiX2kLMKvyy3H4cVkbwLMuwu3MoOeqRTrD1J6\nM/gCry5B20ThSb0Z7hrR7SU9HL1Wk5+0SvgEh8869rw4Sj0XtNmav2oVcDyw\nHwyb8EH8mfGd1fjcjUg4Xo9rUpVj95poqiVvhjgtb+damHyg/knO/VbsZWmv\n0o52\r\n=FzEB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDuC/7QEo5NkM11FkG+GZaQ9/URewf6Ij52AfX+ROTNcAIgdGYQPEeT0w9jIxpEiJqA2g7E4k2BsK5pszS8XP3cXn8="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.1.1-alpha.0_1553071767281_0.28655176077698963"},"_hasShrinkwrap":true},"0.1.1":{"name":"chameleon-tool","version":"0.1.1","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.1.1","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.1.1","chameleon-dev-proxy":"^0.1.1","chameleon-errors-webpack-plugin":"^0.1.1","chameleon-linter":"^0.1.1","chameleon-loader":"^0.1.1","chameleon-miniapp-target":"^0.1.1","chameleon-mixins":"^0.1.1","chameleon-template-parse":"^0.1.1","chameleon-templates":"^0.1.1","chameleon-tool-utils":"^0.1.1","chameleon-url-loader":"^0.1.1","chameleon-vue-precompiler":"^0.1.1","chameleon-webpack-plugin":"^0.1.1","chameleon-weex-vue-loader":"^0.1.1","clean-webpack-plugin":"0.1.19","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extract-text-webpack-plugin":"3.0.2","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.1.1","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"^1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-loader":"14.2.3","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.1.1","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.1.1","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@0.1.1","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-XgWEUXZUteFISMrb5uAHMVz6KrVrsy/WGHjgZHYxzGIcTCa6PCcgk/EvRP9CjKQg2WHw2p+3hwjZYNNBmVUbfA==","shasum":"e2a52e8211ac2cd3b5ae37c2ea0a9e2965fcbe00","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.1.1.tgz","fileCount":145,"unpackedSize":1604423,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJckgfECRA9TVsSAnZWagAAeH8P/RWwzmHPx3cYZIaueQBo\n6sT5U1JqshlhCQEVYw8SA8kpB53wlr/5BKjPa88KzvTXg2kA0R/lRmBAcOXh\n+3g8+d/WIeep9G2W5GPqCSmqgLkef+NXDL/xVwd7ytbCxXwpEXikKsgliUYa\nAzb4H8tAJ6oLRuc73Wn8pbiRllcVkHxM7RF5GH/BFLP+HJsdGKAkTJ7/1S9e\nZHwlgLbgYkwuhkJ9Cb8JHWiBJ6fkN0k47wwr1tX/qx27sz74WV3xQ/xS/N+m\nxFplNNljhzsXMHt7jfnNw4BpcoK2PZQQCPRRgIi2dxIyx9K3JC6DNqDayLzb\ndJoO6ADy+ATEYW57uhUAB0Z1wsH8rEkStS31FtxDNzqVKLjodaH5m0XKe0ZW\nWgMVEmY7I1Q9sY5M8S/qUu0LzKnYc2jP9k355o6bW0j+GpclKdbYgJhyM9SG\nHzVXAH4V5ycWV7DOctAZiFwFRtNUGI5JHsDCtWyvNHSBFcOrClLJkhRWGjbJ\nR0xoozGWpHllj5wNlelfqc7Bo3UJDPnX4GY5TFa2i68Gt8pGt7TPSmtYtEoJ\nXRfiIPJDbioMqSkkK0BqkGbAYWiu4/bfHCPimApC//9Gy5/VqlJkAx9uZCLu\nJGQEh9V9ysZCMcFQM6FPJ/HKA64jTMtHQRUNcL1Q9ajpiDSAaKiBdLDQM8UF\nIXym\r\n=C6u4\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDcX2s5bSTmlmiJ7n3SMnbU1UgODeYn87ryaTCO+pNESgIhANVcGuN80cUg5/+kLIJsVHAVRCJRqagfsaWxeIq5m4pH"}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.1.1_1553074115948_0.21827152183520937"},"_hasShrinkwrap":true},"0.2.0-alpha.0":{"name":"chameleon-tool","version":"0.2.0-alpha.0","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.2.0-alpha.0","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.2.0-alpha.0","chameleon-dev-proxy":"^0.2.0-alpha.0","chameleon-errors-webpack-plugin":"^0.2.0-alpha.0","chameleon-linter":"^0.2.0-alpha.0","chameleon-loader":"^0.2.0-alpha.0","chameleon-miniapp-target":"^0.2.0-alpha.0","chameleon-mixins":"^0.2.0-alpha.0","chameleon-template-parse":"^0.2.0-alpha.0","chameleon-templates":"^0.2.0-alpha.0","chameleon-tool-utils":"^0.2.0-alpha.0","chameleon-url-loader":"^0.2.0-alpha.0","chameleon-vue-precompiler":"^0.2.0-alpha.0","chameleon-webpack-plugin":"^0.2.0-alpha.0","chameleon-weex-vue-loader":"^0.2.0-alpha.0","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.2.0-alpha.0","cml-vue-loader":"0.2.0-alpha.0","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.2.0-alpha.0","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.2.0-alpha.0","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.2.0-alpha.0","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.2.0-alpha.0","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-BumMpTIspqHldv1w6NGJRNG4h18dumsz16tparVOkC2xDmH+Lkxx4PPgzCuvrPmS6SUcW316MMvu4B5VbtYeoA==","shasum":"a6ea5d8b3e5c68da4f3d076d0888583b2c948c32","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.2.0-alpha.0.tgz","fileCount":146,"unpackedSize":1545881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmulTCRA9TVsSAnZWagAAqUMP/RN7qS9wzfyhbkXiJLx2\n8RWJULwOiHG9FAyXulaQjVxvt+oxMwLeVO8IsEpVop8HG6fOCV2qWurBzsd4\n4vHCsMUtyxgqOZtkIL7T6aaLwIG5OW0RTwNNhPc4sh4XqheVyKEHbBb7BXNJ\nN+1Yn/xcACAK66yCndeOCg6lt79sBKZkpUSVqLdpVcgtqOcnYdpEy8uBYtNT\nbts1+RfvHFdNpRlcCQaKtJow4UVsT/dul3p64Xr6VWxr34SG/VLwZlQO0Q6R\na9JVOR3RWMSpbO0+o/UAMDnIl0pst5pPlIgW2zuVTkY7FjK6f/+Yd83UukIo\nIDKftkrwDMXtXba4bAAmbt2q+gZpJ/W4T95KVPIZVmFpy06clArPzeEK+/3o\n3Q99kcPabqIXwVLozVkeeqpZ07JhbBPIMOPf2hb3W+tmCFaVJs8U1yq2z1o4\nqe6Apa5b78taPN7tAsfoSxWu/LWwtsyFOSUkyVhGnB/bzZTwJCMmv/uRmOjU\nk1Xv64wCyqOKuKHG1WeZhw+CTIF9LNyqdeeAqI3XScMw2gpqfJwzN8IOx83S\nl8FVxHvjy12lEXUnrf0snNuZKehTWUsUY+ARkwXU9Y3AQvpJWw9EZEhCxTto\nFDBjq0fS5ByZPdYqNyW48W10TAood18dyrxFPP+C8XIgvbhFNRogrB4OACy2\n/E03\r\n=nHrt\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIH/z9jmA6fFU7Nd42lUlQIFZtvbRsQ0i/nGpCf6ckL0WAiEApsmKcyVGUrobC3EGMAEvwnnPpfeRBBQxf045wlBqrfI="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.2.0-alpha.0_1553656147106_0.5401113750781765"},"_hasShrinkwrap":true},"0.2.0-alpha.1":{"name":"chameleon-tool","version":"0.2.0-alpha.1","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.2.0-alpha.0","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.2.0-alpha.0","chameleon-dev-proxy":"^0.2.0-alpha.0","chameleon-errors-webpack-plugin":"^0.2.0-alpha.0","chameleon-linter":"^0.2.0-alpha.0","chameleon-loader":"^0.2.0-alpha.0","chameleon-miniapp-target":"^0.2.0-alpha.0","chameleon-mixins":"^0.2.0-alpha.0","chameleon-template-parse":"^0.2.0-alpha.0","chameleon-templates":"^0.2.0-alpha.0","chameleon-tool-utils":"^0.2.0-alpha.0","chameleon-url-loader":"^0.2.0-alpha.0","chameleon-vue-precompiler":"^0.2.0-alpha.0","chameleon-webpack-plugin":"^0.2.0-alpha.0","chameleon-weex-vue-loader":"^0.2.0-alpha.0","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.2.0-alpha.1","cml-vue-loader":"0.2.0-alpha.0","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.2.0-alpha.0","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.2.0-alpha.0","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.2.0-alpha.0","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.2.0-alpha.1","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-kgEb8Z2OHQ6vP0V58JekkYSEvTXjRnQarfebhophD/3eX1MVQW73dlnHpa9wJXaUw0r0iDePxTXppQAs6RDU4A==","shasum":"033416ce13d2e60bf0ab06a039901ad71886ac03","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.2.0-alpha.1.tgz","fileCount":146,"unpackedSize":1545881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcoswGCRA9TVsSAnZWagAAyv4P/jWKjAw7YOgSRr51yVPb\nSFCNYaxG+CPoWdiWU05XRwIvFo9hnMQM4n8+pl3ar5Dc53r+4y92o0bNJBWf\nRfjGUlPP9f+wOY3eUy2F/KqUp42LdxWudCnWK7ej9iLD7UHNTYgurGqbnCmf\nnAucccDcr/k5+EowV7j2ttGXIdgS9SJhOfls5ClaHn2Vy/EHz0QmRBvcSoxS\nM0SSxRZA2944RylmV75RRD5Vb1y9ML4OXq/k0A3qa9dwkCtfdStJ1+yEf0kB\nGm5dt/Y5+SMV9ZSo7Orwu3FgBdLVYWR6wWdYyI1tQLqZshIFlwhdMkyMGshx\nuURudP6nUF+zjVHN7uL0wFl6fp71JkvKne5p4Uu7z43VvZU8Rderm46TKkU5\nmTPvemmY//XUj9PtQTTFes8bMmNY2ORhNktd1fld9MVuD+X/2wfQMbRb1HnC\n5eG5S/nGMoQZpqchY8FPMHUlNkJu9Qwex6KmDCA50LpxsOsuNzQUnumyiAmQ\nMg8KTmtrAiBEbNMxNlScayZfuvPoBW83dzwgtLFJ5jPA8OdlScOeV9roUY1z\nF6C41w6+exlPsjVJPJbTF1Nx29sGE352gnMjB7LSMl6Hj2kAsMgsAxdeCeRi\n0OqSjSDhf1u+/yin/PJbhQhkSqWeSDfJD/U9O2ML5C0fDh0/GjWKDfK2oWaG\n1gj/\r\n=DpKu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQC4LiXPstrNojogCwHi4DCHzuYvQPVgNngxx7SRxrwcTQIgQUj7xFeAKqcLy3ScQcB1qLT4mTh6O68OXQey/ljzLwk="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.2.0-alpha.1_1554172933528_0.7868969112855317"},"_hasShrinkwrap":true},"0.2.0":{"name":"chameleon-tool","version":"0.2.0","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.2.0","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.2.0","chameleon-dev-proxy":"^0.2.0","chameleon-errors-webpack-plugin":"^0.2.0","chameleon-linter":"^0.2.0","chameleon-loader":"^0.2.0","chameleon-miniapp-target":"^0.2.0","chameleon-mixins":"^0.2.0","chameleon-template-parse":"^0.2.0","chameleon-templates":"^0.2.0","chameleon-tool-utils":"^0.2.0","chameleon-url-loader":"^0.2.0","chameleon-vue-precompiler":"^0.2.0","chameleon-webpack-plugin":"^0.2.0","chameleon-weex-vue-loader":"^0.2.0","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"0.2.0","cml-vue-loader":"0.2.0","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.2.0","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.2.0","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.2.0","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@0.2.0","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-7g+46DI0pIwVKvEglvdb6VhD3StyHB4PBk+y5pXSTowKgbVXBbnyBBsPfbeXjXGzAm6+vrTtcOTrnTzfo0fbhw==","shasum":"371471601b82c817d86a2d74f5ab32c396990c8c","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.2.0.tgz","fileCount":146,"unpackedSize":1545331,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcpMpFCRA9TVsSAnZWagAA8HgP/12uyIkr7Gjgucp8OdUV\nEsB7HzLzpyR/OGHSV/SIpK9pcx2oCY/jC52nEo57qh++ySdTg18pS7iqEVez\nV2iHxWNNXECTDIcl69VKD9og34rDSHNRbkNln4ET6hvwzRspAf2T7PCo6HTb\nRm6ho9po9vsHFgqXz5g6CRkzDOGYlu1zjWCioX8+dgSNPs3q0i1pGd50RF2z\nS5+WlNf6uwu3zrMJwGRtBF3iKJPRlBKs6/0sgQst12q1MccBJ7qLX9oWH+3i\nbNJkF4WnfyJAPZMkhtiFHyxBGlEjoDTU1Kf5HbeoceOuYE53VA4xmxEtwGkH\nsNuD9sAtKqCiD6Ff7L+9HgNkXlRQJFgUk4rDAYbW9mc3CxgOHE9OuX0E5BTM\nPVHrqyuA3ZuM3SksrXJ8EPPsfz2EgSk1XQZwqhqs17v0SFS9cflaAmV9qb2Y\nBm7OCepHhc0wqbAC8/bBycnVgXJU80eHCNn585h90o666gCZqd4+/wqcO9Pz\ny3v8JiQpP4HzaBfKo3w+jwIPZL215Yr6QyEbB9pJRj1a/TEkO/pY4xTKGgfM\nIgvsXNwU4MBddWSi1O79Lp36D9hIkU8bviQunz7kL2wVtAZOkGMvQxGzFWFb\nnX5Cp9a++Dw6vk9a8pp3D2AhDU/pbFu3Zg0aSdH4RTWi29iLoG5b36yfzhEJ\nNEeN\r\n=DI0V\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBYlaihUL7yyL10EhZCDNHrVcYo3Htw118Q6iuaPdjRuAiEAt2ur+J3v94SccuAeOra0Hc09zUrsNd/szCEeKvsVOws="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.2.0_1554303556572_0.2840526578244025"},"_hasShrinkwrap":true},"0.3.0-alpha.1":{"name":"chameleon-tool","version":"0.3.0-alpha.1","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.3.0-alpha.1","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.3.0-alpha.1","chameleon-dev-proxy":"^0.3.0-alpha.1","chameleon-errors-webpack-plugin":"^0.3.0-alpha.1","chameleon-linter":"^0.3.0-alpha.1","chameleon-loader":"^0.3.0-alpha.1","chameleon-miniapp-target":"^0.3.0-alpha.1","chameleon-mixins":"^0.3.0-alpha.1","chameleon-template-parse":"^0.3.0-alpha.1","chameleon-templates":"^0.3.0-alpha.1","chameleon-tool-utils":"^0.3.0-alpha.1","chameleon-url-loader":"^0.3.0-alpha.1","chameleon-vue-precompiler":"^0.3.0-alpha.1","chameleon-webpack-plugin":"^0.3.0-alpha.1","chameleon-weex-vue-loader":"^0.3.0-alpha.1","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"0.3.0-alpha.1","cml-vue-loader":"0.3.0-alpha.1","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.3.0-alpha.1","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.3.0-alpha.1","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.3.0-alpha.1","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.3.0-alpha.1","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-N95B4cTkJNMasv4LCSEKA1Pl3YC6ndzY1nUK85N+Nl21Be7PZRkKd01art6Y+z0YDvSpENssdAXObOambEjwMA==","shasum":"e1417be410f133213ba5cb62bd4fb829f29d763f","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.3.0-alpha.1.tgz","fileCount":147,"unpackedSize":1555265,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcq0ukCRA9TVsSAnZWagAAE8wQAIf/sjWxhrEuh/+l4YP4\n4PF2D89xmHQSFCAC7zl9UTNJAHJ3X/fZ7BRqSo3LRhkA1wst8f1GlHt9ez3q\ncgMa1PE/JmFAAweWeC2fdPaYHsgxBzIhg0Z68ZjF1OsiVwKuMnDYZiD9AuZ6\nTBwWwjqW5XZ4QeLHcOZXnfWmJve230MN8w5IUGm2M5q3jhNq9KRf6rXUOZO4\nFjchKpqkVkUkepidvfdGNuRl2yzrOlNdadJlZpKZs1Ue8Y0+t/cd0emN7URn\nJN/en7v27rSgYns3OqM0ARbmEOl2am303CPhbRrqCit+xoJDLy7vn62OxAUw\nRFpve8h5K1m2+79rsltpuq7QTMLpcgNA3aGhU/QPPfMiKKYfoti2eAqBE4y6\nebzhHUDJx6PTQKJDjtgNVcE7qI7ekYJk9iwR2srIKkppIchi3pa/wL/w+v/V\nc5gyRqOW2HJA67ovLG4y5bP2mmZ85wGZ5cj2f7S6PXyv2RmJtdZ4cPfCj/c5\nJmMpJnJRaxGE+eSwayVV/UT6MtIuvUrMKsiGkjC7mMvkWWWLuvZRZqzQR5Tm\nes8UmD0T5IbMT15VYFCp5Kp2khScwYVdGD2uEdQP3uTD/Vv6lTvVGdCs6tTh\nLGbNsq+K4CCJEO9/Ro6hDTiQm4GUrgxs5f20ARhmCJkS6XH+iy8uFVafbbsH\n3SD8\r\n=mYji\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIALTkEs6371mlqte2dXmNa69cZd/E8YjtS0gCIcoiiHBAiBlPYuS+EpevxPdd0EzYSfE5knxKv6ZHHpvCOzn5awcbg=="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.3.0-alpha.1_1554729891743_0.9863079976845817"},"_hasShrinkwrap":true},"0.3.0-alpha.2":{"name":"chameleon-tool","version":"0.3.0-alpha.2","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.3.0-alpha.2","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.3.0-alpha.2","chameleon-dev-proxy":"^0.3.0-alpha.2","chameleon-errors-webpack-plugin":"^0.3.0-alpha.2","chameleon-linter":"^0.3.0-alpha.2","chameleon-loader":"^0.3.0-alpha.2","chameleon-miniapp-target":"^0.3.0-alpha.2","chameleon-mixins":"^0.3.0-alpha.2","chameleon-template-parse":"^0.3.0-alpha.2","chameleon-templates":"^0.3.0-alpha.2","chameleon-tool-utils":"^0.3.0-alpha.2","chameleon-url-loader":"^0.3.0-alpha.2","chameleon-vue-precompiler":"^0.3.0-alpha.2","chameleon-webpack-plugin":"^0.3.0-alpha.2","chameleon-weex-vue-loader":"^0.3.0-alpha.2","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.3.0-alpha.2","cml-vue-loader":"^0.3.0-alpha.2","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.3.0-alpha.2","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.3.0-alpha.2","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.3.0-alpha.2","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.3.0-alpha.2","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-1Kh8ZuAUQDYsnJPZvaoGvFbPAxm4A9UYtbyQECbkM/dfX7CEJItjgvRcyaU6KeFQESHI2fCpG3gOJheUsTS/FA==","shasum":"8e28e856605f875d46ef89d5d2857ab3d2a96588","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.3.0-alpha.2.tgz","fileCount":147,"unpackedSize":1546226,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcrIOVCRA9TVsSAnZWagAAitUQAI9kHaUFqwihXBX5b4VF\nSs5/HbOuvrXTI0U5YrwMva8Nb48bWoi8exq0IjW2m1bOTy1B8sFBHBFl12Y+\n3ECItPcXgYzZ49lMoueFruCOFSKWeEgxzd8ScjmcBCFZV/4bzcSnVMKOzEf/\nTS9QNKwwjE1s61Uz4itZiEpgINJG5ggXLXrK2YtlIp2pJ5Stt3tK0s53ZI/X\nRp1ED8p0xtKkvTZfRnStFADZP7lLZ83I3sIT5GLehPPOeDX8D2AVU30uK9zN\nXbZ4i8gqY09dMlDRD0g+/m6DZeaTejlqeJRIOBv5Tkzz/tbR7GUUqmdhB6I+\ndPvRzVBd50fBdPYi1lYtaxTlv9ydKAvw8LW0RSjx7Ujm4bXXoyNRdg4rGa8E\nBjfrOEfsIocwDvu/NDX2pgEdCjUfc4gdsujjNIwz5QOYlwdqQ/LbuQxOs8RI\nrkpuekmxbIm9vjfSCecc07plUfDQgogBa2kFi09fJ7Gl3PmlzdEhD2Z2hVX5\nXt1SUD/aAEPMN3ZpAQpftyanLAJu+H3cTP/Al4B93C3Bb81wWnUTc6TzsOMb\nRhByxXVR79D8cmU6GjBJKvmv7RFtCuXZgbekA4AnxIknjk2H0ItJp/cBrNZK\nl3anrfSAyjwoh6/QBes0HfKmdpuiwL2YfXtBODro8L+eNuB5eL7ervCMXt9B\nf1co\r\n=6i64\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD0MM0cK5PuVDgBCNUPZOVT9kTfe1E5HGpwdSonMIMCKgIgafn9FtAieXCsZx1zoOYApNJnK3DLeOH1Oc3N+TZnsz0="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.3.0-alpha.2_1554809748838_0.4663348438164243"},"_hasShrinkwrap":true},"0.3.0-alpha.3":{"name":"chameleon-tool","version":"0.3.0-alpha.3","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.3.0-alpha.3","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.3.0-alpha.3","chameleon-dev-proxy":"^0.3.0-alpha.3","chameleon-errors-webpack-plugin":"^0.3.0-alpha.3","chameleon-linter":"^0.3.0-alpha.3","chameleon-loader":"^0.3.0-alpha.3","chameleon-miniapp-target":"^0.3.0-alpha.3","chameleon-mixins":"^0.3.0-alpha.3","chameleon-template-parse":"^0.3.0-alpha.3","chameleon-templates":"^0.3.0-alpha.3","chameleon-tool-utils":"^0.3.0-alpha.3","chameleon-url-loader":"^0.3.0-alpha.3","chameleon-vue-precompiler":"^0.3.0-alpha.3","chameleon-webpack-plugin":"^0.3.0-alpha.3","chameleon-weex-vue-loader":"^0.3.0-alpha.3","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.3.0-alpha.3","cml-vue-loader":"^0.3.0-alpha.3","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.3.0-alpha.3","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.3.0-alpha.3","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.3.0-alpha.3","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.3.0-alpha.3","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-DtbKdF/+rHyOQQjvk/X2vYjQb/+ej7vavue4ll0+qS3s7WqFsvuieFQAc3w4kd7cqrmkr3sXb57jfGM84iJz9A==","shasum":"e6e76700d9d04a703e9b7a65b4c493f10332bf1d","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.3.0-alpha.3.tgz","fileCount":147,"unpackedSize":1546480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcsFu3CRA9TVsSAnZWagAA68kQAJKc4fGq+94qrAcdFFA1\nYwqPBlEwqgLVbgn/5RxpaZ6SnWPzSuAOcBOwTxN2c3f1kma2b+6gaCtvM7jW\nRoOuwpugajieE00RF808kTDxH3jyk1LtdkHVIzB10ENs63hU5jGSd5OOqmbN\ngCiPc3QjTBbrh5VQhh5J14EK+r6+R0srIKBE770tctuxyTlC6mKHFxseBR6D\nCCGBa0pRj2hiSZOqxj2O73v0Yieu7wtm3gDSSiRbV7RE/Ze7U/iiAW9+vFnF\nfIcDh/xNyGwOzITCUJ6VRA8A1M2gGc0yFLusJUbE5oRkkDLesEoSC2vK/gqi\ncLTJy8Jpbaadq3LT7mWhgcMG71bc2WC5re4iBTCRxMl17L+9ifpzjIG63FXK\n1XpefAGJpbAh18u+vJ2iolxP0kCsTrmPjlauLqN5Xsvdm0I/SnVD66S5AOp/\n/XLJiP/k1AjRRIyBiEU2b/r66RDCavjYofN0IOsBpzrDPA8XzfJIvTgJufci\nmrQclRQ/XzfCEHbLSrk7f55vqqT4ztyjCdFBlSwV4cpBExvbT0XXfHXxpzn8\nv5Voc7GMysw3DACuQZ4NX5ALFv6k9F4HKTJfypM7H6Pj4SbozluIY4O2SK8S\ngbSsxI4V9S11OPtDEnXQN6XmEGSLWEpqzdAjA16KIDVv6sUq3W54jCau7vQ7\nr4hu\r\n=6KMw\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC+KI0Wgl2vulDtVddYJS+vFqxy/ELYFD1hEz6bEwHzdwIhAIg/F96ePq9buwOTAkPAPTP/vHx9/zeHmnzEzyTiCI5T"}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.3.0-alpha.3_1555061686889_0.27624305440289465"},"_hasShrinkwrap":true},"0.3.0-alpha.4":{"name":"chameleon-tool","version":"0.3.0-alpha.4","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.3.0-alpha.3","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.3.0-alpha.3","chameleon-dev-proxy":"^0.3.0-alpha.3","chameleon-errors-webpack-plugin":"^0.3.0-alpha.3","chameleon-linter":"^0.3.0-alpha.3","chameleon-loader":"^0.3.0-alpha.3","chameleon-miniapp-target":"^0.3.0-alpha.3","chameleon-mixins":"^0.3.0-alpha.3","chameleon-template-parse":"^0.3.0-alpha.3","chameleon-templates":"^0.3.0-alpha.4","chameleon-tool-utils":"^0.3.0-alpha.3","chameleon-url-loader":"^0.3.0-alpha.3","chameleon-vue-precompiler":"^0.3.0-alpha.3","chameleon-webpack-plugin":"^0.3.0-alpha.3","chameleon-weex-vue-loader":"^0.3.0-alpha.3","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.3.0-alpha.3","cml-vue-loader":"^0.3.0-alpha.3","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.3.0-alpha.3","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.3.0-alpha.3","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.3.0-alpha.3","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.3.0-alpha.4","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-nzHxEXPjH8Mkul0RfQ62+lNLAJzYztOdGYxnGaDzDoOz9F8BSHg4gUzqOn6JvZ4aKqbvback8zmefNA+oAKdwA==","shasum":"9340c0a3f2d857c6921c327823306a3ab38d5bb3","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.3.0-alpha.4.tgz","fileCount":147,"unpackedSize":1546480,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcsGkNCRA9TVsSAnZWagAASBEP/3QTRZTP1SlmdqZ+McJC\nW6GTPb0ZQMa2MOjt125vx/u4EFlS3BSrcRqa6faC5mP7QoxFHjMLt9lu5upB\nbg4mEPcxgNXdHHKqZoy6d+q/QIaSS/Pg7n8FbjTFvF9iPqGesgQRtMbZxooa\nzKnMAxFtFvaKUSWy6Z14fAD0rM77kHnV2v5TOwFImobQeLqreB1cNLR69bok\ndsw5juVRZQYHoR9PBhMY7rK+jDHGM+Cl5hRadMGWm5jOJnCSQBvN4c4zMgmP\n9qnV0m0KC+VM/QPdXnFnD1eh/VYpS89o4snSSt8j3+S0xsIJfofkMzWAqjny\nyiZ2OXb8M+1w5E8EddXkSY0Ownn9G0BYMUHC+1mbJAOu6dMmPKHK7UwDjtmn\nChFviIJYQsYNiF3+UWbKNUITvfZNVjcpMXGC2LsLMQqHH3ksG91W+q4cvVAq\nxqHOvaDtHQJmxV3zJNp2ZMm51vZnekPujt0JJAa9K365Sqk/KQVKYIMEW8Sf\nG2H69W2zLwjVYoKE92/SndIZ8HyxnFb/Gm9vcMnvtxWSgfmZaCwOv89Ts9Ba\nDBfnXpqE1mtl0MsUGU9YHKxEND97Jp14wg2X8oPI6OPOb0XJrdAd3jylkjKT\ng9nm+pVb0EKIP/DWbneEzZCMbEyyyMCYP0+FxTB3yozNlYKyTQWxWjebwyIc\nKRM0\r\n=WYeU\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIG55nZiNsc36Mtx+VxyWsc33z306V0Kpw2oAlb5BcRIBAiEA9BwBy5y0TDcwgvez2OUL7RQqR2VX/RZZuoy+iV1YkNo="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.3.0-alpha.4_1555065100586_0.26214553377787797"},"_hasShrinkwrap":true},"0.2.1":{"name":"chameleon-tool","version":"0.2.1","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.2.0","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.2.0","chameleon-dev-proxy":"^0.2.0","chameleon-errors-webpack-plugin":"^0.2.0","chameleon-linter":"^0.2.0","chameleon-loader":"^0.2.0","chameleon-miniapp-target":"^0.2.0","chameleon-mixins":"^0.2.0","chameleon-template-parse":"^0.2.0","chameleon-templates":"^0.2.0","chameleon-tool-utils":"^0.2.0","chameleon-url-loader":"^0.2.0","chameleon-vue-precompiler":"^0.2.0","chameleon-webpack-plugin":"^0.2.0","chameleon-weex-vue-loader":"^0.2.0","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"0.2.0","cml-vue-loader":"0.2.0","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.2.0","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.2.0","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.2.0","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@0.2.1","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-2Q/iZJVI9d0MDGXxsIZejnM6npa/n3okEFXIk/ySMhl0pLz26wOpbW435swC8uVFwI97AtmZV76Tg38kGhXp1A==","shasum":"252a54e13224d51172e8655f85bf4ff6d2dc028b","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.2.1.tgz","fileCount":146,"unpackedSize":1545363,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctHE7CRA9TVsSAnZWagAA6YYP/1gnmsCxDb+a5cwOtoHc\n0JiNJ+E2rU9iB5dGrZrQ3iqIVTfH3vbxNT5XcmAxESLmOeKVEw4Auld5FPZx\nnBYu2lr3DnQv5GGL5+mjko8E02dJmJCxit2Ihf+9yyU3GvoyRU0max8LO9b5\n0KCkmTvAOrEErYe6ncr0eo3vJrq4Fr70npxeMYLWGLQ91c+muyI+ge1M3VQE\nR3h+0Z5IsC8NfRqr70C1rEgxj7UL01ajwCXQUmsSsPtZxvAZAjUI/Olza8m3\n3IW+pFbuaSg/YTS/3WHfERxtlth0Q1v8NHOg1GbiavzfskhAPIH/Ctreo1E/\nppGZc+CgVskSpJE1B32BiSAgCVf6yKE08u679eD1RovIMgDJBj7mHhRLEsh5\nUVfYh+Hb5rTmnQQd0/WZuLcSErYgD2B8t90C/yNWwpb52mSWqs/gWzNOnxbF\nF1mbI8Kis8vfWW8UqUXmvQtch3aQPY0WCdLs4UCCnz4H/BIupkv4vrg360zD\n83svViczSHd+C4DCRXCGjNYRYg2ckHCJ0EnnZM/WOpI8H0rhEy4GjLahA6ae\nYSexHf0TTHl7l0o3Zf8LxsuQ4ZAQWXLQbpEFZwuCD5aW7sypCqY9MyMA8P/z\ndVN4td9mWFAu8/6UA1t3wgl6xcSj68Bv2oYi6GWjSyY1MeE6F+6oeME/h/3M\nRV2/\r\n=mQD3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFUO2IHDykRCyTZnnrb+MPm3iCo7RNCos7b1n6vjX+npAiAGxHMVG6QECGzlj3JPe5cC53Ldr65o1xF/f83rAydDEw=="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.2.1_1555329338352_0.4939311121562655"},"_hasShrinkwrap":true},"0.3.0-alpha.5":{"name":"chameleon-tool","version":"0.3.0-alpha.5","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.3.0-alpha.3","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.3.0-alpha.3","chameleon-dev-proxy":"^0.3.0-alpha.3","chameleon-errors-webpack-plugin":"^0.3.0-alpha.3","chameleon-linter":"^0.3.0-alpha.3","chameleon-loader":"^0.3.0-alpha.3","chameleon-miniapp-target":"^0.3.0-alpha.3","chameleon-mixins":"^0.3.0-alpha.3","chameleon-template-parse":"^0.3.0-alpha.3","chameleon-templates":"^0.3.0-alpha.4","chameleon-tool-utils":"^0.3.0-alpha.3","chameleon-url-loader":"^0.3.0-alpha.3","chameleon-vue-precompiler":"^0.3.0-alpha.3","chameleon-webpack-plugin":"^0.3.0-alpha.3","chameleon-weex-vue-loader":"^0.3.0-alpha.3","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.3.0-alpha.3","cml-vue-loader":"^0.3.0-alpha.3","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.3.0-alpha.3","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.3.0-alpha.3","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.3.0-alpha.3","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.3.0-alpha.5","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-p5ySEWt5Vg0vwQMrgc5o0SBKctMZ1ueE0sdcVJiTv2HPfkreesEDowopi0S7eQBJaG8C0vWstlIomkFAxCysgw==","shasum":"7889ed2b6997dcead541a426932e207ee6c3658b","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.3.0-alpha.5.tgz","fileCount":147,"unpackedSize":1546512,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctHPoCRA9TVsSAnZWagAA9tQP/2sQkhdc6q7lpA9OaHCU\n6ta8YB91vrNc/SZ6w4b8fAkPSeAR9MmM5qB7G0sGw6smMMWb8pbBvRGx6CiX\nV2VS+J+OiV78Iiqxl8qz211bjHGhSv1dqZh4KWcYUUA1mOu+bBZzWi22ijSs\nuVslP7L2CewPgkTHVpLkPuKjmY2j5rfuVzvr9FiGKi302ntS0QHwi4t7R77C\ndDfEg5ZFKtcndcW3yJSJxmyr58CI84sESECIF0EpDhsiTK3oVOuPuREsNnwa\nQ8vdCT6wNYJ1VfUyhweSiBFuBhhBBDWey+fyX9l89g9XmFYG9FTg46SlDRi+\nHzX+4QnO3tZ0atLDCWltOdN/tKTURz0ZsjhQiVY9h/RlpJLsHq3sfvWaecUL\nGijk2UP+SLznmQWJSazpEjRnEfiGuzKdLisAhXg+9MU8U5IbwfpZoHd1xYyi\nUEloj0rnThwMs3AjoC6gb5Mvk065RyrxJ995KH/afQZrJoFV1cJEB3JioKWZ\nnvjYubK/I7dCWnjmySlpX5YNSw5Jfq40lyzJmWok9LuDnOsVSGkthIKBI2Fb\nX0pCNeST5wIAlAZhYRJSfUFOWYDm0+uy3Qc4FmKJhqznLj/UEAIgJw0vnTkX\nKd6drNLh2W6yahRoRmBMI3vvpTzWuG7knWtMrOBRBPXUx4s9kATjy2jpAO8d\nikp0\r\n=vzIV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHsNhsh1pF5oOSIlNxb2gyU7SUyjtM9Ll/dYKytX7Vo5AiEAm5BdCs0BbaznvzzVzhbgCDeqSP6vxzs010ENE3fPA0k="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.3.0-alpha.5_1555330023841_0.7172591314024432"},"_hasShrinkwrap":true},"0.3.0-alpha.6":{"name":"chameleon-tool","version":"0.3.0-alpha.6","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.3.0-alpha.3","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.3.0-alpha.3","chameleon-dev-proxy":"^0.3.0-alpha.3","chameleon-errors-webpack-plugin":"^0.3.0-alpha.3","chameleon-linter":"^0.3.0-alpha.3","chameleon-loader":"^0.3.0-alpha.3","chameleon-miniapp-target":"^0.3.0-alpha.3","chameleon-mixins":"^0.3.0-alpha.3","chameleon-template-parse":"^0.3.0-alpha.3","chameleon-templates":"^0.3.0-alpha.4","chameleon-tool-utils":"^0.3.0-alpha.3","chameleon-url-loader":"^0.3.0-alpha.3","chameleon-vue-precompiler":"^0.3.0-alpha.3","chameleon-webpack-plugin":"^0.3.0-alpha.3","chameleon-weex-vue-loader":"^0.3.0-alpha.3","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.3.0-alpha.3","cml-vue-loader":"^0.3.0-alpha.3","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.3.0-alpha.3","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.3.0-alpha.3","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.3.0-alpha.3","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.3.0-alpha.6","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-keMhGjyQckFad5idmxfqwL9xZD+8V42D53iEGX6zHreF0+ebqfPLjuvgNTgG6oOSYCq6qEfKatYu745i2OoJQQ==","shasum":"a03abf8d8df50c90a9b5b8eb43ccf49b13648644","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.3.0-alpha.6.tgz","fileCount":147,"unpackedSize":1546572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctU9SCRA9TVsSAnZWagAApesP+wTM2Sn9VX8EoPig82h2\nLr9AwDbciKTSKirIUDIwwn2BZyju/EV3lVyyziV67nw14l2j20uJFRJ3MuJV\nq8iSoRHjhp1mMJCNRBlxAc2jMgy1WSDottSwJ8Oi1kciXb6Xi7pw44U4Q082\nN8++KKJAxwtSY5aPiSKKvPkeeGIkvXY4GaI51yjMkzdypHUyEFhuibekGgJU\nvDiYjv7zUbvc5eTPQWHkA/cNVmUt0mr0+iJzKAkqt+xw3vidy2wy6x9fKph2\nsy+t7WhHR2BRWm4mu1E4jCHwcCiezAsXmo0V2gK6sVIASwR6DGt3Jnky90zR\nF3dyqk+Jg9WAAaHXgD/JVdNd6jJbEiW1WwmTttPjAgdG0dUCn76DpSV2kyuV\n0wlsJP38WfKC7N+IQ4WB1y2djrrlBSaq0T0jxVwH2JzF8aOrHW+iNl/dRPij\nRu2e+XMT7muIpnKCsTrV1LXUVnD/SaM36proYUg/iADXqw2OC8rferJaAPgf\nTPYUL139FcGpIeMWp2qvhP/QSCTmNqZzcjhl3AZh0yGAMq4WoslhjCgG/kCO\nzC+04TVJfgiatYSBdAI0q63ED/ZsiF+2DLmpVjyx9RDjN/HbwyBTGeMe/dR4\n5ztDYFufC5OZPcMq79HIqq7ahbl7eRMiVCnuwyK6m2dmxqGbYwK+adtAfxCg\npX8g\r\n=NaRG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGmFxpG1Hs3HOy+sS1ERMclmb7XwjbekHm5LX7M7nsaFAiEAgptT3wpPFzm8vFKXizc/kJawBF506ocPXTXWwr6UVIo="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.3.0-alpha.6_1555386193710_0.9547542692279867"},"_hasShrinkwrap":true},"0.3.0-alpha.7":{"name":"chameleon-tool","version":"0.3.0-alpha.7","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.3.0-alpha.3","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.3.0-alpha.3","chameleon-dev-proxy":"^0.3.0-alpha.3","chameleon-errors-webpack-plugin":"^0.3.0-alpha.3","chameleon-linter":"^0.3.0-alpha.3","chameleon-loader":"^0.3.0-alpha.3","chameleon-miniapp-target":"^0.3.0-alpha.3","chameleon-mixins":"^0.3.0-alpha.3","chameleon-template-parse":"^0.3.0-alpha.3","chameleon-templates":"^0.3.0-alpha.4","chameleon-tool-utils":"^0.3.0-alpha.3","chameleon-url-loader":"^0.3.0-alpha.3","chameleon-vue-precompiler":"^0.3.0-alpha.3","chameleon-webpack-plugin":"^0.3.0-alpha.3","chameleon-weex-vue-loader":"^0.3.0-alpha.3","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.3.0-alpha.3","cml-vue-loader":"^0.3.0-alpha.3","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.3.0-alpha.3","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.3.0-alpha.3","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.3.0-alpha.3","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.3.0-alpha.7","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-70Q4ZLtYcJ2DCNPjxWV6OQfW9Tz/oHo8h/q/J6OsQrf4PidpnIXHIHx0bzbb4ljn7ePszHZU6urfzYtsfcjFhw==","shasum":"974827ac79b011356042a4fb6a959c676e65d26d","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.3.0-alpha.7.tgz","fileCount":147,"unpackedSize":1547212,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJctpoLCRA9TVsSAnZWagAAkTYP/A6J2RASZxCZW8BSCklj\nPWixGzLgOvHw5/zPIYWl+/p0n33JGdeXMpuO8cm/DJawU2zGtQELgUDZED3B\nJUtDGucW+4XwZZ05NeEcsDy5NGT9icqOoHbdAi3sUqPxBwSw+GT+akO2YwsC\nwmn4a2SQOrN3eSJL7MqmQ6jXvHWge2FYxxd0xDjjwfi2c3LNXd46ut0iJfas\n2sJRrPxnbFv81j5wTidD7qiIRSYq1QTzEAnI7rzYM9lvwah+RahMR/s6/ln6\ngMXIjQOR7A7EVHPA+UZph2BQqKyjOzWo1e/AHs2+MNkIlWx8/5I0M+1/bMM4\nmQiyTLHEnnbNMDWBQnol+nbCTWkIF7lKMPzofaDclqJ5yYLRN+UBUGMfUn9l\nJxL1INpwd6iLPCu0EePqLAmoSAyZEcoiCPm+xB1ntGF4KGiqjNVQfPgbQU9M\nc/H+NF67Ox1/eZUWQL89BWX51I3+D0ZWA1uOHqgACnBdVgzibN7iE4Fisprj\nLbIr7HrkhG4duLkqfa2uIsPwGFxkTb97CH0h+RAiZUVPuAoPm3EQh/aFebqI\nm1B4E3UfscAuwxUZJC10OHhy29E4Renm/mNKH7d3uuVLTCRr+RYlQOMGg+jQ\nkvLtOsEsZyorx/mmNYYV2YqWHlRa3aOdkQNFt8NitbyQYQ6i+oCCej7tZk/a\nxSad\r\n=Or0m\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCxhq3+b75WfmRBd1hrn/8TZVELliIAww6tjKcft6LRogIgZU41tMjRdwXNEgRG6RSCVfBzzPK7NlFbm6ka1YQcPpc="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.3.0-alpha.7_1555470858663_0.04817949531932775"},"_hasShrinkwrap":true},"0.3.0-alpha.8":{"name":"chameleon-tool","version":"0.3.0-alpha.8","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.3.0-alpha.3","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.3.0-alpha.3","chameleon-dev-proxy":"^0.3.0-alpha.3","chameleon-errors-webpack-plugin":"^0.3.0-alpha.3","chameleon-linter":"^0.3.0-alpha.3","chameleon-loader":"^0.3.0-alpha.3","chameleon-miniapp-target":"^0.3.0-alpha.3","chameleon-mixins":"^0.3.0-alpha.3","chameleon-template-parse":"^0.3.0-alpha.3","chameleon-templates":"^0.3.0-alpha.4","chameleon-tool-utils":"^0.3.0-alpha.3","chameleon-url-loader":"^0.3.0-alpha.3","chameleon-vue-precompiler":"^0.3.0-alpha.3","chameleon-webpack-plugin":"^0.3.0-alpha.3","chameleon-weex-vue-loader":"^0.3.0-alpha.3","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.3.0-alpha.3","cml-vue-loader":"^0.3.0-alpha.3","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.3.0-alpha.3","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.3.0-alpha.3","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.3.0-alpha.3","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.3.0-alpha.8","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-42y6hGLyFluULMDyrDOZLVKlCzdh1+crzM3z7BxTBLuT+WrbnZ9KCVaJOsU/Q2g/m1+w/xB+37jrgW04HIKcKw==","shasum":"60939678b220b1dc4f639e6fd0a523bbb7c35535","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.3.0-alpha.8.tgz","fileCount":147,"unpackedSize":1556898,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcuUJNCRA9TVsSAnZWagAAXlAP/0rglPRrvARCdlDOzXp0\n2RprB7lqnWJjIa9Xx/UEGZydzz/N/5OOxbFUqA1lGoChrVjb3aOV7SgCEKL/\nktA5mlT6INLFmipBsgDp4atfm8g2uXKBIJ6SiGsBKfaGSRuDcWQ1kNu+D+o4\nQhDr0R3Rdm+DqyLM10C4tOAX8cBws/rYqtVBN7hky+3uNWnsQ8qyM4lHShrD\nMkBHIEcOWteUaXYmzoa1p9vO2ufHI3csXH/3vIjnawElfTMHhybPfrsTEHnY\na1mMUeLdwd84I2Jus/FKqKy30DfD+hCxNmY+CTgEI8cP7NFOFb2xCb4h7KUj\nwaol26xfBRQ4JAoVru4GHN3F3CazlRxLZZ4UwqxhqB92sVwwOhi61v2TETNh\nJcsbnnxCK6o20Ba5Ycxauh+J2Dg8iEo84NVHQlihKfJpF47myI7w9D94iAB2\n1t5KNVE5f22X1iVe2N6wxPRPV+dM2V7UIjo1+pbbw347DPx64n6KtjrRkzZu\nVflm/z0+kjttSvNkdhcT8zRArhGYFKc6NzxToOKNTJgMeVkZl8RW0hFt3b3d\ncDOwQHV35vow5CEUANNZI124ZrHcxKpxOTgyOSGQKbZRSDdI5Yr75FGcOBdg\nLNPedkzlBz3vzWK6QQ0VEs7WtcA2QtheMfA/qYus0AcSC4ebYZZiD7eqBl0P\nTVby\r\n=Uvck\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHeh9xRUXhI2U5novg6ytwmXdRMaSPnLqH5/Kdcc7L0eAiA8Td5RMoS7sgdjhqWrP4BW7cbgVfJGE8X58lf8yerCPw=="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.3.0-alpha.8_1555645004454_0.37070487179218636"},"_hasShrinkwrap":true},"0.3.0-alpha.9":{"name":"chameleon-tool","version":"0.3.0-alpha.9","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.3.0-alpha.3","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.3.0-alpha.3","chameleon-dev-proxy":"^0.3.0-alpha.3","chameleon-errors-webpack-plugin":"^0.3.0-alpha.3","chameleon-linter":"^0.3.0-alpha.3","chameleon-loader":"^0.3.0-alpha.3","chameleon-miniapp-target":"^0.3.0-alpha.3","chameleon-mixins":"^0.3.0-alpha.3","chameleon-template-parse":"^0.3.0-alpha.3","chameleon-templates":"^0.3.0-alpha.4","chameleon-tool-utils":"^0.3.0-alpha.3","chameleon-url-loader":"^0.3.0-alpha.3","chameleon-vue-precompiler":"^0.3.0-alpha.3","chameleon-webpack-plugin":"^0.3.0-alpha.3","chameleon-weex-vue-loader":"^0.3.0-alpha.3","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.3.0-alpha.3","cml-vue-loader":"^0.3.0-alpha.3","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.3.0-alpha.3","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.3.0-alpha.3","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.3.0-alpha.3","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.3.0-alpha.9","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-8Y7xwH1Pe3xqaV1wpC++shRaMPHcypBdjQRUXlcoPcWWdXsVLgOGeT9fZnGWx34tWf9bpYCZIyxMNsqyhsuHdw==","shasum":"9860e99f3a766e056d5a77c3d6c8b4aebe41c0c2","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.3.0-alpha.9.tgz","fileCount":147,"unpackedSize":1556972,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcuZMZCRA9TVsSAnZWagAA5HcP/2NEFKgiP0MjAMczYdSE\nWdztegodbCCbf0FbX5LFrMlUNB3wP7lpZlftllp7RvXSSuIXVZRwK/HGgE8E\n3bAF7QN1Y+JaZlpGzXlundBcL1Nb1gTcP054AqYgz96KALO0aNN18VpLTdcv\n7YS3OXZzM/+cmGHEmdgHQFDR6Y77yxmol5SXZNeoWWXEfD1ZPcuT9FDG715J\nPhNJ141ZDx1d0yRxneryNL/NjtkvqS8X2iEUiSuP4xKwgR0OraxAKO/kh3Kn\nW+7LRtYgarJ2BpelTdZ+OSAgjMrj9X9BntY7aKAh9d9cCOZYqzNMSkh3ZQUS\nUgzoM6Mpv/cvQiweyc14lgWy5fBNWlbms2pklKaTY4ERL7X2Y1Gpox3A1Mla\nYLmb41q8JB0yTHA0xSnErcbovf/2OGnfAbtcABHBZLFOxLQoqr8WjWrsG0Kg\n2Qx/myuNuM4IjUpK1FA34YoRvfAOrq9gIRh1YpMrfHSkz2dSI1tt1SQla8R5\nZhfj3em/5rBXurUGlMH5lwbQYLvQ9f+utMUthAoQEeY/w4SiOWTsecAMpNzg\ngQW5QqjbrwrY1jFLGj95J4m6m8sTbfIw7LIUhBJqh9ZGr1fS+xrzJOnY2FL3\nnc01gKY0zmP37iijAosYNUoXhCsQV1+WCtk4poHzdjphQ+0y/nNtfXBbCjpV\nCQmh\r\n=aJgn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH66lLlUwdTdbMUJqpUgABjhq+C3L6IoTBTCxPOELAYmAiBleT/EMYEY/qc5vaPmD145lihcN4wxi5VnxUCjlGCvPw=="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.3.0-alpha.9_1555665688538_0.6850938450359492"},"_hasShrinkwrap":true},"0.4.0-mvvm.1":{"name":"chameleon-tool","version":"0.4.0-mvvm.1","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.4.0-mvvm.0","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.4.0-mvvm.0","chameleon-dev-proxy":"^0.4.0-mvvm.0","chameleon-errors-webpack-plugin":"^0.4.0-mvvm.0","chameleon-linter":"^0.4.0-mvvm.1","chameleon-loader":"^0.4.0-mvvm.0","chameleon-miniapp-target":"^0.4.0-mvvm.0","chameleon-mixins":"^0.4.0-mvvm.0","chameleon-template-parse":"^0.4.0-mvvm.0","chameleon-templates":"^0.4.0-mvvm.0","chameleon-tool-utils":"^0.4.0-mvvm.0","chameleon-url-loader":"^0.4.0-mvvm.0","chameleon-vue-precompiler":"^0.4.0-mvvm.0","chameleon-webpack-plugin":"^0.4.0-mvvm.0","chameleon-weex-vue-loader":"^0.4.0-mvvm.0","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.4.0-mvvm.0","cml-vue-loader":"^0.4.0-mvvm.0","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.4.0-mvvm.0","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"^0.4.0-mvvm.0","mvvm-file-loader":"^0.4.0-mvvm.0","mvvm-pack":"^0.4.0-mvvm.0","mvvm-style-loader":"^0.4.0-mvvm.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.4.0-mvvm.0","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.4.0-mvvm.0","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.4.0-mvvm.1","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-e2vm6nIIuOVpcq3/0T41g6ldiIMXOYpIQE+o6tsn9KdUwau94Vf7sklFd/TWYfljVIdADL7BH4/dqPyGzn9Gpg==","shasum":"5f85a505fe7513fd58c96a66a221a8f148298c4f","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.4.0-mvvm.1.tgz","fileCount":153,"unpackedSize":1584768,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcva3cCRA9TVsSAnZWagAAsUYQAIYO+n2YiIq5iTeEtLN+\nBz8SNl6h74uTBZQ4u/DaxgsU0s41jo9o/07XsF+pzMp2yDNdajgg+ywIOScm\ng+qMX6iwtBJaeo1ID7nEQv5CPTsKwta67RYpNAZ3MJ4tG9IvNmTzgq+AK9Yp\nIOh7iJHgZHO9/MNbUut4SKSuESRFjeP0ugvoyISwhWuGdGjwbPn3qCnaqs9E\nmOkQFssY/l5NsUnCJaOej9akfp4FpZFz2GX05GeWHYQjTy/J4ocK0cnQ3Czq\nI/Nbc6RdT4FZ8a3RJXs1X9LSWoTCGuYfR8a7s8HP2i9gJyPdF5Xo5iS2JYwJ\na75UggPZlSrXCwc00yHEPyQyglrD+mRNUXBo8kwZpVLPy3qdEDAOTrwwqiM5\n2Q3X/JU91uqzbNSlpgznuokZhAp/5MUnz9XtTOxbfBioZvZv4yOqCe5xhnIG\nGDK3x5MYLEXe4OtOCPaWN5A0ntDJq07g04S5CbPC6lKUDJgWuL7ZM8oEbnaE\nRL5iTVAUcP2O3xGqub5/3k/BzWL/0nKbS8W13bHBbu5Uj699XzkSBRM1y6e8\n5RstsPdapTuzJEZp8w4A4qjcBJs3dsdzMwNG9f2OdtuyyNjW6DpTchfwgPhC\nTCq3IttoeeBZThnjW+8Hf83AhvkrE2YhN/mVEd23Hh/jjxakOlWcEoXIR/M/\nfS+S\r\n=uI0d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIETH2dlC7AuTw1/R7llT9WRVleK0FaL61jX4ig+jyxz4AiEA02BKE09Obb+QmOmdbPB06SZlh2CgSyxh8tM8lkafM1w="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.4.0-mvvm.1_1555934683937_0.20269947859872905"},"_hasShrinkwrap":true},"0.4.0-mvvm.3":{"name":"chameleon-tool","version":"0.4.0-mvvm.3","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.4.0-mvvm.2","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.4.0-mvvm.2","chameleon-dev-proxy":"^0.4.0-mvvm.2","chameleon-errors-webpack-plugin":"^0.4.0-mvvm.2","chameleon-linter":"^0.4.0-mvvm.2","chameleon-loader":"^0.4.0-mvvm.2","chameleon-miniapp-target":"^0.4.0-mvvm.2","chameleon-mixins":"^0.4.0-mvvm.2","chameleon-template-parse":"^0.4.0-mvvm.2","chameleon-templates":"^0.4.0-mvvm.2","chameleon-tool-utils":"^0.4.0-mvvm.2","chameleon-url-loader":"^0.4.0-mvvm.2","chameleon-vue-precompiler":"^0.4.0-mvvm.2","chameleon-webpack-plugin":"^0.4.0-mvvm.2","chameleon-weex-vue-loader":"^0.4.0-mvvm.2","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.4.0-mvvm.2","cml-vue-loader":"^0.4.0-mvvm.2","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.4.0-mvvm.2","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"^0.4.0-mvvm.2","mvvm-file-loader":"^0.4.0-mvvm.2","mvvm-pack":"^0.4.0-mvvm.3","mvvm-style-loader":"^0.4.0-mvvm.2","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.4.0-mvvm.2","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.4.0-mvvm.2","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@0.4.0-mvvm.3","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-2a83pnbXavgwDWSe2MusUEfBPULu5nWPA5GGlMnNoH/ustJ7ROf13hD4Z0n0Zca9nN3TL2FBcCz7MJ0dbp6PPg==","shasum":"635434f6bb69b7be3d6300ee6163982b2b94dc49","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.4.0-mvvm.3.tgz","fileCount":153,"unpackedSize":1590238,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcvberCRA9TVsSAnZWagAAzF0P/3cbhueSPKCe8h0/q157\nbpAUPNweWupVB3kNYE2Db5Amvl+GVNjHBewEqapLIbQA+aCVQpDu27wOLFVl\npYgG+gTk9svWdLwYYoF8z08CAhqcXpQk3rfWNObrqLp7OaRhPgiHT8fEzcXI\nzwNmJBE5moOm8IJ9jXFBA4t9lGRcilx6BCnowj0JKkIQ46mF94kGN+g+36rN\nmhogtdAeJruPx3vgnAOyd15skG79rWLrpHLUR0RACgyyg5EELPa+N2fFDV72\niYC0To5B/64GW6QxAB+fTDZwbfu+xzfZQc3Gw9K6vkQR4926qwYOfJdlEo1i\nxHNL7G5gvQvTgmMTGJK5cUQihaYgGBZI5h2C6dsHUewFbtfKF0uGS+VrpXSh\nnTOqmE3vhv2wkfnI0G2knMLpxSFhI3En9QPxsyy+SmDWF5IWq9ALAyLRcR25\nhi/+tXrSsQCCNWHDrgfSczlUa0JRw496QT3m92zFDeMRht54dLruNI9gAm86\nv8XAklDIOviuqeTVSNDLZdLghYzPXeiJYXtQLXbzUkDDiCqvYaA1gqsy0Esh\nYxOF3E9BZgnQZ9C8JU9qO7sSYL09MsNYYoX990tF0Z3zITclI06EqobfVTa/\nji+mrcTlI45pyhBUwl8ZW2KxCXVQzwxkv4hqR8W8ugXvRYOIRe36+yhBmbgH\nK1QR\r\n=P92/\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3Axed7RfS6gx6H2i2XZreoqwdAfFRvjdwWg2TGc66pAIhALYvT5ULJZvWVeZb97vhUX5Z4M+sM90APSmkWdfJEV9J"}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.4.0-mvvm.3_1555937195017_0.6233389413582511"},"_hasShrinkwrap":true},"0.3.0":{"name":"chameleon-tool","version":"0.3.0","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.3.0-alpha.3","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.3.0-alpha.3","chameleon-dev-proxy":"^0.3.0-alpha.3","chameleon-errors-webpack-plugin":"^0.3.0-alpha.3","chameleon-linter":"^0.3.0-alpha.3","chameleon-loader":"^0.3.0-alpha.3","chameleon-miniapp-target":"^0.3.0-alpha.3","chameleon-mixins":"^0.3.0-alpha.3","chameleon-template-parse":"^0.3.0-alpha.3","chameleon-templates":"^0.3.0-alpha.4","chameleon-tool-utils":"^0.3.0-alpha.3","chameleon-url-loader":"^0.3.0-alpha.3","chameleon-vue-precompiler":"^0.3.0-alpha.3","chameleon-webpack-plugin":"^0.3.0-alpha.3","chameleon-weex-vue-loader":"^0.3.0-alpha.3","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.3.0-alpha.3","cml-vue-loader":"^0.3.0-alpha.3","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.3.0-alpha.3","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.3.0-alpha.3","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.3.0-alpha.3","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@0.3.0","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-zlL+JZ0/tzbC3iBcVmkl2BHoa8tvqeX9HR7Ynx4DePJWkHNtU9QxPdtZodajnxZxEwokcp/KwOX2yOwJ+MdOgw==","shasum":"e29513502558c4ad556c65ee3c9eade2dd21d4eb","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.3.0.tgz","fileCount":147,"unpackedSize":1556882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcvrqDCRA9TVsSAnZWagAAh98P/ixZMYnNc3/PImUD5nP7\nOlHQc87EC+OpHDFc5J+oPC6WxM3cyNgXXuYRNThXf1H3kl402BeGLYtuPAVx\nzGpsPsiqESEYN2cBNkWynmgkPu2z5RpEWvEfMgyiNb4ROfCsjaGbQg54Rd6f\nObLs2w6gzy4jUDKlxp4KQ9FjV1FDJKp3g0WpAfLTOZ4l09lJRlg4Xf6FwTbP\nw0BoHebe3A3msj0RPDW/G/jTmZbRhQKWldR9tUWkPDqUBUfVU3xwOrL27+h7\nzDDYwpf2mf2aL0B+7WZQ5ISM64Xxc8skenFuGxfA2rtMp3TVe0WKbS+MkuqW\nolMdYhGaDSm0Q2sMaGfg8lzKzkyooYi5HCzIaVCK0ZkQRworxGZCzMeyqddB\nKUhBdMIdW3be/sg9dSSIOVBp04LF4pSdwyYjXEfuzppzsYyQ8eajVXNFF3EY\n8bvXjqKn/dt3wa9F3RqU6/TxKerVnMjJfb0qwZGOSt4jYxoU4n7J+WPn1Fkq\n+XMhUNV7qvnKl6MWSIKIZGmCKzAdDdEXkiHS6JYzxzHv8FX9rvMYHs+A1iMq\nm43s9tJNoHiWSH7TBgMqz6sCmLePNIT4Nks3Mqw4Wc/Tk5Zvbe24gQ82yZpk\njS+ddRTW+omAQ98kBg0AIx3aDvpeDzCe47B/2fhfTH9YgzvF66H6kj/M56mi\nBNba\r\n=IVBT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFs+ySv3qWUhhtNJOr4jFLn7OMSbtgfEPr3ieKZvONQTAiAf5g9KWadbRp+/s98ClPJFp2IC3a5NIDrvITI9A+AqvQ=="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.3.0_1556003458447_0.7897906073010199"},"_hasShrinkwrap":true},"0.3.1":{"name":"chameleon-tool","version":"0.3.1","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.3.0-alpha.3","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.3.0-alpha.3","chameleon-dev-proxy":"^0.3.0-alpha.3","chameleon-errors-webpack-plugin":"^0.3.0-alpha.3","chameleon-linter":"^0.3.0-alpha.3","chameleon-loader":"^0.3.0-alpha.3","chameleon-miniapp-target":"^0.3.0-alpha.3","chameleon-mixins":"^0.3.0-alpha.3","chameleon-template-parse":"^0.3.0-alpha.3","chameleon-templates":"^0.3.0-alpha.4","chameleon-tool-utils":"^0.3.0-alpha.3","chameleon-url-loader":"^0.3.0-alpha.3","chameleon-vue-precompiler":"^0.3.0-alpha.3","chameleon-webpack-plugin":"^0.3.0-alpha.3","chameleon-weex-vue-loader":"^0.3.0-alpha.3","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.3.0-alpha.3","cml-vue-loader":"^0.3.0-alpha.3","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.3.0-alpha.3","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.3.0-alpha.3","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.3.0-alpha.3","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@0.3.1","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-BzDb4imIswgstTGNo2pByqgqN/p69By4GPO+Ja3U+ThnNStV9B+jjIcIotqS8DIwFyUb116dDI78V4uwTB0jqw==","shasum":"bf5b1099db7300df418aec06efa8809dfc4d1096","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.3.1.tgz","fileCount":147,"unpackedSize":1556956,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcvs4fCRA9TVsSAnZWagAA4tkP/Av9qa3B18ZzBjx8Ewok\nrnYRLYxAv/vDZ7PSUPt+bUjkc1C75IDFuOVTZ0LmGq4uEqrnyNq8paVXRjqm\nNYcot8gf1QBSdnzbaoLZkye8Lo17sZyzOs236KiQ3eS2RDRW4iBuxOS5XQBl\nDwVuzTVOcCXUGrKeUdjtL+UqQiF2OgnmbJWTNe6jTBtqzh/ljOZT5muGYqwo\nw/XI5bY6EAFFeGWV1gfhDuMhe4Qg5ADtqjPjelfQkYpY6ExP6PUQ/c8qRLci\nFPT37aJNf1lFkQy6BSAXZm3JIjF5ucblO23V73bo3HbpbhB9x7+RwqoenQjb\n3UFBS5oCSmjFw7S5rUQESElWknvDOxyso1XNn/1JNHUnp/SG6B7p8tEEvtYz\n4A1Bfyt5ODXDCQoeRIZoXi3onysGURvlG4JhKIgKbI5YikiltT1Xhts2sNQP\nruZggxOcLyDMclo1lKaFtv1EFLXldeKJSMMY6zfZD7vkNfALjVFpN1gwg6mi\nYvEIg5OkGuOwuOBdSHBCRURAcvM7XkdUlK21sj0I4nW7fQC9oeACbQwYka+3\nlNJZKDfiLxzwEF1aNvqb7XBHc2i05PJwLQytH27Q5chGLVD+9zL/yBqX3CW3\nkSLkUVN5Ek6c+qTV8lWyND1Wz0ps02kp/PgJ6W+PY+4JPyLblX1WNNVS7yk2\njupG\r\n=V5cG\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGOndu7zxLGlxFJWI9vzQEpJ6ybMQzpJukMFVVqJLmmQAiEAtfnvEv4cx8BJ5SLvljdOjE2KG2zCpMKP8MsmMIJiJl0="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.3.1_1556008478877_0.9197349019651784"},"_hasShrinkwrap":true},"0.3.2":{"name":"chameleon-tool","version":"0.3.2","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.3.0-alpha.3","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.3.0-alpha.3","chameleon-dev-proxy":"^0.3.0-alpha.3","chameleon-errors-webpack-plugin":"^0.3.0-alpha.3","chameleon-linter":"^0.3.0-alpha.3","chameleon-loader":"^0.3.0-alpha.3","chameleon-miniapp-target":"^0.3.0-alpha.3","chameleon-mixins":"^0.3.0-alpha.3","chameleon-template-parse":"^0.3.0-alpha.3","chameleon-templates":"^0.3.0-alpha.4","chameleon-tool-utils":"^0.3.0-alpha.3","chameleon-url-loader":"^0.3.0-alpha.3","chameleon-vue-precompiler":"^0.3.0-alpha.3","chameleon-webpack-plugin":"^0.3.0-alpha.3","chameleon-weex-vue-loader":"^0.3.0-alpha.3","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.3.0-alpha.3","cml-vue-loader":"^0.3.0-alpha.3","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.3.0-alpha.3","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.3.0-alpha.3","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.3.0-alpha.3","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@0.3.2","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-zpZOeFkFrCxw0Aw+1lUYirexr/nonPzaNSjXXS7rVo8wcOtkEGDEZb/rOS6BCHDXzmXkEfCOehD5Jy9N7XRWvA==","shasum":"c8aba2c1f28f124e57ab4441f52891e57c0344e9","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.3.2.tgz","fileCount":147,"unpackedSize":1556881,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcvvZkCRA9TVsSAnZWagAAumgP/2kJKtjaWKd0NtDwA2BI\nmdT7Y+JRBB5qQN53qFda6AE8kBg6xTZwhWfSbanFbT+6A0PrdhTkwEX11ton\n0+3L7LNqUNavp8JUHUdNvq2FmXm+Sj0RK+I7gi4nqkRSZJ3wgpPsGLq0BdVQ\n5LaRY2Bhqv34ZEnnP/H4GK5KA56gSYlTBnyWGpgxaYKIzzj9lEYawvhRr2pi\nNbxxsX2faVKtbt2mtShkvU4/Ttwu6kjdaBeV1hfwOnoofpaN60fpoGSSjcdf\nm1pOEPIt1LzRCJEEGpxP6zEDRL7IY7oKWpJaGV88s+t7LZGNoLhCRa02BY7U\nbXsMBAuAueYV0e69nE6I448LMCuDA8uFhKZZCWG82A8xCVFiLGCTTZrJ0306\nCHQga0PjYWBfjop3YSgOfNXkyGqsfsvAJdS6gCLkhtOyPls1Ef9g9pHsEg2J\neLflQbaz1S5JV/t7bZyQSkF1qKBgqhDc8yaTtU+rRg+A5azMkxi3glQ7WrdB\nwtYlRAsazc/g5RtP+UaJ2myIjaHfMpZLNCT0uNpy7TLf+3rzW/6VK0ZMILU6\nr459bG6Ua1TiaIZQd6Zreks+PcFzxjzxXu0L8Qrhxp0Viele/L/zGvbGFAYy\naSfR8F9vKJ4jDnvUz5IdWApMPQ/cqNACo/3mbXcCzCKPVPmNh2yANaqx57Tf\nhuuT\r\n=2XAI\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDUXn0gycvrUxi9iqtdoTTFStY9xk3YuhE9N0BXF2V99wIhAOw+dIIHtnUtuQGK8sZdPlC0KGycFMBML0S3dKhIhBvb"}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.3.2_1556018787810_0.1252129189866853"},"_hasShrinkwrap":true},"0.4.0-mvvm.5":{"name":"chameleon-tool","version":"0.4.0-mvvm.5","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.4.0-mvvm.5","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.4.0-mvvm.5","chameleon-dev-proxy":"^0.4.0-mvvm.5","chameleon-errors-webpack-plugin":"^0.4.0-mvvm.5","chameleon-linter":"^0.4.0-mvvm.5","chameleon-loader":"^0.4.0-mvvm.5","chameleon-miniapp-target":"^0.4.0-mvvm.5","chameleon-mixins":"^0.4.0-mvvm.5","chameleon-template-parse":"^0.4.0-mvvm.5","chameleon-templates":"^0.4.0-mvvm.5","chameleon-tool-utils":"^0.4.0-mvvm.5","chameleon-url-loader":"^0.4.0-mvvm.5","chameleon-vue-precompiler":"^0.4.0-mvvm.5","chameleon-webpack-plugin":"^0.4.0-mvvm.5","chameleon-weex-vue-loader":"^0.4.0-mvvm.5","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.4.0-mvvm.5","cml-vue-loader":"^0.4.0-mvvm.5","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.4.0-mvvm.5","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"^0.4.0-mvvm.5","mvvm-file-loader":"^0.4.0-mvvm.5","mvvm-pack":"^0.4.0-mvvm.5","mvvm-style-loader":"^0.4.0-mvvm.5","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.4.0-mvvm.5","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.4.0-mvvm.5","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.4.0-mvvm.5","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-LCy34zX4oY9qUqb0f7a6wpVGn/iy1Bu1ituVRX6j7VqwbAqQXawkq2EFDkR392JmgST1TDPn3xkwFJp5p3ANIA==","shasum":"5dbb933bf17d6109180b7c7eda83fa93728f2cb1","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.4.0-mvvm.5.tgz","fileCount":152,"unpackedSize":1585827,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcxXMbCRA9TVsSAnZWagAAQkgP/jQGhYpUvNnO59zn7CVs\nyNIiteckT6oFdG91elYcEKZkePo0WcuVqIriVttiBa8ipRvpxmqEMs6kg+9N\nv5AEIOB9EvDlzMK7RAdppFuZwIE6UzR0U7ReRC8/r7K+oJZkkiheB0JidWZF\nuXMlnvoZ8UTZDGdJy+/iHhEkvKQPZVRM5zTW4LkTCIxS0NBxPx0yfXolnvdF\nuSYXDh5hP8kkdIcnXPUIkLqENEYVrlvrvzk6Q2tZibS4S8oXNxH/CX0QSmUt\nOU/LAhjAe+dcWUDhPG8q0OYgQg1f/gHJr+PfHTTVLN7QFtPPM+gAKc97r131\nuTjbM06ZZTUtdr+eH8PtQy6SIf6rLJ0u8ZOs4zWKZGbxFSS4sb9z2lAaA8J2\nM7rX13ZcLfrc7EKGfrSOncCsCdLGfTNlPaC0tbYK4idlWcGOnrIMRNQzbsM/\nQe+pn+LLXl4LapGwgACEFlqr9cxxpHFisYhhBw7endEZ2oDIQsZoVPJ2qxyW\nO8wySNCITmQLalqoNO+ks75/iB7qo94pAxf6TOdv3wLkK+wN7VhXrKp8w5AB\nZYlP7iWpuyQs3ahG0MEni148Z87X+R4HpwIOaT0Fpy/X46XY3zb20BO4xOrs\n1YwBi8GGyABE+6/UHmClNSxL1NIvQmhTxyVSil3sw0z1T9MbRR+r6rwMwt2z\ncZAc\r\n=Tolv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCeM+qO72S25dtUr8StNv+HtyRN4Ud7cCQu9Ir91to5GgIgRXK3orGIhJs0PeksejV8A9MkKoU0ff2W4CD9obNk4W4="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.4.0-mvvm.5_1556443930576_0.5014099997273764"},"_hasShrinkwrap":true},"0.4.0-mvvm.6":{"name":"chameleon-tool","version":"0.4.0-mvvm.6","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.4.0-mvvm.6","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.4.0-mvvm.6","chameleon-dev-proxy":"^0.4.0-mvvm.6","chameleon-errors-webpack-plugin":"^0.4.0-mvvm.6","chameleon-linter":"^0.4.0-mvvm.6","chameleon-loader":"^0.4.0-mvvm.6","chameleon-miniapp-target":"^0.4.0-mvvm.6","chameleon-mixins":"^0.4.0-mvvm.6","chameleon-template-parse":"^0.4.0-mvvm.6","chameleon-templates":"^0.4.0-mvvm.6","chameleon-tool-utils":"^0.4.0-mvvm.6","chameleon-url-loader":"^0.4.0-mvvm.6","chameleon-vue-precompiler":"^0.4.0-mvvm.6","chameleon-webpack-plugin":"^0.4.0-mvvm.6","chameleon-weex-vue-loader":"^0.4.0-mvvm.6","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.4.0-mvvm.6","cml-vue-loader":"^0.4.0-mvvm.6","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.4.0-mvvm.6","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"^0.4.0-mvvm.6","mvvm-file-loader":"^0.4.0-mvvm.6","mvvm-miniapp-loader":"^0.4.0-mvvm.6","mvvm-pack":"^0.4.0-mvvm.6","mvvm-style-loader":"^0.4.0-mvvm.6","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.4.0-mvvm.6","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.4.0-mvvm.6","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.4.0-mvvm.6","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-dvbVeqGAKtdrNsQ0T1Hnlb8XfZU1Ys8QQjbvdcxB14N3SpPpv5qBx1tTNcSaj2c2zuKzU550TFtzg2FOHj8eCw==","shasum":"6be7902398f19432ca05a8d5b092ab1c4fadcffc","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.4.0-mvvm.6.tgz","fileCount":152,"unpackedSize":1585959,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJczq3gCRA9TVsSAnZWagAAwXEP/RmN0LaUzYfQbT4dvGrn\n6gZgQP/2mkNp9kKI+ewSM1VbjNa1O1MaIP5uZ82OfeBMI6GTaXRw2qHry2wK\nwD8comgKsxR1O11SER7wrTkPw+WDy9sds/PsejeDLXDuKgNaYu2bcVLTiEx5\nruM1YbXqnyHzzxwXg42CPyN/ILcU8xynd15kPGtoS90wtytgQj2pBPYnz7PI\nVhoE24ouF3JXw6+tfyjgYXzgUnx3jE6T3JVHpKL2tbevxeJfdF4nqVpZXhiK\n6Lp/d4wgBAxLhG5WOfDCczb3F+f2D8vGzo0qT3vrB/Lq1LRcfXEzspXeisT5\n0VxCUv6EAcuNyl5UV+hs+sD0ZsAnSoFFYSyTMicnwyqBf9vMRwP3EX2l8FSf\npkKAd2v5b8WiXb9zYULI81Nib8hdM2uM2zTiz7+oBfBnQ5PyXnrvdjZ4BXfa\nwsZUf82O3hJn0TzUjjSicdaHCZ8C2Cc7OEAB/PLtomNeeBLysKQz5G9xijlE\n9OdPuGSH9ScY9Z2j4MTqFt0GHi+tzU5uwV6XDSii4xEH8stli0xZYsivwOYC\nW5js/znkBuW/9d/pany+Yvx9wq4W7peGadfqhgaSC83/3ujftieX3pJwV9rm\n38K9S//xvEMaMHzs84ab4PG+ZYAXPCkcKhqqIfWl17hyfVBev+yItI1Y9L5S\nM4zE\r\n=8ZuB\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCsVEhOntutl7FZFsoV9Pm1+OU+GRjzqHu9oAsQzpfTAwIhAKS7BAhsFbKUN+JirydBsGT3w4pcJ7i3VIsgnzs1DB44"}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.4.0-mvvm.6_1557048799957_0.46219486166042056"},"_hasShrinkwrap":true},"0.4.0-mvvm.7":{"name":"chameleon-tool","version":"0.4.0-mvvm.7","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.4.0-mvvm.7","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.4.0-mvvm.7","chameleon-dev-proxy":"^0.4.0-mvvm.7","chameleon-errors-webpack-plugin":"^0.4.0-mvvm.7","chameleon-linter":"^0.4.0-mvvm.7","chameleon-loader":"^0.4.0-mvvm.7","chameleon-miniapp-target":"^0.4.0-mvvm.7","chameleon-mixins":"^0.4.0-mvvm.7","chameleon-template-parse":"^0.4.0-mvvm.7","chameleon-templates":"^0.4.0-mvvm.7","chameleon-tool-utils":"^0.4.0-mvvm.7","chameleon-url-loader":"^0.4.0-mvvm.7","chameleon-vue-precompiler":"^0.4.0-mvvm.7","chameleon-webpack-plugin":"^0.4.0-mvvm.7","chameleon-weex-vue-loader":"^0.4.0-mvvm.7","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.4.0-mvvm.7","cml-vue-loader":"^0.4.0-mvvm.7","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.4.0-mvvm.7","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"^0.4.0-mvvm.7","mvvm-file-loader":"^0.4.0-mvvm.7","mvvm-miniapp-loader":"^0.4.0-mvvm.7","mvvm-pack":"^0.4.0-mvvm.7","mvvm-style-loader":"^0.4.0-mvvm.7","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.4.0-mvvm.7","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.4.0-mvvm.7","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.4.0-mvvm.7","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-OAMsUWLvH8TsXaKCvv6StchAjPuEtawPJuIhfPnBRMWkkpMDfxEqN6i3Z9P0/lbAROhIX0ljbHXn/JAiU2hkgA==","shasum":"e70d7713f70c87802e62df0bcdd701f7be43a043","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.4.0-mvvm.7.tgz","fileCount":152,"unpackedSize":1590419,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc07cNCRA9TVsSAnZWagAAU0sP/1a0+pe1dVtaUFJ3E+2k\n2+RD6TkjrDx1qsbhVLv+3MnLFCIVEr/U653c6/xc+kTdsL3QN3FO9wdsgdrj\nNtvohHCuyjRMQJHOxFfvsSo3YTXLpYQFsyfvSeO60cM+omiJWyQcPPfrD93M\n+4l6d/1zeA+Ufli65OJODjW8Ix2yxXNIASFZnn7Q/aoMfc8jY1OC02vxbF0A\n25Lf94Jt5sVLZIpDBPrWQbvSZQCpylw43oZFTaHmhn86H2r10fFfIsZ8vUHy\nCXRo1gab/pcEadanuNavUOSWMiI+pxOmcFDsYpElpfjYfoxmJNTj2Q4wB9xA\nnBGHYt6howCGuoU2Yaur3vQ4WNA3WT5jW/EnsulFrEbc1L0uc5LQbWQp0QAG\naLdTs6rkIKlbsURD2ibyZnLaXxfD7nZGbCROtG3sPaQmymx9l1IcITndQ8Xk\nKRlkrX/UfBkKDNMwtAAAVSpUg32dlL7qhD7Otyqtuv3TblL15DN/qGYVY5RO\nikJz2cQ204aBmif4Q79VgCo/8sxUNTFh6JBGzdtDrO1e4ftMXPH/lgkokE6c\new9OYmtIKfEIPx1hmSNq1J05HOuN2/jEVDZmODjbeLM5r41knFeBndNxsxmJ\nbH3V61ID9FaMdZBvwYt7FAcwGRY9ThmhnPLUXLc7BDmcw+6hMxObzlQ1LrGw\n4y21\r\n=c4vM\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDfJjuJ4Q1wCD2A+poQN7g04WyjoPZ3Mm0JfJpm0wPVOAIhAIAnfGw4E9/1N5Mfr81b5kphSHBHzpuv7IiHhCJGJxv+"}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.4.0-mvvm.7_1557378828629_0.8974290908926894"},"_hasShrinkwrap":true},"0.4.0-mvvm.8":{"name":"chameleon-tool","version":"0.4.0-mvvm.8","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.4.0-mvvm.8","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.4.0-mvvm.8","chameleon-dev-proxy":"^0.4.0-mvvm.8","chameleon-errors-webpack-plugin":"^0.4.0-mvvm.8","chameleon-linter":"^0.4.0-mvvm.8","chameleon-loader":"^0.4.0-mvvm.8","chameleon-miniapp-target":"^0.4.0-mvvm.8","chameleon-mixins":"^0.4.0-mvvm.8","chameleon-template-parse":"^0.4.0-mvvm.8","chameleon-templates":"^0.4.0-mvvm.8","chameleon-tool-utils":"^0.4.0-mvvm.8","chameleon-url-loader":"^0.4.0-mvvm.8","chameleon-vue-precompiler":"^0.4.0-mvvm.8","chameleon-webpack-plugin":"^0.4.0-mvvm.8","chameleon-weex-vue-loader":"^0.4.0-mvvm.8","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.4.0-mvvm.8","cml-vue-loader":"^0.4.0-mvvm.8","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.4.0-mvvm.8","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"^0.4.0-mvvm.8","mvvm-file-loader":"^0.4.0-mvvm.8","mvvm-miniapp-loader":"^0.4.0-mvvm.8","mvvm-pack":"^0.4.0-mvvm.8","mvvm-style-loader":"^0.4.0-mvvm.8","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.4.0-mvvm.8","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.4.0-mvvm.8","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.4.0-mvvm.8","_npmVersion":"5.6.0","_nodeVersion":"8.11.1","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-+CaTGrvltRmm2cwJTyOhelUATclxkVK64I/61a7PlSgzok74sKlnpbUc/iq46YaCO3x4Brz4jkHwUEn3bQjzPg==","shasum":"8f10d47bdd07445d1a4f801e5ef36ba966f466f5","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.4.0-mvvm.8.tgz","fileCount":152,"unpackedSize":1588834,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc1ERjCRA9TVsSAnZWagAA8SsP/1WWz8XK0D3b4fAWZxxs\nENqxtsjlOrRY4N5ZzfDyclay5SIq2ESe3ongSnPszX/cX62zwG7NnfKja/GI\nPUSCgNLKTrQopS63Yr2UqXFXszZyU5yB1pB084EJIo/OpDLHq2xC5XqgETQ7\n5Uy17THg189hAA7bOatKZxRrbyAeTFF0wz675BJC6m3R/3nW2lRhfsikc7jJ\n3uATezgZbcJuvoLXQitcuCgXYPFlGCSKUsS7yp13wMR0+zr7d2F+Rw+NvAYC\nNvTGmkVcXMoaGdJ1NlFhUVxJBvGhX2FdpLiZM3CkFOkG0WGI7e5x9f9kIG5W\npEb4aJpkHhbSjLN7aVks05SLjcJp10zS5dOyGixqLGxH+8ujDXmB6O5GzmlY\n42K4/A+9LYSMfXLV/9lfYgSa93C3wb63IxZBdVoMRhrsNDgrNAlfStAp/snW\n4dRcpDYDTJCzFraGfvgd8qK7DUmo0qDReB27gopDQK1xXFLtF/crKxffuXJ9\nnlMt5kLI+apZ2OcQjwNwUl68jZ8MevwS8o/l0tc/EWEbHrRzadGnoeUp15MA\nXtHJ9HpUHqz00ixEpQll5rbXW0MEWIyF7nuBHM/yZwmnre/3QPlY+h3Sebyp\nSFTnnm+h2XTf0tXWEvi/YJ/6/UsOnYiiYyugB7GE8YBcOp9sByXMXYMSQXjF\nX/Wv\r\n=hy3c\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEMCIEriNO+pyfPxHT3GQP/u2YRP1Xc5jzDEQrwB7UatVm1DAh8NKItB32BYPRdg91MKgy99WG9jCWIJwN6WFISO9Y6i"}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.4.0-mvvm.8_1557415010968_0.11190682523538853"},"_hasShrinkwrap":true},"0.4.0-mvvm.9":{"name":"chameleon-tool","version":"0.4.0-mvvm.9","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.4.0-mvvm.9","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.4.0-mvvm.9","chameleon-dev-proxy":"^0.4.0-mvvm.9","chameleon-errors-webpack-plugin":"^0.4.0-mvvm.9","chameleon-linter":"^0.4.0-mvvm.9","chameleon-loader":"^0.4.0-mvvm.9","chameleon-miniapp-target":"^0.4.0-mvvm.9","chameleon-mixins":"^0.4.0-mvvm.9","chameleon-template-parse":"^0.4.0-mvvm.9","chameleon-templates":"^0.4.0-mvvm.9","chameleon-tool-utils":"^0.4.0-mvvm.9","chameleon-url-loader":"^0.4.0-mvvm.9","chameleon-vue-precompiler":"^0.4.0-mvvm.9","chameleon-webpack-plugin":"^0.4.0-mvvm.9","chameleon-weex-vue-loader":"^0.4.0-mvvm.9","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.4.0-mvvm.9","cml-vue-loader":"^0.4.0-mvvm.9","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.4.0-mvvm.9","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"^0.4.0-mvvm.9","mvvm-file-loader":"^0.4.0-mvvm.9","mvvm-miniapp-loader":"^0.4.0-mvvm.9","mvvm-pack":"^0.4.0-mvvm.9","mvvm-style-loader":"^0.4.0-mvvm.9","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.4.0-mvvm.9","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.4.0-mvvm.9","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.4.0-mvvm.9","_npmVersion":"5.6.0","_nodeVersion":"8.11.1","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-VV+6shohu0giTNBcHaeYCMVJFJhDDqk/KUtRhtkD1p3Tz/S+fThaMWcexd4IF5nnN0n8Uigj41G6sIQmkre6LQ==","shasum":"16d2af92f8dd59013b14e972ea335df82a6f3fc8","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.4.0-mvvm.9.tgz","fileCount":151,"unpackedSize":1448278,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc3V1/CRA9TVsSAnZWagAAD4EQAIUWlRlN0HVzK4Axc2RA\n/yE/JpiXOQvQBbP72FVVllgkUHotCj+EYMcs4JOg8f0oWUAtxSdbj0NLvo3N\nG6fglMnmTi8jgji+o7KyHHTDU9jPWnCrSTU6HGmAtVvML36yy18uJOxIWd6P\nZ/21fIWptl069sY4dxtYiSpXbmMGQzpxf7oDe9Lo7rBoRRQbrIAuwUhcsDOU\no0kVydvMNIvuj+j/BJVUO8VrgvCPW7RChG0IDbml1B/3lunZcKuvQIlO7caa\nP3b3fJznqPvC7Cf4B4YHwkCejlmNgWgfvpPL6BhjFL1xLBBub0h49NM5e2A1\njJozKCWAfeuW09YpQuqd+ytaWqSCa8f5VeXxGfCxDg1o4jLUbZ6k3s3cA2HS\nOdJuBbXh2GspQegcIOA15N2paqOco8RjAzqXRL6ue+sQX+zsapE+pCwDuZV0\nlOBT/rBGQC3OdtfnPg+tSyKOgnv4lR4QfWyjuc9iSkAGQCd+Hb+zmhTjA9JZ\nikrk/OvrUysX1Dq+3GvkA9Mmospqr/WwgtG5ILQyYP5Eww6yUDZfgbktGD1C\ncPY8qhmcD98toKkFQ4BIE8tkrS22HebbWThH3CuQBAMDACnDj6WOiZwfk+sp\n0hIc7spyBvStxBfTJgW96JR/0AdexiP0XzwIcOmbVvYtKl/jy75oXGbsZ/ms\nxKtR\r\n=9of3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8VU0XWJQydXR9PCQfpSTIe0oslHNyJaWrd1vLXj3A5AIhAOvWjTN+Xsk9PoC59iXtbEBKFl8EMEfCWl2n/R86Pfaq"}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.4.0-mvvm.9_1558011262437_0.4946769422680797"},"_hasShrinkwrap":true},"0.4.0-mvvm.10":{"name":"chameleon-tool","version":"0.4.0-mvvm.10","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.4.0-mvvm.10","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.4.0-mvvm.10","chameleon-dev-proxy":"^0.4.0-mvvm.10","chameleon-errors-webpack-plugin":"^0.4.0-mvvm.10","chameleon-linter":"^0.4.0-mvvm.10","chameleon-loader":"^0.4.0-mvvm.10","chameleon-miniapp-target":"^0.4.0-mvvm.10","chameleon-mixins":"^0.4.0-mvvm.10","chameleon-template-parse":"^0.4.0-mvvm.10","chameleon-templates":"^0.4.0-mvvm.10","chameleon-tool-utils":"^0.4.0-mvvm.10","chameleon-url-loader":"^0.4.0-mvvm.10","chameleon-vue-precompiler":"^0.4.0-mvvm.10","chameleon-webpack-plugin":"^0.4.0-mvvm.10","chameleon-weex-vue-loader":"^0.4.0-mvvm.10","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.4.0-mvvm.10","cml-vue-loader":"^0.4.0-mvvm.10","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.4.0-mvvm.10","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"0.4.0-mvvm.10","mvvm-file-loader":"0.4.0-mvvm.10","mvvm-miniapp-loader":"0.4.0-mvvm.10","mvvm-pack":"0.4.0-mvvm.10","mvvm-style-loader":"0.4.0-mvvm.10","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.4.0-mvvm.10","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.4.0-mvvm.10","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.4.0-mvvm.10","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-BDOPfugaWly7ysH7DAzTSUH/0Joroy/hXU/FGBJNxc4jltmJ47Yq/1c0st+QCupsHkTrx7CWG9hM/mH3LD7WWg==","shasum":"5ad10d17203771ba40260193039804f1c99c2730","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.4.0-mvvm.10.tgz","fileCount":96,"unpackedSize":907406,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc441QCRA9TVsSAnZWagAAk3QP/iLERlW1/STxZDUvMxAo\nuR2Sb2VufuXRgjkvHNhZESwcd/wAhXQsZbTEmsZTc3SR3WXp7HdWL7sm/jVt\nrSAD65OwYjMrOoT6pOOmiVYa1XDr6U0Sn/vweYS7MBd7GA4OkZ6jk4/vxWjH\ngXlyvadvzt9gBWW8/DComSZjvL5YITLM2WH1XiLCcwYHRh7e7iPhF+eFFCO/\ncpSNgsbXWWlUZ0RnX+3/zp1U2zUcwCHMpfvqblL8AWpOak87yxnTDzY1NXOz\nFGst6R/8wputbyBQdR8O8qvFav/j8rrmj1r1MFsw+6V0cwvb28M/RZ5WAH9B\nv+ZzbHsCb8A3G89w2One3huyoaHEroW8VINviueVM9xC5ogXD0MslLw2wPQI\nb86gXaJUWrO7STQU+0KVK8Pfck8buiB88lpTKcwOnJA4V1zD3IFfqr0U1Z0V\na4yPVUoMEdXkoan5LE6JKJ+AKt2DT6wYgzr5tjc9soX0hYthtuZ4UxAUQKIE\nQRpQ5DbAAm9UXO5dhxaByVecfKpQeXei6wuVtKGersr8ZJuX1gVZDlcLlJTa\nNKoPSHK89ZRQ5DkhoIlUYwtQtJwyaTQY7AGSjEr31l5brvsBmWk0/+FA/+sR\njpMAEPtuPodeqljdP3gzMfltg+PHRUquXCovVfd6uwlQjde/xk/KW2z2cTp+\nZKsQ\r\n=M95S\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8H78C2CaVLNKWpHjUWhE7Ahi8oRVcAmSqwdly50gm3wIgPBbm0hnftdAyPcV9sffMNqXWI7owrWm7ZQB3e6JYExg="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.4.0-mvvm.10_1558416719407_0.30296022052044846"},"_hasShrinkwrap":true},"0.3.3-alpha.0":{"name":"chameleon-tool","version":"0.3.3-alpha.0","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.3.3-alpha.0","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.3.3-alpha.0","chameleon-dev-proxy":"^0.3.3-alpha.0","chameleon-errors-webpack-plugin":"^0.3.3-alpha.0","chameleon-linter":"^0.3.3-alpha.0","chameleon-loader":"^0.3.3-alpha.0","chameleon-miniapp-target":"^0.3.3-alpha.0","chameleon-mixins":"^0.3.3-alpha.0","chameleon-template-parse":"^0.3.3-alpha.0","chameleon-templates":"^0.3.3-alpha.0","chameleon-tool-utils":"^0.3.3-alpha.0","chameleon-url-loader":"^0.3.3-alpha.0","chameleon-vue-precompiler":"^0.3.3-alpha.0","chameleon-webpack-plugin":"^0.3.3-alpha.0","chameleon-weex-vue-loader":"^0.3.3-alpha.0","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.3.3-alpha.0","cml-vue-loader":"^0.3.3-alpha.0","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.3.3-alpha.0","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.3.3-alpha.0","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.3.3-alpha.0","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.3.3-alpha.0","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-ZJ+5Ajf6yo6GDbA7lHN6v0VOfBC6TaXjmYDEQHzSq3ZPWgq8kjCokL3flp22rPvYTAs6XAZetFVDk9/Ye0tN0A==","shasum":"40568733d8bfe6f57a8631711a8d977a12ebe198","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.3.3-alpha.0.tgz","fileCount":92,"unpackedSize":885545,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc4883CRA9TVsSAnZWagAA1YkP/RXOh93soKNAq2Wmot5M\nvdjI6WUTVRnu7BY0OrFahhaAjm1q59na+4S/wGRpyEGt2dVNH+gsmHsSQfYe\n+m2bItBwa6pFgNQ7w5YRjqZOvJ59RiR9XwRZfArV7dQkvhRQRyMU+7+Pl7hb\nDcmzT9gKJ5DpMQYZdx0gnIZ3dLJ8KFHQt9P2vA0TvD4JPBVsJegzffbNBWeZ\ndx9hNywj9kSCPIGunnffbhBkNkB5kphFP2c3Y5UO+5QyUJGsHbHaDC1Wzduq\n3pspLJRwne/i+VlnKUBNlwZprOfej5/GnnJHbmKEhU0GQL8pj0JCc4+dOS0F\nEiMj5SEx8X3BZ4rskIifuG3CpFTXgafzECbafia3DaHTH6u95LXo8qkksw8B\nYXyO6SxkpRngiY413jCHMja+yT+0x+ADusaNMLzeyRWXvs7TR4EvxeJuIJ/1\n0tmF+QxxL/w6YJkOpjjKFTiWjAHCf9UqjFEMgxiboIhWxwK74LeYYcp4paBY\ncmWJMEeSZ+tc2BYVGOpVUNge+A25lShVhHO9I8ZFMmNcDEuWFykJ8ZutzbGe\nzXBTbFZSB3sIHlc7w3KQT8PBzvR85uIK96T8L0DwrVBW0Wj7SZv8hqC6BcEB\nykHGGKo3zdWwe2nGutPev6CA/XXwJrqimvvgdTrKU3ANOGh4xp3uL5dfoKtn\n6mEt\r\n=W1X6\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD00rXqhejqEhevZpoK+O5AXt6qVo+I5nmoImhNj7aKTwIga25SpIQpG2BM+Fef8nBbN3zy2xMdIwaWUPyYvYWM690="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.3.3-alpha.0_1558433590344_0.47135504494973524"},"_hasShrinkwrap":true},"0.4.0-mvvm.11.1":{"name":"chameleon-tool","version":"0.4.0-mvvm.11.1","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.4.0-mvvm.11.1","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.4.0-mvvm.11.1","chameleon-dev-proxy":"^0.4.0-mvvm.11.1","chameleon-errors-webpack-plugin":"^0.4.0-mvvm.11.1","chameleon-linter":"^0.4.0-mvvm.11.1","chameleon-loader":"^0.4.0-mvvm.11.1","chameleon-miniapp-target":"^0.4.0-mvvm.11.1","chameleon-mixins":"^0.4.0-mvvm.11.1","chameleon-template-parse":"^0.4.0-mvvm.11.1","chameleon-templates":"^0.4.0-mvvm.11.1","chameleon-tool-utils":"^0.4.0-mvvm.11.1","chameleon-url-loader":"^0.4.0-mvvm.11.1","chameleon-vue-precompiler":"^0.4.0-mvvm.11.1","chameleon-webpack-plugin":"^0.4.0-mvvm.11.1","chameleon-weex-vue-loader":"^0.4.0-mvvm.11.1","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.4.0-mvvm.11.1","cml-vue-loader":"^0.4.0-mvvm.11.1","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.4.0-mvvm.11.1","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"^0.4.0-mvvm.11.1","mvvm-file-loader":"^0.4.0-mvvm.11.1","mvvm-miniapp-loader":"^0.4.0-mvvm.11.1","mvvm-pack":"^0.4.0-mvvm.11.1","mvvm-style-loader":"^0.4.0-mvvm.11.1","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.4.0-mvvm.11.1","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.4.0-mvvm.11.1","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.4.0-mvvm.11.1","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-zgqmMWgDcODCCuM0H04WiN9PBHNPLDD0goLhCbAo9MtSmzi48aqDV8Bqo3k2DqYW+7xwu+Kq4EybwDnKoyxKOg==","shasum":"d253d2e36696111a18f937ec57707ffa4cdcadf7","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.4.0-mvvm.11.1.tgz","fileCount":151,"unpackedSize":1495741,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7J7DCRA9TVsSAnZWagAAnOkP/1Ae1DZ77GId2bdyxMbz\nkm/6E8TGPUmWHLor0coHSrTZacosGhffiS4jwbtTOep2Q+L3Lcd7zcr/IwA6\n7aKKe9fWXVbifhwi66hzjWkyqXC2AK2FxC31FVDVcUCeL1PSlBedWy/tBmNJ\nORJ23taG9VzG4+Z3bswE3dt5L78cJQKOFPp9g8V7dDLOZlTd8TqBUhAVN5au\n85xf7ZiZ7pnTNtUoAchTN9h3B/Hvs2vX0wOgVT6E0RQEU33G3NtXxoGbzUEV\n+3UjlcIjT/DLmaW6ESgH0Dtx+W6GyF5Xnvf0LRxbYEmsHCVuVgfsirdjYoRD\nlxv6pdjrzmU1eKev3BhUpHsAWJKrAVCqJiGOYVb/aXt/ceYl+bNAaDkSab4c\nIVc7YcejIlhEwkZ1nlWQCgQO4uDWrV0d/UMxuy7jci1UX11q96+3lmvrvKU/\nUxCsfmqcHRyKwZgrjweSqlrp7evlgUStl8gQYhJqqkfdr0ghnI9PEdIBMIr8\nbbm+Dhx2uIr3nN4am4nvL2C2Qwrh83ssAz34GuWTrfBNtSrJ4YlWHRH6y/yq\nHktl8lKiujZvstwMa8kfBi8Ve5cjNOagMj1bEJEyryawxdvWOCW9iJTOGmQS\nvojyoE74Olr6ipYC4lM1PMbXZhawJayW6tAajfSNgh4UdY/Ke6SmhowM4CeG\nGA4I\r\n=2U6h\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEh+na1qukV8jpkeVB8qCpYNWql9zBKkB4cmsS5i+xgjAiEA1n2WMXNamSb8a4eYieIV1CpHOcZMraQiQEwh3EEu/NQ="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.4.0-mvvm.11.1_1559011011009_0.15426540345106776"},"_hasShrinkwrap":true},"0.4.0-mvvm.11":{"name":"chameleon-tool","version":"0.4.0-mvvm.11","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.4.0-mvvm.11.1","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.4.0-mvvm.11.1","chameleon-dev-proxy":"^0.4.0-mvvm.11.1","chameleon-errors-webpack-plugin":"^0.4.0-mvvm.11.1","chameleon-linter":"^0.4.0-mvvm.11.1","chameleon-loader":"^0.4.0-mvvm.11.1","chameleon-miniapp-target":"^0.4.0-mvvm.11.1","chameleon-mixins":"^0.4.0-mvvm.11.1","chameleon-template-parse":"^0.4.0-mvvm.11.1","chameleon-templates":"^0.4.0-mvvm.11.1","chameleon-tool-utils":"^0.4.0-mvvm.11.1","chameleon-url-loader":"^0.4.0-mvvm.11.1","chameleon-vue-precompiler":"^0.4.0-mvvm.11.1","chameleon-webpack-plugin":"^0.4.0-mvvm.11.1","chameleon-weex-vue-loader":"^0.4.0-mvvm.11.1","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.4.0-mvvm.11.1","cml-vue-loader":"^0.4.0-mvvm.11.1","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.4.0-mvvm.11.1","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"^0.4.0-mvvm.11.1","mvvm-file-loader":"^0.4.0-mvvm.11.1","mvvm-miniapp-loader":"^0.4.0-mvvm.11.1","mvvm-pack":"^0.4.0-mvvm.11.1","mvvm-style-loader":"^0.4.0-mvvm.11.1","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.4.0-mvvm.11.1","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.4.0-mvvm.11.1","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.4.0-mvvm.11","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-OTDLl3apUGdUiZ/y62lYXiTWt4QdTod/RRj8SDjZE0bwzR4xP51p+to8rLZhJi0Cp9C0xUorLcolZoD0i2c26A==","shasum":"b9b96a69ead42e078670add33471e4c7f0578c3c","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.4.0-mvvm.11.tgz","fileCount":151,"unpackedSize":1495739,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7J7iCRA9TVsSAnZWagAA124P+wa/bZUd8uk3IqLs1Mgm\nSO0mmbMdHqPZ+UZzFmJQo0yTX5n+0lsI8iiGpaijL0XNYlrr2YNDEBhVV1ug\nyh/npEYEm11+GuGFHaSv/DSRS8sQ88y71vTaZr3rtS7ORPKP5OwNxkk/iJos\n66jmWKyILhUIIDPw/sV8GYVrwutQqsKMKCrl1aaMuPkpVeSL6s+YoFLoVaCV\n1i9DMK3BZ974FLbWTV/y/Tu69PzgrWSkMFNn3CKgwe+DmbA3dzLXO/jIffcA\n1IPMJ7G2+58AtVFM2apODH0EgMakmOd96PdbnTeM47UnQlP6moPitZJmRc0J\njsVG79VW9+4U4oxWLKyWf1Mcfg7ODafQ+SbMII3F768QpkSw6ZvO1wZZCZG7\nlDDwwiohhel/qglHDsXg2A+33v3BL+YW1nKJ82JbAS+mEUiIq7y84LtkfAXl\ngAQEBrKzwBsIJkYXq96AWr/4HtfreuOi719ISV7oJwMmc6rzSHAQidRJxss7\nEjVZu58L4yUkiWwGzgh+RgVbhm+WMEBG5qmzpI+6RQ2UIQMOmkU8AKd2qJ24\nodV/8eoMpNUXniw3JXOTQjcpJtKthJnplThNAJSkUnF5zCFmRhczB90l4XDS\n8D2akf82MARIcO6TGRsTju7zfOn1bp1QnQwxEwUNHysYhWj5pW6gB1vWxP/k\nvp+4\r\n=gHVz\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEQww7h9BchQAzOm6POaJFA/jOhw5eal4og3UMrVbc1EAiEA5Bt8TAtj/4w8nO3IUYrUS2ik8V0OSUuXi0hHDfcYk98="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.4.0-mvvm.11_1559011041397_0.9906594186187627"},"_hasShrinkwrap":true},"0.4.0-mvvm.12":{"name":"chameleon-tool","version":"0.4.0-mvvm.12","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.4.0-mvvm.12","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.4.0-mvvm.12","chameleon-dev-proxy":"^0.4.0-mvvm.12","chameleon-errors-webpack-plugin":"^0.4.0-mvvm.12","chameleon-linter":"^0.4.0-mvvm.12","chameleon-loader":"^0.4.0-mvvm.12","chameleon-miniapp-target":"^0.4.0-mvvm.12","chameleon-mixins":"^0.4.0-mvvm.12","chameleon-template-parse":"^0.4.0-mvvm.12","chameleon-templates":"^0.4.0-mvvm.12","chameleon-tool-utils":"^0.4.0-mvvm.12","chameleon-url-loader":"^0.4.0-mvvm.12","chameleon-vue-precompiler":"^0.4.0-mvvm.12","chameleon-webpack-plugin":"^0.4.0-mvvm.12","chameleon-weex-vue-loader":"^0.4.0-mvvm.12","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.4.0-mvvm.12","cml-vue-loader":"^0.4.0-mvvm.12","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.4.0-mvvm.12","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"^0.4.0-mvvm.12","mvvm-file-loader":"^0.4.0-mvvm.12","mvvm-miniapp-loader":"^0.4.0-mvvm.12","mvvm-pack":"^0.4.0-mvvm.12","mvvm-style-loader":"^0.4.0-mvvm.12","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.4.0-mvvm.12","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.4.0-mvvm.12","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.4.0-mvvm.12","_npmVersion":"5.6.0","_nodeVersion":"8.11.1","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-hU8Hk6kqNp+R4z+7OXcbL6zB/y+9wBjD+yh2KaFctbVwnVEsh5u9XEUbseNkR8kM3c7RRLxEIRAjBtac3uAdEA==","shasum":"763a1cc6ae8be1a20878c4555528d8200cb15e2c","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.4.0-mvvm.12.tgz","fileCount":151,"unpackedSize":1489246,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7lVlCRA9TVsSAnZWagAA41AP/iNIqDenH2CpT9BCF/FE\nEui6QyU2tJiGVAkLCpIzYnK0moteVZtaL/y69dT9kVATvuIv6PZnpPo7Rys2\nZes+G+VubPnPtynyZsJ6mQcTR1f42x+vxON6nd++6ll4yyQs2ib9MNNIs4ee\ngPwZ4G/eMTm4X4I61OudPDbrH29YVfQdCFmF6gu0PRxj5z4+aPE8LIA7V4ww\niLUpPxEy6rKZQTy9omNm6mRcYEa3D+ufqqxOoPQ/zAr19p+7FDuUx0le5eIM\nSY94/NcX/gjYSNx5GA1Smk9f+PCnqaNiFAU2pnXwLuhmj5b4N2yg+G/IAmJA\ng+zb2wJ4dWToW2KNit886SecapqW1BK6CB80d63WEk3PvWUW8CxT+BeaevA7\nNDbrx00k8E7AmL2Eggr30vSyIEhy8S8yV74j7KA/4agIO2wYqTOeZcNgQnOc\nqF4ESw5xPN7pZYPPDZtAUjywuaW//IK4PDHCv6e6R2WUN/Mkx9UIAS9FFO9h\nYIPpAK9PLvcLwUycqZTJ9mHcNiutB7KjNC2ePO9N9QThYsYUDuXpIUAQJU/7\nCYH2Rwlr+1rR51TuZUFzw3n8TbWafb2zFHUTX3WH7NGfcdik3mr2E8v+KOk7\nVji4o1oAVrEqraQ3SfR2m2w6eLtYPzLurmHh3Lh43oTXr360cLjuvJsc++v6\nU4Qk\r\n=5AM3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD8qfiV7Jc1uLcjy/0y4Qg92brrqDza8/Y1//nYY/Fn3QIgZukTavwXgPVjjVYZiYG82WCQNwBzTlEgX9Z5SqNIifw="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.4.0-mvvm.12_1559123301249_0.975441512608612"},"_hasShrinkwrap":true},"0.4.0-mvvm.13":{"name":"chameleon-tool","version":"0.4.0-mvvm.13","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.4.0-mvvm.13","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.4.0-mvvm.13","chameleon-dev-proxy":"^0.4.0-mvvm.13","chameleon-errors-webpack-plugin":"^0.4.0-mvvm.13","chameleon-linter":"^0.4.0-mvvm.13","chameleon-loader":"^0.4.0-mvvm.13","chameleon-miniapp-target":"^0.4.0-mvvm.13","chameleon-mixins":"^0.4.0-mvvm.13","chameleon-template-parse":"^0.4.0-mvvm.13","chameleon-templates":"^0.4.0-mvvm.13","chameleon-tool-utils":"^0.4.0-mvvm.13","chameleon-url-loader":"^0.4.0-mvvm.13","chameleon-vue-precompiler":"^0.4.0-mvvm.13","chameleon-webpack-plugin":"^0.4.0-mvvm.13","chameleon-weex-vue-loader":"^0.4.0-mvvm.13","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.4.0-mvvm.13","cml-vue-loader":"^0.4.0-mvvm.13","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.4.0-mvvm.13","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"^0.4.0-mvvm.13","mvvm-file-loader":"^0.4.0-mvvm.13","mvvm-miniapp-loader":"^0.4.0-mvvm.13","mvvm-pack":"^0.4.0-mvvm.13","mvvm-style-loader":"^0.4.0-mvvm.13","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.4.0-mvvm.13","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.4.0-mvvm.13","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.4.0-mvvm.13","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-WncjIcoc40s36rInrIyiyMruiwGv+RSTjLz/8p/8osg0G4AcB5q19r+5cpA3N6rh/WqGwz8gYtEJlL2sY/DizA==","shasum":"5b91c269a82432f8936db278d6440d60cc90fa92","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.4.0-mvvm.13.tgz","fileCount":151,"unpackedSize":1488940,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc/kRfCRA9TVsSAnZWagAAMN4P/0thzOUskXiRJSLLUMyo\nDokHaG624t1qhIGGTxJ4NYHiTbW/7Nlay7ZRDyAGIlHZ+8rUjgcFtub3gOwX\nGg1D482GkkVTV8OHcCYeKFm4/0Bn5hgXelFs9Yw6AtL0kz23Ej/WjmjYJQGX\nBeVc3JLPaVpsKZ1Urh8DeW32JNGFEbs1aRuX5En8KY4zWrGsQoxROKvjaJGe\nrJcwxdo8e2V9Famx2suXL7igvIAisw3v9jYDQjKktRzqqRg4XBomsKIrbLk5\nxJuAABTKDdO/vTf/mzOsgahYUznnmHIVCnjWKVqIN72ewJJp35lg8xTKkJ2J\nR54ktFpvdAnBzILCiC9DbaWtuU7XFT6EkNzmnHs5MTfIOgqpwyOUO+smQfBa\nb05jBHO8D3YN2LoyO8vLXOWPTwvKavFVi6SwUydTox94OHOX/RKyoLIhAmtW\ne5wKKtQMJldSAswJkJN+JDHdSpi2MSS65/L8S5QX3jpm+qlXs+r6xZ9vaixc\nIQx+guJrDHoyU7s33qc0mzaBn4QEJmIEKYHsV8Wz0P36X6fZeH2VfeOgjV6D\n/OLXheTwm+QumDrqFybfvyYaieooyI16H73qNYs+8p0CH8yEC54SNrKTyLKs\nBb1WSO/m5LFqo86KSznMeh/1nYoovjMJ6gadxRZ2IYAwdXt7dBt16fDXb7pq\nfyk7\r\n=hTA7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICPzgH3lVpSIrdyJZvbyMEyPqc8Kj2vXnTG7GIKahAgRAiEA6oU7JauankZNKTBeVSLvCnelTRztO9tT/D6+nqBIww8="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.4.0-mvvm.13_1560167518613_0.7408629616547335"},"_hasShrinkwrap":true},"0.3.3-alpha.1":{"name":"chameleon-tool","version":"0.3.3-alpha.1","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.3.3-alpha.1","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.3.3-alpha.1","chameleon-dev-proxy":"^0.3.3-alpha.1","chameleon-errors-webpack-plugin":"^0.3.3-alpha.1","chameleon-linter":"^0.3.3-alpha.1","chameleon-loader":"^0.3.3-alpha.1","chameleon-miniapp-target":"^0.3.3-alpha.1","chameleon-mixins":"^0.3.3-alpha.1","chameleon-template-parse":"^0.3.3-alpha.1","chameleon-templates":"^0.3.3-alpha.1","chameleon-tool-utils":"^0.3.3-alpha.1","chameleon-url-loader":"^0.3.3-alpha.1","chameleon-vue-precompiler":"^0.3.3-alpha.1","chameleon-webpack-plugin":"^0.3.3-alpha.1","chameleon-weex-vue-loader":"^0.3.3-alpha.1","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.3.3-alpha.1","cml-vue-loader":"^0.3.3-alpha.1","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.3.3-alpha.1","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"^3.3.2","webpack-check-plugin":"^0.3.3-alpha.1","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.3.3-alpha.1","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.3.3-alpha.1","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-buJamgtak099eqhWrAP+F+sBf0hxBbebT/WLHY0PuIl11ssJbIAAxUPPvdGpFrONmFpAeOrcb4/AmnpYMRZzaQ==","shasum":"8a6a47502466c4c20aab92cf787c5bcb760c8ff2","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.3.3-alpha.1.tgz","fileCount":93,"unpackedSize":891689,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc/kwrCRA9TVsSAnZWagAAYPIQAIF0cDIhdlXRyNQet7f8\nJeiiT959qy8ih2mvEc9I0DWRmnHl45yuvMmDPxXGyodCE0Z0zNaqlOt6vADe\nlo8nNZoMEnyGcPPQLcCZn99sElSRnd/VhwUmBYELNHH17+FG+8SHbppXrRnD\noOE6XUXBEx2MHV0UHakZQdexHsGEA7P2ReV73msGzh6jSw39+MUyPh00aIDH\nEkoL7Y84yyEzyQ7TJPEqXe9UqpDNzzEocvwraAbDd2aXovXtlDu+YHJaSUcy\nw2SLmYCS8RyG8o82L5nd73LU+673UveWZKa/uzN9X+Edfb8H4ZPhib/j/t6C\nHmI7km5Jg5qwbNWueske6gHTIKe8CboahmE9dOiFgW2qZCd6yEGHMrs9wj63\nY2nGqZlWWckIhukaG0sgDEb/nqQ69Bq0IKzs1tNjaDa8180sDgBMk9dX0340\nJrqUj/2PB2wQiSjzu6hG7tYMQnbhiSWpwiZmMFao2EAjow1z46FSugMtPwZ8\n9VlJv6ArEv5Che2wBk9VCYqJNqH/1oshsmjXIvuPEmTmwY6ksKeE71qY56DH\nDOKe23m1LHxrDYSr+7RMqWXfh6xbsXtv+XbX/sbLoIA5m01zKY3kDNTbzo1g\nBzkTPJD5ivtvdKGPuJh0eQYIC6fQvo9fv9bTDNu8WCcYAGpeufL6GKh7ex+R\ns7Xl\r\n=Uf7N\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICwb33x3X1upfB1aGFblAHho9HoN7O5VWqWEit4C1UjiAiBLQWmn05vtbJ5hSPZ9/fRGunmYHlQgNk2msU2nTKQOyQ=="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.3.3-alpha.1_1560169514335_0.13642460261570832"},"_hasShrinkwrap":true},"0.3.3-alpha.2":{"name":"chameleon-tool","version":"0.3.3-alpha.2","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.3.3-alpha.2","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.3.3-alpha.2","chameleon-dev-proxy":"^0.3.3-alpha.2","chameleon-errors-webpack-plugin":"^0.3.3-alpha.2","chameleon-linter":"^0.3.3-alpha.2","chameleon-loader":"^0.3.3-alpha.2","chameleon-miniapp-target":"^0.3.3-alpha.2","chameleon-mixins":"^0.3.3-alpha.2","chameleon-template-parse":"^0.3.3-alpha.2","chameleon-templates":"^0.3.3-alpha.2","chameleon-tool-utils":"^0.3.3-alpha.2","chameleon-url-loader":"^0.3.3-alpha.2","chameleon-vue-precompiler":"^0.3.3-alpha.2","chameleon-webpack-plugin":"^0.3.3-alpha.2","chameleon-weex-vue-loader":"^0.3.3-alpha.2","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.3.3-alpha.2","cml-vue-loader":"^0.3.3-alpha.2","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.3.3-alpha.2","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"^3.3.2","webpack-check-plugin":"^0.3.3-alpha.2","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.3.3-alpha.2","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.3.3-alpha.2","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-QBS6qqgfxGflK407Gz45Hhn2BHGgKgz7axrO0JWbGl9a9xV6uV2JyTGrnUcP4o+/9L622lhNTDekA9eO7CVDiw==","shasum":"4ac53250e36a65a440931f2cd0bc9e20cd8563dc","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.3.3-alpha.2.tgz","fileCount":150,"unpackedSize":1467187,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAcF6CRA9TVsSAnZWagAASkUQAJ4GvVwHPauGzcTKFiRy\nE67o3cAaDRNUbYd2rvGbTTJZWh3ephphHwmWFcXgqGfRUDAgCPgd4Muox4Ps\nuH+c/zHen4iNkT6tRsNmSCA8jMmcXsQdik6Kg/gXXolo8VjCCLmnZkgcPi8W\nrwB9Fo5fa9sMarAsueRF2EFK4+DoAjpvQSO6FQCIIY35lLs5YTb/1C5MYBUO\nE43LIJmoQpV4JESfK0hbnr9QGV88LK4qKcKqYt4NKmeIqxkUDHpjjE9N7gq7\noKCqKqI4F2cDtG/z2seRZXrvFW6OuUcI1lqJSZOUwlCrQFuPfKhhJXdL6kwG\nmLK/olS1fqYuSeprWlMbr5QjuXmhSuUc8niaWfuS+mh0fce96Um9koWkgo7z\nwkWB0GgPUrG/aLQwcI3NDO+fpA5j4c1+nwzqVQm3PPp7YbHVtNl9WbFmQzIx\nm9HBg7F2QCQ52eFZMu+2t5j5tEo0gFetB78N/2tuZChkuNQcsI9VlCtEJqVY\nclyDfzhVoN5H/+mjPa/DQND81iHRFSfFvk5KxaCQ/Qwhl9fNITkhrHVgKAlB\nZsEOzf/+ICypmt0ElW/SvtPufUv8/MmHgtGjyyQYrQCI5qfTw2TTcNs5YbFS\nBGYxMJ6cWSTOFn3rGD64L3JeAlMUTa4X0hiYKDVIlLptzXtuotluwrsG5lbd\n9uuv\r\n=rBGv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDA7KjKmJUxQ+EbxfiQgi819NvB8RP3K4sAjJG8wnyn8AiEAk0z1sssKTydcOCI9LYYZpp9tbu2fKSod9v0m5uyRi1U="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.3.3-alpha.2_1560396154235_0.541094612487613"},"_hasShrinkwrap":true},"0.3.3-alpha.qq.1":{"name":"chameleon-tool","version":"0.3.3-alpha.qq.1","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.3.3-alpha.qq.1","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.3.3-alpha.qq.1","chameleon-dev-proxy":"^0.3.3-alpha.qq.1","chameleon-errors-webpack-plugin":"^0.3.3-alpha.qq.1","chameleon-linter":"^0.3.3-alpha.qq.1","chameleon-loader":"^0.3.3-alpha.qq.1","chameleon-miniapp-target":"^0.3.3-alpha.qq.1","chameleon-mixins":"^0.3.3-alpha.qq.1","chameleon-template-parse":"^0.3.3-alpha.qq.1","chameleon-templates":"^0.3.3-alpha.qq.1","chameleon-tool-utils":"^0.3.3-alpha.qq.1","chameleon-url-loader":"^0.3.3-alpha.qq.1","chameleon-vue-precompiler":"^0.3.3-alpha.qq.1","chameleon-webpack-plugin":"^0.3.3-alpha.qq.1","chameleon-weex-vue-loader":"^0.3.3-alpha.qq.1","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.3.3-alpha.qq.1","cml-vue-loader":"^0.3.3-alpha.qq.1","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.3.3-alpha.qq.1","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"^3.3.2","webpack-check-plugin":"^0.3.3-alpha.qq.1","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.3.3-alpha.qq.1","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.3.3-alpha.qq.1","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-wY7zt3caP6BzIkGkp8RTpKs8zupi+1Dszg9la7zOzAvjV9uFPprMAQ5lKqkoAvWoft1CN0cyvWp1B/hPqo7AuA==","shasum":"e1ebc750accad14f633d7550f391996f7435a6c6","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.3.3-alpha.qq.1.tgz","fileCount":152,"unpackedSize":1469625,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAfsDCRA9TVsSAnZWagAAej8P/3RsqyLuylz10MlmQ53v\nKmUwgNqA9CXBMjVq0CJbrq1OFl1uaF+JKtFoqarwRLVA0y2qOVf+DDhIANLY\nSINagmALW21k+EwfMje3cr5VC1cdgkcYubbZD5JTkTiXsEWtX9db5P1ojK8V\n4GhgfxcTOqcc6igzogkpLToRKfk42ncFf0zkzqJyZWbFup9riOJ82TTuFNiG\ncUh/oeO4vWy6yfDKWx3oAZkbJ4it3V5ktSRE29e0aYMD4yG6oCfdy+eY+FtH\nkwOIj6shEAZQyQemnsdZOX/L9oSgGRK/wuKENZncYU/2Jj9GDp84/Kki7dUM\nD/DxWkAtkAT4oXiQL+CFES2+8omlMWSs+rJlX1JP67ooMPnlxHX/RgaxvGBC\n1+S2gOEHHyzrVezcE1eP9DRHsj3mQOczuPfSVLZytCP3bqjqQhDa4GoYyRfE\nwZ3G+xyUZURhuGMe7vOseYK/fYY206qVoU7wqcilDCUTAyXxGFQASH+dSunx\nKIYsfTTuAhaLUa3kA13i8dxH3tcPUuIIrJDpeyaSrBZDEJ0Wuc6suwnCI9x+\nRG/Dsro1DJycyFJu7qakfbN/F5dfd1RneZR9j0fNyV6BwtMt3+yOT0pUFt1I\nkoXlWz4p1zdTsEj30Oc3SlFJ1jTIVBc+cGE/Tk3KxkHsj9lGlXhVfDnPDcTX\nPAi3\r\n=qavW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD+BiUuJdbM6fu5bhqY3ELXYb4gp5lSjORay5ujJRUcpgIgPG4GoT24UV1Tdx3MpNR9zGUrerbdgDnRmKSzOxQz7pg="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.3.3-alpha.qq.1_1560410883087_0.21517572659595063"},"_hasShrinkwrap":true},"0.4.0-mvvm.15":{"name":"chameleon-tool","version":"0.4.0-mvvm.15","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.4.0-mvvm.15","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.4.0-mvvm.15","chameleon-dev-proxy":"^0.4.0-mvvm.15","chameleon-errors-webpack-plugin":"^0.4.0-mvvm.15","chameleon-linter":"^0.4.0-mvvm.15","chameleon-loader":"^0.4.0-mvvm.15","chameleon-miniapp-target":"^0.4.0-mvvm.15","chameleon-mixins":"^0.4.0-mvvm.15","chameleon-template-parse":"^0.4.0-mvvm.15","chameleon-templates":"^0.4.0-mvvm.15","chameleon-tool-utils":"^0.4.0-mvvm.15","chameleon-url-loader":"^0.4.0-mvvm.15","chameleon-vue-precompiler":"^0.4.0-mvvm.15","chameleon-webpack-plugin":"^0.4.0-mvvm.15","chameleon-weex-vue-loader":"^0.4.0-mvvm.15","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.4.0-mvvm.15","cml-vue-loader":"^0.4.0-mvvm.15","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.4.0-mvvm.15","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"^0.4.0-mvvm.15","mvvm-file-loader":"^0.4.0-mvvm.15","mvvm-miniapp-loader":"^0.4.0-mvvm.15","mvvm-pack":"^0.4.0-mvvm.15","mvvm-style-loader":"^0.4.0-mvvm.15","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.4.0-mvvm.15","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.4.0-mvvm.15","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.4.0-mvvm.15","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-nXKtPsPIi8bFU+4EI87QLlrSrT1UhCiwEyzLfMAwBC1fYRcaALoLZxBMarJJVyX2lf2pt93BBVq6hgm8B8Gpiw==","shasum":"4ef0476ce923a8102d1c03fb271128e84f3cffe8","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.4.0-mvvm.15.tgz","fileCount":151,"unpackedSize":1487864,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdA4M4CRA9TVsSAnZWagAAp+QQAIBN0ojsPUiTSpGNolQO\nh1NA/52JpO1NMkpuZ8URRoyoS6iKrpqCxWNyJ/dhToZ3+tqmPxN5OJGmLRu9\nf6bWzPk9SL3b69FJewYUmCHeMRQrbwFtYv8fBDv5nTJUU0pf9OKI7b5O13ze\nWDwaEYWs0KBbjpv43m2Oj4xMUVRe4REcOfasK810Oyv1uERJWagrS0klXlMH\nJSXeh8KAuZO0b0uDW7fufpjE4DnEKAP54MqyntnfzB8wGTjQEnLQw2YTp6Dh\noSRuBQ2H96Q8tdgg3nIw/w4qgQZzxjWodkyCQTtzcQFSABgLm4MymRQsdJ6h\ndl/EK75MeJx+56sQpZMlfujmo7As09pDB4VJyvXbzlgb149fmx/0GPp8Tgi0\npS7apjjVQSSaeuUirU01zsPDmv1oqpSgPtsNrDaQ1oEEvs4pvpNwKC7W40X2\nmywzuu2nLeS2SRMM9Z9EHDuWvq9lwoohsoTikDMXy2fkMqlqB74kAq7017A9\nO0UKQ23Vdxe7CyZd/Gx2mdk/U33wSEqN+mH09M1SrP4RmWZj5YSJX5YJk9Dh\nKBWNfhkufo2OGDl8JOFeQrsJ9q8dz38bR1sngFxnvhliy7e0nmVmaXum6kQx\n2XKZ7FMOJoXP4VDFjAAirGodTOf7LoqlUs8haucvTZunwS2SW+J7EWHun+wx\njDzs\r\n=qbvH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGZktOpqrevdURoBnJRGMpqo71mfv1kGZ9ZmW5yGWS0SAiALeKkjy2d43BeVJSyy0tYCgZwzSRyRy/+v6xJO7NvZIA=="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.4.0-mvvm.15_1560511287912_0.914527167279193"},"_hasShrinkwrap":true},"0.3.3-alpha.3":{"name":"chameleon-tool","version":"0.3.3-alpha.3","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.3.3-alpha.3","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.3.3-alpha.3","chameleon-dev-proxy":"^0.3.3-alpha.3","chameleon-errors-webpack-plugin":"^0.3.3-alpha.3","chameleon-linter":"^0.3.3-alpha.3","chameleon-loader":"^0.3.3-alpha.3","chameleon-miniapp-target":"^0.3.3-alpha.3","chameleon-mixins":"^0.3.3-alpha.3","chameleon-template-parse":"^0.3.3-alpha.3","chameleon-templates":"^0.3.3-alpha.3","chameleon-tool-utils":"^0.3.3-alpha.3","chameleon-url-loader":"^0.3.3-alpha.3","chameleon-vue-precompiler":"^0.3.3-alpha.3","chameleon-webpack-plugin":"^0.3.3-alpha.3","chameleon-weex-vue-loader":"^0.3.3-alpha.3","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.3.3-alpha.3","cml-vue-loader":"^0.3.3-alpha.3","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.3.3-alpha.3","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"^3.3.2","webpack-check-plugin":"^0.3.3-alpha.3","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.3.3-alpha.3","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.3.3-alpha.3","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-N1b7mbVCGkl54MECbPwQiyheVgLuo+1cL1jZLtraMsM9SGN7Fz6znbzqLdmULnx1/hfsPCaArG4fSaoUqJQZOg==","shasum":"fc3ecd8224c5ca89a3f33b6603458523ff9cdcef","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.3.3-alpha.3.tgz","fileCount":95,"unpackedSize":901803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdCJorCRA9TVsSAnZWagAAq8cP/2WWwPFRVpPMXUGid+UE\n2+8LiE9hoMT0loZmSYK3IMVFCOhQGg0HRvdRvyJCv6NeFOu/xkv2/94y0nbq\nCux30vGJUWDutw/SxwjXyUMXFmJEAEscNKy5/WdWTpvMiq7ZfiD0aNd9WNvt\nAAFzvR13ECAXjyTeovjo11x6CrMPGQqqsNRcaINPYj4Ip2V6YOCq7a9kEGiu\nI/LNn52SE8yYEzX8wMFfuwJQowohR74n0P66eIvgLeQksqLg4s7rNa9exi4V\n2IBMWCdd9H8ARaV7e84xbo93ywC5LW5K307W3m63iN7GB2BgFefPgFoIK6LO\n+cZ4hdDoGSirXnIj9X1iA/HusKjBOZVEZLibDVP3qwpmNWIiMa4swVMJC2XZ\nsqtUoXLLSOmZR+haLMFTw/z741LkcCqZLaYHD22SbgjiMjx5979kzEcc9MzY\nt9glteTCsLeEjj8pM6cJyMAB4im+EmI0nccxUmRQeShiFheicLsXLOCJQ5wr\nWtmRo7dlt/mTNPQ4tTED4XD+YgKMDYX6AkF96ntHV0MPLR8dQyMW1dVAsSGj\nuva6yChbZ3PRBG4ATd0RGalNOxEGpphaATUWK0J9qeTrh/Y1L1EQrMF9qsgW\nMqmahn987obviazzAaaWsl3Ret6LVF2zg5EQHgiUaQhbe/mGS5+0TF/0qNHD\nH/gr\r\n=uyUW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC3jYIMYv5Nuae4x6MW2Y8ThIwNA5c+DknqQu8d2d+0mQIhAIbdIEaUIoSSywhYNw3vaAW0IClmCpdevINXiKyzJCK7"}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.3.3-alpha.3_1560844843279_0.5509165262309594"},"_hasShrinkwrap":true},"0.3.3-alpha.4":{"name":"chameleon-tool","version":"0.3.3-alpha.4","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.3.3-alpha.4","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.3.3-alpha.4","chameleon-dev-proxy":"^0.3.3-alpha.4","chameleon-errors-webpack-plugin":"^0.3.3-alpha.4","chameleon-linter":"^0.3.3-alpha.4","chameleon-loader":"^0.3.3-alpha.4","chameleon-miniapp-target":"^0.3.3-alpha.4","chameleon-mixins":"^0.3.3-alpha.4","chameleon-template-parse":"^0.3.3-alpha.4","chameleon-templates":"^0.3.3-alpha.4","chameleon-tool-utils":"^0.3.3-alpha.4","chameleon-url-loader":"^0.3.3-alpha.4","chameleon-vue-precompiler":"^0.3.3-alpha.4","chameleon-webpack-plugin":"^0.3.3-alpha.4","chameleon-weex-vue-loader":"^0.3.3-alpha.4","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.3.3-alpha.4","cml-vue-loader":"^0.3.3-alpha.4","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.3.3-alpha.4","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"^3.3.2","webpack-check-plugin":"^0.3.3-alpha.4","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.3.3-alpha.4","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.3.3-alpha.4","_npmVersion":"6.4.1","_nodeVersion":"8.14.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-YmBgK/XP76XopOZTCyLY7dw6aApgPmaB9pXiP68nkTz6c0xfQD8ZAWJiTXt3nD10q0IS1POBpkgrpNliQTLo7Q==","shasum":"129c89b5fb0cfac11243bfdace5607e1e29b3292","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.3.3-alpha.4.tgz","fileCount":95,"unpackedSize":904320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEyypCRA9TVsSAnZWagAAFtYP+wR58kmt2hcybQMVlTSg\nvLdoloZWYWBvB6w0V7u9DHR8tYdjMWLiCvQy0zlywMaUxuiCn0/b6bvCOjhf\nZkc3AdYM8rgtO+z1Q/WFDeg9ZQJTReowuRFGmhi6y84TIpYbrqbpiV6XfZfM\nfMICTxuEkbGtJfyuE+AEsB3j08+yc8LMrtHj4MKdMbRER2ss5aVaxOBbj/KG\nFacL/e1nCaXoIv7jjAyMTI9v38PioGL56h2ejVW3LsQpDQA950MQHp5iYQrI\ns3s5sjHH+HXEv/TRrFW5zACOQPGIvxIVrPS/216fhS3E/yJlxu87UGW4d3Gj\n+4v9/XoBH+oa6I3gxJEFVp9acLQEWxSc7uZ6jHIsnbVbxDcFxHMfh+iCOkfp\nqma/06GfnQFlMmQfVWx6qHMSO2UTpOyT6C1Sx3rtyZI1FrbpTfTjHuNpJieu\n7VXdEpjpsYTJk5ETod59iVnG3l5djHPjdJnlH6WJg/UYAs2G5tO1tKhJieQr\nJ8m/KJbr9NO5/si4h85/Q8S26ajj+KUVBs9kw/79ZIW0to0VPmruh3zMoo/j\nd/wvrl6spO7EFJH8WKl7GX4ubP41fhF0QLF3RKWi/Nd0fib3eHYFynd4Xeds\nILcXZBIFyuhOp1xSC0eJ0YqK7pET6eIimNa/0yUsCp7KquVkYuQ71mZbXMSb\nVdP7\r\n=Amix\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCto99+CuvVQX80eZlqn4sAiGjPLSBsMzuFMLAX0llrUgIhAO8S6SBVOCwz7/AZGz1ZWHYpFKqvOSrsjsY20ZdY6ih7"}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.3.3-alpha.4_1561537704530_0.9543753520470799"},"_hasShrinkwrap":true},"0.4.0-mvvm.16":{"name":"chameleon-tool","version":"0.4.0-mvvm.16","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.4.0-mvvm.16","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.4.0-mvvm.16","chameleon-dev-proxy":"^0.4.0-mvvm.16","chameleon-errors-webpack-plugin":"^0.4.0-mvvm.16","chameleon-linter":"^0.4.0-mvvm.16","chameleon-loader":"^0.4.0-mvvm.16","chameleon-miniapp-target":"^0.4.0-mvvm.16","chameleon-mixins":"^0.4.0-mvvm.16","chameleon-template-parse":"^0.4.0-mvvm.16","chameleon-templates":"^0.4.0-mvvm.16","chameleon-tool-utils":"^0.4.0-mvvm.16","chameleon-url-loader":"^0.4.0-mvvm.16","chameleon-vue-precompiler":"^0.4.0-mvvm.16","chameleon-webpack-plugin":"^0.4.0-mvvm.16","chameleon-weex-vue-loader":"^0.4.0-mvvm.16","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.4.0-mvvm.16","cml-vue-loader":"^0.4.0-mvvm.16","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.4.0-mvvm.16","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"^0.4.0-mvvm.16","mvvm-file-loader":"^0.4.0-mvvm.16","mvvm-miniapp-loader":"^0.4.0-mvvm.16","mvvm-pack":"^0.4.0-mvvm.16","mvvm-style-loader":"^0.4.0-mvvm.16","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.4.0-mvvm.16","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.4.0-mvvm.16","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.4.0-mvvm.16","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-vJwHS9F03uciB1leO51tc+G5417BGYQGS+z87HOCWKCU2CDVDLfAe68+0qxptsBv2e83swhkuZO6x3IZKeItNw==","shasum":"e9254b0ce9cd004fe7427d4cb7596df8ab432633","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.4.0-mvvm.16.tgz","fileCount":151,"unpackedSize":1483482,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdFD3hCRA9TVsSAnZWagAAerUQAJm1JbLdiS+WZ5dea7jx\nfQalQwlTJfZsfsTKEwbu4rQ7a5MpGfOL0EaYY2eoKjDdfz3EaZkz54fqVmMP\n0Et2yk6lBq0Nkp1GwQ1PMVwBKPM7DW/z9yj4/XO+hFukDsyhB7g+AdKbUuvU\nwTU9FRx92xq4w7gcFU8jZY2U5h+B5a42SJWp+dhE3XkShxXUz964WKlQiQs3\nMCjuazq4ogLPQXJWBUpNRdLqTLzG937zQLeLXKxX0Nns3jjc1vhldkzV1aIs\n4mBVoB91r9NQX4pBc3JAy+88cGhg8LX2CmXtBSEFzZXX7f4/XEBEuPwRLNJV\n3xeG3rSQ8rhzZS0DMv2E3czrgAnCozfZzfm7MdFcRcOfUNlVcXCHYwyeYMj8\nDy4oBY6JbTo1UDy3jbguMFWKVgsKGd3+UNCPw2Ja1QE/m8C3Sag+0BIS3NyU\nSL6tPcUU+Q/qfZSgx9rCHaS8WGw47Gp/UPfQR7cjwIOHyT8eF+Pp2z631ia4\nsjRcBvJhDE9HklNPQg0bAFcEm1k/PnyqzqjE+rAuVX3w8UpzH4fuB/0XR6II\nb52u5prFB2lYochRytwdli3CZh83ipyysyXz3VKyJKaV3ypQQ4pnDjXJQk+c\nKsAKEzb+wo3kBoaLGye/l7D4FRp0g08cAhhPdZlpD5s/qC0+gP183++B1dYb\nlkWO\r\n=8ytO\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCiBcmEQ3u0t0odr0eMJENsrW0varVhzVpAPI+oYMpdoQIgSN3nAFAFeU/EOFgXjIYyh3jpc161wQDB9jnifLYshZQ="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.4.0-mvvm.16_1561607648742_0.6655424344453544"},"_hasShrinkwrap":true},"0.3.3-alpha.5.1":{"name":"chameleon-tool","version":"0.3.3-alpha.5.1","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.3.3-alpha.5.1","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.3.3-alpha.5.1","chameleon-dev-proxy":"^0.3.3-alpha.5.1","chameleon-errors-webpack-plugin":"^0.3.3-alpha.5.1","chameleon-linter":"^0.3.3-alpha.5.1","chameleon-loader":"^0.3.3-alpha.5.1","chameleon-miniapp-target":"^0.3.3-alpha.5.1","chameleon-mixins":"^0.3.3-alpha.5.1","chameleon-template-parse":"^0.3.3-alpha.5.1","chameleon-templates":"^0.3.3-alpha.5.1","chameleon-tool-utils":"^0.3.3-alpha.5.1","chameleon-url-loader":"^0.3.3-alpha.5.1","chameleon-vue-precompiler":"^0.3.3-alpha.5.1","chameleon-webpack-plugin":"^0.3.3-alpha.5.1","chameleon-weex-vue-loader":"^0.3.3-alpha.5.1","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.3.3-alpha.5.1","cml-vue-loader":"^0.3.3-alpha.5.1","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.3.3-alpha.5.1","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"^3.3.2","webpack-check-plugin":"^0.3.3-alpha.5.1","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.3.3-alpha.5.1","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.3.3-alpha.5.1","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-skaJuoDJO0z/bH/iQE53QqRcELrd6TjHQmvD7DGwbaCan+S/ylHivBP7RqGX1vjq2cMIm5awi+QWXa8Ea55JNw==","shasum":"7f40b609c5c8be42f96f51afb9dae856a70176e9","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.3.3-alpha.5.1.tgz","fileCount":97,"unpackedSize":908799,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdHCkaCRA9TVsSAnZWagAA3T4P/in2NJuaOWor6uS00+Ui\nq/SXexDlF1x+gPk9B9IDSRff1FPQrKX1w/h4pvAj1Bgo7p7c2w7O6bzeVIOy\nfKH+7mpsq3uBhKCeb7WTFY/3HP1Jt0YTQwhIaRZoqtWex4Bot+dW0fEd66QH\n4958i/hxSCxX2ELobnCNTqOGzHMZIVdyfh7pe7rUkle4iWoGcDFtUYaLJ/n/\nOIiF1FFZBjXivBRy/lyNcAiHN2icjZZp8OUqiDo2HgmXjLHOJKYInMkcWC0W\nwgnEbL9nxM9FPSttBcV4d8/4E6SMLbRQaO2CTtKttSgLUpX+kd64vx9AqSOD\n/nV+xQ2jRlsCXCMeLaoul0zPvEJzp5DWbLi0mNAEFew8aXd9xfv6pOceRbBt\naHwCT0auCwoO/aAOLfUVTLhLxOLWnw6h9WGG9Mda6HI80/hHBKmK6obLYaX+\n4uaZbyz2CY7lvtHC8HTQYZNHJyV/8WTFm97hYjrn4YXmzCLXjajilBIgN8nR\neONDxgR165Mr8g7CY3lSqLan5YTZ/1QK33QTkuu2U0J+dgO50Tr7PNklayg6\nmgVvL3PAWcv/qceqhxEW1Fk63IRElmc68/tGhZS2sOE0cDrnotsy+DjVHx3e\nfYJWiEkXpfMdI77cxGnIZgDQZ6zPIsoxkQk7ZdVJ0uKuHJb+yUPXGdMfy2AR\nJOQm\r\n=8tf0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIHktzXvcOc+K5326dZFNzlrqcGFnxcxwZps5oWnQ1gF4AiB1UHeIVElcDpdR2ItFcbX2/cSk+fCB2T4YIVM3aShhEA=="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.3.3-alpha.5.1_1562126617669_0.3267831081485373"},"_hasShrinkwrap":true},"0.3.3-alpha.5":{"name":"chameleon-tool","version":"0.3.3-alpha.5","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.3.3-alpha.5.1","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.3.3-alpha.5.1","chameleon-dev-proxy":"^0.3.3-alpha.5.1","chameleon-errors-webpack-plugin":"^0.3.3-alpha.5.1","chameleon-linter":"^0.3.3-alpha.5.1","chameleon-loader":"^0.3.3-alpha.5.1","chameleon-miniapp-target":"^0.3.3-alpha.5.1","chameleon-mixins":"^0.3.3-alpha.5.1","chameleon-template-parse":"^0.3.3-alpha.5.1","chameleon-templates":"^0.3.3-alpha.5.1","chameleon-tool-utils":"^0.3.3-alpha.5.1","chameleon-url-loader":"^0.3.3-alpha.5.1","chameleon-vue-precompiler":"^0.3.3-alpha.5.1","chameleon-webpack-plugin":"^0.3.3-alpha.5.1","chameleon-weex-vue-loader":"^0.3.3-alpha.5.1","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.3.3-alpha.5.1","cml-vue-loader":"^0.3.3-alpha.5.1","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.3.3-alpha.5.1","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"^3.3.2","webpack-check-plugin":"^0.3.3-alpha.5.1","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.3.3-alpha.5.1","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.3.3-alpha.5","_npmVersion":"6.4.1","_nodeVersion":"8.12.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-34wrJVAZA8SOSqQP7aa0YaZIyRIcuxXULEOz3AcvOkeJtfclFW8sMsi+Xw9zd2W/9KcEetXeYDC4UuMiCyq0yg==","shasum":"7a0c53872fc545173dd7f2d834bb7785df0a8174","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.3.3-alpha.5.tgz","fileCount":97,"unpackedSize":908797,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdHCleCRA9TVsSAnZWagAA6NoP/R3+y4fyIH4GP3JTF2gj\n5vLOKEi9PpO6v87v6SK42KQZenmXfhbOyXLECDP9eqjPWkiNf7VvSNd6x6i7\nf+Vv7LCm1kzRFefDbgBt4ZNZFpRob/+ObVd3qnuifkzqkO01JZJm73m65RKA\nO3pe/ZhI159LCIdN1jLBcdxRoSzQtycK4/ie7vOeBKPWiC/fwb5hUeHxRYYp\n7O3sRjcAicbAjFn2P/Coo6pEt7/n4sE+Z5h0fh/jwF6N1LnEc5iyG8UwQblt\n9+GoqMn6iy4IG4VoKHLvcEi2tFjNW9wnAFIJXBETwYUQS/T4t2X80FeA32UH\nE92mseyLaiDIIspLR6hUSLdvD0FzqCl4KABAQvCqB5uTB7gMCoRIOCbKcZyE\nSILkyGVgkrNsIBXUfnlhPv9Pc1c4O8l9fiBxy8LraFsq0TT3ES6zBJRsjRe7\n70wOZ1/PRpsoxerisMkFlwnRErNVeYZVnKUWycggSsN0dJzeuOw+Tc8PUV2I\nxoZZxVdVZtRfMo7BC/hOD3hby86po0/h63zzvVIZEASAzfTMbzyVGLmlAMmB\ns8iAfPI3v95aHBOfZcGUXsJqSOaWDtPRuHwMZ1N1WnWIkyvocr6MCPWkzRms\nVQazEFIGuuhfgIvLEaBXgkLuPpK6CBLrrrUxGBwO0RMqfTBYCtO7tLLhFfDd\nsRXB\r\n=Bx+7\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIQDrlVErqo0Ejv32EFAsloo616DNd9bItF4/i9lPC4SOvAIfIDqna3WqxIGuMcgBtUT2V7ar+/m/iAEDezYbYWmlhA=="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.3.3-alpha.5_1562126686167_0.7854938557119833"},"_hasShrinkwrap":true},"0.3.3-alpha.6":{"name":"chameleon-tool","version":"0.3.3-alpha.6","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.3.3-alpha.6","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.3.3-alpha.6","chameleon-dev-proxy":"^0.3.3-alpha.6","chameleon-errors-webpack-plugin":"^0.3.3-alpha.6","chameleon-linter":"^0.3.3-alpha.6","chameleon-loader":"^0.3.3-alpha.6","chameleon-miniapp-target":"^0.3.3-alpha.6","chameleon-mixins":"^0.3.3-alpha.6","chameleon-template-parse":"^0.3.3-alpha.6","chameleon-templates":"^0.3.3-alpha.6","chameleon-tool-utils":"^0.3.3-alpha.6","chameleon-url-loader":"^0.3.3-alpha.6","chameleon-vue-precompiler":"^0.3.3-alpha.6","chameleon-webpack-plugin":"^0.3.3-alpha.6","chameleon-weex-vue-loader":"^0.3.3-alpha.6","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.3.3-alpha.6","cml-vue-loader":"^0.3.3-alpha.6","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.3.3-alpha.6","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"^3.3.2","webpack-check-plugin":"^0.3.3-alpha.6","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.3.3-alpha.6","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.3.3-alpha.6","_npmVersion":"5.6.0","_nodeVersion":"8.11.2","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-/q2INTtUJoQoxhLMb/todCeH7Xy9nzA+0/ScBavQfCxcglg5WxmlVB/RH9qAxVF8rmmZtPfQ2mVVlbFXvdPwrA==","shasum":"9ba1bbf2b4acdf8e55817d65f341862185faaac7","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.3.3-alpha.6.tgz","fileCount":97,"unpackedSize":907211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdJbwJCRA9TVsSAnZWagAADikQAJQlnNzblceQStFNLNAF\nrXYHEHI3GiAbYsDNGoR7QDBtc7WLvDdG7SbPIU+1qnZu/8E6or+Auqfy90cG\n/6pL7OaHLuPUfO/vAaUsKGM6CJKsOXsWXkl/5+9gwMZsPQDQPHTjj6f9jPm4\n7jbkjC3cUCM8kAB1LXw/kAZ59mxRNSffP51T/9IqbXt4LqGM4ObrdPnlesRR\nUR0qulOHrNe8AQuAEkheCAWaMIWHHd7ru7RZ56l0SEuYI8gBHjq3MIGmoxNR\nENeFFanA/3aNeTth+05lyGXqXZLuOGfLkaXWx5wlUx8nrRbGJtmLC1dQAUOL\n7NgQQidbvsn641MurA3Yp2EcX3yBv9tXPevWx6SQ92hb+GBfdDuFElhILsYG\nwR3v/dLY3JF+4TywxyskZOA5W9Azao1dLDnPP1QbXnFktbW96IOxop72+7i+\neSGxDDhVOkl7gfeescm6nGdXj8wXD1w4MjPZGVxttaxi5btlvOD8QdA/RfPh\nQDHxfk20yLvVy34jg9ToU6LQfPy/kNcWidJSaz1F0cb9gV/ooatsNhsiXDgW\n3zWu61/dIUe/C4yZQxVUJ7d1ffKGaTHa3MG8X9bVj+Cl0b/QbyvPegXrBnrS\nMoQ7zdAbZPFcfO2xAyfz4mfKPUcr1YKrpfqAsuBercaIf2c4OWxvsdfLuoC0\ns+oR\r\n=kSbY\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCWExIcKBgnFZ546NZBDyHsI0DKN4bNOQfnlSMhJ8gZ9AIhAMRyKxZhex1fj3gdaw4/Rhckmn54+KY1gUZzYrubbyRa"}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.3.3-alpha.6_1562754056476_0.030255954700854515"},"_hasShrinkwrap":true},"0.3.3-alpha.7":{"name":"chameleon-tool","version":"0.3.3-alpha.7","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.3.3-alpha.7","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.3.3-alpha.7","chameleon-dev-proxy":"^0.3.3-alpha.7","chameleon-errors-webpack-plugin":"^0.3.3-alpha.7","chameleon-linter":"^0.3.3-alpha.7","chameleon-loader":"^0.3.3-alpha.7","chameleon-miniapp-target":"^0.3.3-alpha.7","chameleon-mixins":"^0.3.3-alpha.7","chameleon-template-parse":"^0.3.3-alpha.7","chameleon-templates":"^0.3.3-alpha.7","chameleon-tool-utils":"^0.3.3-alpha.7","chameleon-url-loader":"^0.3.3-alpha.7","chameleon-vue-precompiler":"^0.3.3-alpha.7","chameleon-webpack-plugin":"^0.3.3-alpha.7","chameleon-weex-vue-loader":"^0.3.3-alpha.7","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.3.3-alpha.7","cml-vue-loader":"^0.3.3-alpha.7","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.3.3-alpha.7","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"^3.3.2","webpack-check-plugin":"^0.3.3-alpha.7","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.3.3-alpha.7","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.3.3-alpha.7","_npmVersion":"5.6.0","_nodeVersion":"8.11.3","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-epy6VfKFcLUZbgLGV6plRgFsJTlHDObiLHq3P0C6fNa0jJ3iJ7EOnd5UUQYdP7YqcfJYSJGa/jwgwM74Z1Q61g==","shasum":"7e5c14238a5e025b825ff8192082912e8efd2a2c","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.3.3-alpha.7.tgz","fileCount":97,"unpackedSize":907513,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdKG6aCRA9TVsSAnZWagAAuxMP/3tIKQ0AzKJhUzWOotHU\nlBnDOTMwYQsNfs9dwf14jRlN/1DWiiOc+0+hw+J6HjDBbSoikiKYLieEjLnA\nkunnGBkuAWX/cxd+coq2OmTjK99t+V1jSAX7LjCYpjKoj3I6frC9pwIPH9B6\ncoe6Q3qQjg0wc5b4REN0r8s0qHuTKsqIoPcMhnoXwFweOQcGfJ24/PBhUQqP\njl6Uim/tnRoGmaB2EtmcQTefzGCWhv0Noj7cqqVlZ+KX2IO9hl0wtOEs+Nyq\nCVHFWpaVxkgryiQH1iZlWgteZwjmUOFHp8jl8LGW4y2A0SGvoUj9eYIKqjgm\n8bcW/gPiDr/GbK3zNFyO3SNYOHXmz4JYiaKNjIYdfHSe/fFmspoSdZkdWz8B\nUsPi2jFj4s/Tnw6z/TGDAJ718IKnkKvwl26te3hTwGVeQMXG3qUJl1mNJBJa\nluFmrLz0F7H+O1h+K0GQGNwhzqwSvedT3WxLtrayrnABdwWHy3fsZz+GXsbF\n9VhyN5wKkkEMZq4ORWlWyN5CEKeI94NBtaeDmu1Hdt53Ch8YCzWnlRmvq601\nIKdvO61sYV21WZ+sN8zpQJiuKKJTTi1jNbmHNyFz+rYQusOY3+ut6UZB+g3A\n46LMIjTljOvJPyr2xtEh1f2a0i/H1wzPsDtgrt8X6ZOdJXi0qDI/KfvkhcCy\naSRo\r\n=MxBu\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDXlzzXo8jwCJGLyhozmvAudEEZooimZXU6faYD40MTgAiEAubvrJQUfVvqEQufjyKZTGypakkB12twi/eg36QggB0U="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.3.3-alpha.7_1562930841709_0.8699962839915318"},"_hasShrinkwrap":true},"0.3.3":{"name":"chameleon-tool","version":"0.3.3","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.3.3","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.3.3","chameleon-dev-proxy":"^0.3.3","chameleon-errors-webpack-plugin":"^0.3.3","chameleon-linter":"^0.3.3","chameleon-loader":"^0.3.3","chameleon-miniapp-target":"^0.3.3","chameleon-mixins":"^0.3.3","chameleon-template-parse":"^0.3.3","chameleon-templates":"^0.3.3","chameleon-tool-utils":"^0.3.3","chameleon-url-loader":"^0.3.3","chameleon-vue-precompiler":"^0.3.3","chameleon-webpack-plugin":"^0.3.3","chameleon-weex-vue-loader":"^0.3.3","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.3.3","cml-vue-loader":"^0.3.3","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.3.3","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"^3.3.2","webpack-check-plugin":"^0.3.3","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.3.3","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@0.3.3","_npmVersion":"5.6.0","_nodeVersion":"8.11.3","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-j7JT2ooMvI0ISDRbcunkS768wZjim0/6VmC61HwNz7S9NXe+Cxy/DnD5oZWnYD6BNV2imu+dYTxKfRLGsKHGMQ==","shasum":"859289b0bd02a9197e1e132b36de37b9abaed59e","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.3.3.tgz","fileCount":97,"unpackedSize":906719,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLux9CRA9TVsSAnZWagAA9mAQAIJzO45+pMZ4B7cWWe5J\nmuwgoj/M6/QwkdOq3aoMeTvXYgWP3PmdUZBecbQcqeDg13fkAirjMwIJr0j1\nGqptOLOqCKBZtu92sL0sT1IzfLN+n69cvAcj6Oxr9nrxVPY6sGmfjDZrGS3K\nvtvzKsCxPqMNaQ+PJjri8Jpg8Lrqc9w7QsXVUyzqYvcdS4iHEPF8dpLr2/qC\ncLaiVFU8DB8uAf3mGUXbWAsq3X0N6MckgHpHEvJ0Gc8PvzgyK1vmHH0FP89b\n18E1OZCJFWxuoStqkMVMH9Ork4JhERcsL4oU7Kr3XajbiRfxmxHDwNhg4eHO\n2MLmXaYdY/v+JDjc1GdtlU0KFolI6Uz6PbTaNvoeeBNovyk432+UrR27fRiy\na+/VZyJPODLnrpVDZS5RddDzFW6w/Ee8juS85m53UubKJ/+/lGyCHx5vpmyB\nSneAzLS14tICSNIh55zcKeePmkPzGGXt/1rMY4Od+M9kxaOLxC56/agiFyDq\nqdIXSqdvbW4E0BS0dDfS315E25Kt7CxWnVMUMEnq5VK6O7FQI6adwoy3G3Gd\nodY+OzcedfZAx+luX1YjXVIbRq0U6ZZ1wGHQtYhkm4AtvRzGjLsupfSzOS9K\nrwyXRg0av8nFoVEcwOHn/6XQO5FVCtuMi06CuEdFs8zFBN00gXC0K8t0PwhN\nQ9K7\r\n=u+NE\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICYnaegJnA4OCZwYYiketH9q5xOwx6ULSj9YmECPEAROAiAp1s3RlVXvgCgWpjMub2HHPLcXNTR9NlzpELQ6/Lf3Bg=="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.3.3_1563356284913_0.7945753221577965"},"_hasShrinkwrap":true},"0.4.0-alpha.2":{"name":"chameleon-tool","version":"0.4.0-alpha.2","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.4.0-alpha.2","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.4.0-alpha.2","chameleon-dev-proxy":"^0.4.0-alpha.2","chameleon-errors-webpack-plugin":"^0.4.0-alpha.2","chameleon-linter":"^0.4.0-alpha.2","chameleon-loader":"^0.4.0-alpha.2","chameleon-miniapp-target":"^0.4.0-alpha.2","chameleon-mixins":"^0.4.0-alpha.2","chameleon-template-parse":"^0.4.0-alpha.2","chameleon-templates":"^0.4.0-alpha.2","chameleon-tool-utils":"^0.4.0-alpha.2","chameleon-url-loader":"^0.4.0-alpha.2","chameleon-vue-precompiler":"^0.4.0-alpha.2","chameleon-webpack-plugin":"^0.4.0-alpha.2","chameleon-weex-vue-loader":"^0.4.0-alpha.2","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.4.0-alpha.2","cml-vue-loader":"^0.4.0-alpha.2","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.4.0-alpha.2","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"0.4.0-alpha.2","mvvm-file-loader":"0.4.0-alpha.2","mvvm-miniapp-loader":"0.4.0-alpha.2","mvvm-pack":"0.4.0-alpha.2","mvvm-style-loader":"0.4.0-alpha.2","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.4.0-alpha.2","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.4.0-alpha.2","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.4.0-alpha.2","_npmVersion":"6.2.0","_nodeVersion":"10.9.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-pOEQzcyoqb4Fj/me5bvCj2rkHrhp5f9MsP3HpyJletAL5r+xOf/QbdWePoqjhuHWGrJpYqQKC++AuF2HUi/DFw==","shasum":"780fe7fc8eb51f582802191c14989170a9e749e3","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.4.0-alpha.2.tgz","fileCount":101,"unpackedSize":940882,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdMZQBCRA9TVsSAnZWagAAE58P/3TqJ4gKEXy7fSEXhDko\nWtp/LivskfR/EAkHWw8L+SBGcM6GISZvT5FbBTWxjEFk1enqcdo4SuyKdnJN\nXSpAS5fGdb7Ehmd5OLVTIohRebH5mK/zCTTqqeH1LnavyZTTQxB/BREMcVvw\nABHIOQMAq7y4S18SAL+uf4agQZ+jx3fUH1qVTxXeU0WwwQJVEC13lXq/2+VJ\njf8vieRzCIA0zw51MlJT9Wch7ocbYOznnK81ipkirWQymj6TSCcNuD1t5tKj\n/x2J6nd8u9oc9pd4dnJnj8SQPZNNPxHZ6Q7v9w3FxLVbLtOtb/niqOxUFU4W\nKzgM5Hj1bO04m2M8J8obHfW0Caddfzmps5gMf5IVwga4gsCqqFUGEWHQcHhX\n2UtsAFhxf29AVD9/HPa4eLy7/3PdjNGTJRhVge8gmyZkn2WWD8vTqwoImB4l\nP1EPkouqjs0HYUgQ9BKt47gHVY0js+3AuMVd/PadxE4oai4efT2B4VcMVzxX\nb2gsGQhrDSri4ezYTX41Ih+GiG09X41RDYsUwdcOiE7GPpln3meIdtYpGnUg\nyRIJ11FCjap9/3O8geGYLSgcNFUcC0CpmS85kwK9qUMWtHa7YfVePwj3QHc8\nf4J9SjjLBziM2kcbV4VCi3fLblguDQ95OPXQFRUn5y/2ZjdUZrMM97cworlJ\nGJVB\r\n=8fWi\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDZPiNoDSRzUy9itJwHdQLZ88Zwz2WeRRp2VOge43Pd4gIhAPtqjl73Kt1tHhNtkuZBH1oQ0zFObN3SJKVtg2PRxCeP"}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.4.0-alpha.2_1563530240651_0.10254072951422089"},"_hasShrinkwrap":true},"0.4.0":{"name":"chameleon-tool","version":"0.4.0","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.4.0","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.4.0","chameleon-dev-proxy":"^0.4.0","chameleon-errors-webpack-plugin":"^0.4.0","chameleon-linter":"^0.4.0","chameleon-loader":"^0.4.0","chameleon-miniapp-target":"^0.4.0","chameleon-mixins":"^0.4.0","chameleon-template-parse":"^0.4.0","chameleon-templates":"^0.4.0","chameleon-tool-utils":"^0.4.0","chameleon-url-loader":"^0.4.0","chameleon-vue-precompiler":"^0.4.0","chameleon-webpack-plugin":"^0.4.0","chameleon-weex-vue-loader":"^0.4.0","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.4.0","cml-vue-loader":"^0.4.0","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.4.0","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"0.4.0","mvvm-file-loader":"0.4.0","mvvm-miniapp-loader":"0.4.0","mvvm-pack":"0.4.0","mvvm-style-loader":"0.4.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.4.0","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.4.0","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@0.4.0","_npmVersion":"5.6.0","_nodeVersion":"8.11.2","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-XvQ/pDnq/uSaDyTvsuIIBnfEI6oy0BBWEukopSfTbIFsoRkKnAfNXNdPrkzX1BStlloBOoQfmpJYqG0WxtNl9g==","shasum":"7a650a59d4a269c8870753cbbc6a4a975db2e22b","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.4.0.tgz","fileCount":103,"unpackedSize":991812,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdTBYfCRA9TVsSAnZWagAAofAP/1kve/Ve1BWfy3ouK4xc\ng+vqw7wxPFi2YKThm7SkHe33wrWmV+f1QrIhOLOMGtJJb6ZqsnS2J1hSnMAV\nLhN4+kF4PX7X0GLZ7DIZ6n4M5k1s+HQb1vUb5iWjFqJMK/UQpBJ3U6Ur18g6\n7dO8CDTABqDa2qYsdslmCazSqn7tVLPeChuPiqKjhpxA4MqmRBc85UeP8QQT\nOO5ronO4OxTcYxmIPl0btAQHi6sWFIqGcJAWMFSsIhN6oqxWLXXvuf5s/alT\nVLP8/k5a+dH/HSBZ6NaSXxp+xByPnyg8begWfsMmz8xIZ8OTPYu2UQ3OV9IJ\niGguseLiaCqpuxDSc4r5ES3kAgbn3qMWx+8M8mcj6aGoBr6INVyj3CETn9x6\nhZ7disEpCP5WYWOT1nUEWC9TUgD15JjBMk0PBT9z7dl8ws0ahipiFyxjopOD\nNSL2eDr76aHG6glqQsM1RdXdySnazZn9Scg9E92L3yUaoY0cWrdusA6HQVCa\nS32Yf4ciDofMkdcNRs4CscTBAeQl+VV8/V1L6oHjrOb7Pz2XtEOtwDsLwwMM\nGxtnn21DQRXFIyRiKMC/2bkesdCTDHC0DPIuB3Swxlf2WxeJgphBc8K7Xrcr\nQWQi4b8p7SUd6HKP1FdNDG5HMwQdfNNnBgZ0BbXzSQQitGEAdiZtyv+w63Ps\njkqM\r\n=blFF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCLe8HhejrMpslLfes3zYz1WdWEjn+yA4v2o57s8fUJWAIhAIBvo77OQ406J4sj3VZUum6sfQqmW9eNpnvGBsOQvsgI"}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.4.0_1565267486726_0.8241673930598825"},"_hasShrinkwrap":true},"0.4.1-alpha.0":{"name":"chameleon-tool","version":"0.4.1-alpha.0","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.4.1-alpha.0","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.4.1-alpha.0","chameleon-dev-proxy":"^0.4.1-alpha.0","chameleon-errors-webpack-plugin":"^0.4.1-alpha.0","chameleon-linter":"^0.4.1-alpha.0","chameleon-loader":"^0.4.1-alpha.0","chameleon-miniapp-target":"^0.4.1-alpha.0","chameleon-mixins":"^0.4.1-alpha.0","chameleon-template-parse":"^0.4.1-alpha.0","chameleon-templates":"^0.4.1-alpha.0","chameleon-tool-utils":"^0.4.1-alpha.0","chameleon-url-loader":"^0.4.1-alpha.0","chameleon-vue-precompiler":"^0.4.1-alpha.0","chameleon-webpack-plugin":"^0.4.1-alpha.0","chameleon-weex-vue-loader":"^0.4.1-alpha.0","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.4.1-alpha.0","cml-vue-loader":"^0.4.1-alpha.0","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.4.1-alpha.0","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"0.4.1-alpha.0","mvvm-file-loader":"0.4.1-alpha.0","mvvm-miniapp-loader":"0.4.1-alpha.0","mvvm-pack":"0.4.1-alpha.0","mvvm-style-loader":"0.4.1-alpha.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.4.1-alpha.0","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.4.1-alpha.0","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.4.1-alpha.0","_npmVersion":"6.2.0","_nodeVersion":"10.9.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-1uji1Kk6znaeC6+DH7fzC+hX4izZaXwW20O/hcdb3MYUlSjRZbtaxANrMleMXHzY/m4dfLW1k/ZX3vLmEOeR4A==","shasum":"a3b8dfef7d589b67cf41cb25b6b8bc59b3b5d109","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.4.1-alpha.0.tgz","fileCount":103,"unpackedSize":1011268,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdXUD9CRA9TVsSAnZWagAAo/oQAJwxu3W0b3NkPTeYhpoW\nWfW+SeVYirJdYolVaK091S/13IO5J/vYxdlpcjVYZjGFUePM+/6mahXSny5W\nVlt3a7uasAizhtmaX7QN3Y5HC5J8O9ldxAh80AbOhh7ogLj3Q6uXr1NJ1l9Q\nxkB7K1NWDbOGirN2z5Z8OjxGn/lCOfWF7lA8AOPwKTi8J2cY9IutI0bmPZ1F\nMZfr3k5yhdUUhbC+6HqDe3XXxLa8USeJEondIA6+RqQN/70ss+c0qA0upiTI\ndrm2j2te4jzNQATEyzxHZ+IZ4fWz725Y9gBX7P+qnbB6HsxKAJr/JbS7YZZj\ngAVReRUs7xafHVTcghQ7CZWMVaWYGBpdbkgQpACwQHUKNeWd7j6OW6v7fv6q\nakZEPUHxqtXeDHRAY27+a1RiOWuD5ORxEUZwVz/1a9vZqr/K2Qa2cfrb+MuQ\nU1ux4c0HV9KSBnP9PPLSWY2OvyANkdZzUvzjyAiwmP6hNHmm0zDbjtWhHBhq\n/1HrEOAb+itmKa7WuCuTlP3YvTuSzIZ8UWyXXerN+JEm7Gw3RNsC1GJHLjPD\nPWH806FKNtk8+aYIpL0e9E4HzByCL63tdCoSqWS0e515LH1VHcVsye/YZSpJ\nsXbEtqw2BCeTMb0XGz5O+KlzA3sdf77luwlrU6t9S43ENqpLyfSG9WPYgB59\nR4GP\r\n=m72d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDBkIfR+z4mtV0EGwp6Qx/QfKjhLq1SM5CwKNnHx+zhxwIhAJlc2LNlxalAHpftMI419iMuhsC9byEGKA2owq1JUAqp"}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.4.1-alpha.0_1566392573011_0.12563476340878332"},"_hasShrinkwrap":true},"0.4.1-alpha.1":{"name":"chameleon-tool","version":"0.4.1-alpha.1","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.4.1-alpha.1","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.4.1-alpha.1","chameleon-dev-proxy":"^0.4.1-alpha.1","chameleon-errors-webpack-plugin":"^0.4.1-alpha.1","chameleon-linter":"^0.4.1-alpha.1","chameleon-loader":"^0.4.1-alpha.1","chameleon-miniapp-target":"^0.4.1-alpha.1","chameleon-mixins":"^0.4.1-alpha.1","chameleon-template-parse":"^0.4.1-alpha.1","chameleon-templates":"^0.4.1-alpha.1","chameleon-tool-utils":"^0.4.1-alpha.1","chameleon-url-loader":"^0.4.1-alpha.1","chameleon-vue-precompiler":"^0.4.1-alpha.1","chameleon-webpack-plugin":"^0.4.1-alpha.1","chameleon-weex-vue-loader":"^0.4.1-alpha.1","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.4.1-alpha.1","cml-vue-loader":"^0.4.1-alpha.1","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.4.1-alpha.1","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"0.4.1-alpha.1","mvvm-file-loader":"0.4.1-alpha.1","mvvm-miniapp-loader":"0.4.1-alpha.1","mvvm-pack":"0.4.1-alpha.1","mvvm-style-loader":"0.4.1-alpha.1","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.4.1-alpha.1","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.4.1-alpha.1","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@0.4.1-alpha.1","_npmVersion":"6.2.0","_nodeVersion":"10.9.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-FUcowgwmFohW8Nm1xFQ9tUawC+rBpnhB/tCF8F04Tct+u4Rb52NM8k+EC/97ypAbhokGC8e6YTBziFvLAtcxTA==","shasum":"330b99ee05f903f5145d6fda62f386d4552e371d","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.4.1-alpha.1.tgz","fileCount":103,"unpackedSize":1011353,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdY2sqCRA9TVsSAnZWagAAB5YP/3UjeUrnYFF/adnytC97\nGPKmYOBGaMfxrg1olhFFDb1vz4SMRu33j+hdNYsPxs6Q8YgR0lVhKW93kED9\nIY9ueJKevyYiLnZRn9YfgHuqAofw/7TyglpdsO6eOJJ1o5vELX9pQCEgDp7g\nWAOcotGBWEr5y9eC0AqzI/CbADqjgPlAmyZLB7Wq+k8sxtvKC6WlOZml8zAF\nSuB+rVhUfvkWRTZNDmWNvzqR6sWdfIu/VvMRdwzwE8n88+VEFFaKWWuYzBag\nVlU3mrrxUU3T6FqFcBunzAtcZ6TpkEUrLW0/S+7CNwZOR6I09AHHOsqyPN+n\n1zJj53Xq5808SqQ3GIBBGm/UQV9AEqN+AsB6HnxrkcKiku8CPmMH7CbWn/UB\n5FL+9n8wd6+K2oHFg0A27klxse5IMgNIGIoDeKjzs8opHtsi2nJtqNLGHizG\nk3I19C89q9gj5PRluQr7WhxMYmTlZvCnJWZ7SBIg7AuF2Z2oPBaaMGlTBT4P\nsyoKhSFCn1zoGs3oORgwOC5yyl1fWVXBaWsJ2ncaTl3Kwg27worRRg27Cn+J\nMTuJ3HuqZvpLQ2vPhagO0WW1OHKTivO6Zjvz4Ao8ebUZq+vq3lJg+An2SXiu\nTIUZ7ciawX4Q/vdYQocGnxDmSdTYa2oh7VfAj6PUfvhRr6BM4j0AcAyzjK10\nc07X\r\n=ii6x\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIA/0wwFDFuLXOQMcbFy3OVqXCAiLLR02UnvLPoSC8yKHAiEA+CrKYyMHRVc/L4/8dHTlRVFdA9Mry8Y1scNBPpMlyTw="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.4.1-alpha.1_1566796585797_0.8840881312174487"},"_hasShrinkwrap":true},"0.4.1":{"name":"chameleon-tool","version":"0.4.1","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^0.4.1","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^0.4.1","chameleon-dev-proxy":"^0.4.1","chameleon-errors-webpack-plugin":"^0.4.1","chameleon-linter":"^0.4.1","chameleon-loader":"^0.4.1","chameleon-miniapp-target":"^0.4.1","chameleon-mixins":"^0.4.1","chameleon-template-parse":"^0.4.1","chameleon-templates":"^0.4.1","chameleon-tool-utils":"^0.4.1","chameleon-url-loader":"^0.4.1","chameleon-vue-precompiler":"^0.4.1","chameleon-webpack-plugin":"^0.4.1","chameleon-weex-vue-loader":"^0.4.1","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^0.4.1","cml-vue-loader":"^0.4.1","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^0.4.1","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"0.4.1","mvvm-file-loader":"0.4.1","mvvm-miniapp-loader":"0.4.1","mvvm-pack":"0.4.1","mvvm-style-loader":"0.4.1","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^0.4.1","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^0.4.1","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@0.4.1","_npmVersion":"6.5.0","_nodeVersion":"11.7.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-1szfFpM5LH0ZdlRUGKlb6fkaAVos+AqvmhHbYtuErRulY4ZplMzdiXDvzIyEY+dRNQOgMGiNP7xFfz4ROirZaQ==","shasum":"d716021e59df3299ff37a70ca9497bb306948160","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-0.4.1.tgz","fileCount":103,"unpackedSize":1010701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZfsrCRA9TVsSAnZWagAAS3IP/iOTQBhCTx53kAlpaCxu\nvgCxd5QLnwSKPBVedsLW0R8HyUr8enRf8Dy2j+jrfVL+Zd0l4ekfbD+XhgZT\ncDoATuKdzV9D/BcSN8elO8/x2MHGhRsPn+oHPbcPFo7ddQb+VkxOBvZqYzit\n1fCMD2vN2YuVg+UqPg1KOerzSAkzXm+jbqgiyDKrbg2bfh1Ub2ZRr1MfaLl4\nrxwlTl206ty2f+wqlxlySaR/BLJUCLgapYnn+WyK6XrTDRbTECnc0qw30//s\nGCXC+2CerVB2XpcvJM3vsOc8ExD7jpflB8uG+kqG6s5H+XUg6DcP8o12FEnL\nD510wVqEkei3qLAKkAYgLJlsIa14KAlVFfJMvxTKMz3PHoaflFfXzs6f6p2z\n97NCdSQfxI+2Y5S4GnerY2EXMFMcQHQwwTQ3cEI7bgkQyyFmijpL90XejR6f\n0qgNkh6H6mzNU7jqYli+28oH8poM5XGAXz8qUELoOiat9xAfAp/oMCJjb6dL\nj7xSbLJNqrEh+CpcBH+pVHZH5zN5burGX4jx+ak4ro6FCjwiNLUcnlXdgac+\nB+X+mhJKnkrR3VB1OhJo50b5XJcoYa3FfwnmVtUGjLmLhcA056vP80eWP/CK\nJfw/xZ38s9JPki62ISqE4OMcoQjKa7GayenYdpg9dDjnOuWNgowQnGjFKXoA\nx0oO\r\n=BrVs\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDzOmMkeBGOq9pnEuBaF99itrSTixH+6sodzDdSgL2sCwIgVqmvvV06pbt6UtNY4CbVDImxpwUlT3EhXD29LRH3kMk="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_0.4.1_1566964522433_0.3075189462259378"},"_hasShrinkwrap":true},"1.0.0":{"name":"chameleon-tool","version":"1.0.0","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^1.0.0","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^1.0.0","chameleon-dev-proxy":"^1.0.0","chameleon-errors-webpack-plugin":"^1.0.0","chameleon-linter":"^1.0.0","chameleon-loader":"^1.0.0","chameleon-miniapp-target":"^1.0.0","chameleon-mixins":"^1.0.0","chameleon-template-parse":"^1.0.0","chameleon-templates":"^1.0.0","chameleon-tool-utils":"^1.0.0","chameleon-url-loader":"^1.0.0","chameleon-vue-precompiler":"^1.0.0","chameleon-webpack-plugin":"^1.0.0","chameleon-weex-vue-loader":"^1.0.0","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^1.0.0","cml-vue-loader":"^1.0.0","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^1.0.0","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"1.0.0","mvvm-file-loader":"1.0.0","mvvm-miniapp-loader":"1.0.0","mvvm-pack":"1.0.0","mvvm-style-loader":"1.0.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^1.0.0","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^1.0.0","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@1.0.0","_npmVersion":"6.2.0","_nodeVersion":"10.9.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-z+77Bgq5mtDlQxENzxttH54rvIjqj+uz4VzDU58byoCsNhQiaBqJz3K3pLlLU/SBFaKFFQ1IqWhRsTCuiNxcdw==","shasum":"dd22429e6f0b20dafde1f02f8fc7bf914dfca581","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-1.0.0.tgz","fileCount":103,"unpackedSize":1010701,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZnw8CRA9TVsSAnZWagAAbosP+wRHqwUFQA3t2lZsXWkp\na4UGf5PO0rOKwkFnrlMaSObo5gQwjbERAvla7GgPr/V6A2zLiJAMm3tMAedc\nvXuwUskun8wYIjGRsTCPKBZdfBBxHkt4wy/Iq7HNFpFS0znndvHfBKMcj0FU\nrzQ2N70Ftl+rAyHOLed7+55mriyJozcQnhV/SlTbUgUyeF6bw6Jv73BnvV8e\nLp0awLTvUx+z9aTO3pBlwSXIaYl+PrK/G4o8CI6jTezhCHNdKBmshno5iPgV\nQW9bclZrKzTLSZykw8RPP6sbxuGV2o0dxZbA479gIjwrg7w/xICl+2zYBAWL\nNPnkubRB7DovPN5GkM5jVkjRTzHWZwnafIDRo6y/jYa98KcoRFvtXs1999/e\nMSTYWDVFVVf+4X/gz/ipkyM/qRjmq7mSCOdBYXsinH5xiPS0lOKr+uWO2Yll\nDQFA3Mius6lkyRnKp9hAqn26hSGEbKNy295kN4px5FOuG9FibhiMpu/499aj\nsVchKMD1ZG7BbSc/xWzsxNBI2kmAoN0zruM+ahioVXtVbtnEVCHXemo5xk/f\n0sGbDq+6gKiU7T7Ka1RXD1bxXsWoCp5RcsUDyco0CInfL/3qL9nmO7cHdKMr\ns2Ix/6UyNsdJJ+w80XoOXBdQPYYmvRD6VLxUXR7rHeo4eoxiWQPMKHmVvkgB\nO40K\r\n=U7r2\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIGLtNcZ/QiLfRyy6VhJtpLHentfDB8BjxmI0cTLxVgMcAiAYBE4BqO+7qkG832j/Nr8chYc/p+HR07AV99me3SRnxg=="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_1.0.0_1566997563339_0.5775569058214944"},"_hasShrinkwrap":true},"1.0.2":{"name":"chameleon-tool","version":"1.0.2","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^1.0.2","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^1.0.2","chameleon-dev-proxy":"^1.0.2","chameleon-errors-webpack-plugin":"^1.0.2","chameleon-linter":"^1.0.2","chameleon-loader":"^1.0.2","chameleon-miniapp-target":"^1.0.2","chameleon-mixins":"^1.0.2","chameleon-template-parse":"^1.0.2","chameleon-templates":"^1.0.2","chameleon-tool-utils":"^1.0.2","chameleon-url-loader":"^1.0.2","chameleon-vue-precompiler":"^1.0.2","chameleon-webpack-plugin":"^1.0.2","chameleon-weex-vue-loader":"^1.0.2","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^1.0.2","cml-vue-loader":"^1.0.2","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^1.0.2","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"1.0.2","mvvm-file-loader":"1.0.2","mvvm-miniapp-loader":"1.0.2","mvvm-pack":"1.0.2","mvvm-style-loader":"1.0.2","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^1.0.2","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^1.0.2","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@1.0.2","_npmVersion":"6.2.0","_nodeVersion":"10.9.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-VKSPkXm3NfxbezySOgr8sR+Q3n613xWcjNAM8ctWOW6LGwAlHEA069gHd08BwEB5y+t9FVY/azaLuBXcobFOGg==","shasum":"1214329d7440edee3fbf60c6a7807b0391cd7e63","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-1.0.2.tgz","fileCount":103,"unpackedSize":993324,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdZoghCRA9TVsSAnZWagAAl5gQAIofUwNvfuaTBwcC78rR\nbRCqNHOD6MTLr6M2WCvj+wmB/e1UwdR5O6CIMAvgL4aunsjMKRXw1g2uDHvm\n1sS/p7HXxBPdYTtaDvqoCfxN8l3bFhLq1CDLnnYlGDm1iScYXxUwryA1cjn3\njBHzvkJtRmT3zoZTv0d7MHTZbhDqCqi/TWdu+0oYa8iPHIGLVlhPDxqyW3JX\ndDQnicnruL5xp6KljWrZbmK2ghsXy8RFl4Da84jy9gaTUqmH10oRqZYOqBzj\nS6Nl3koGLsewk9nIRRoPryRUHnV7vcn9YLKIDPWnlaRE1FrCMmID7GB6ZRvF\n9GK9U1ifsjcIYwyXKuHIRxIvZknq+q6v+HCfkiHDEt2xMQYVEqBos/kGCax+\nCw8gHw33WjS8hXRiragVuvxp1PyND7MIODbzCi0xlc9IlaXtFUH8gw7+xZ5t\nZ5Y8wd9dQ343Qhs9EtZwyUytzF8VrpaJ0dx40DYGSeLq/QouDvAUYOO5rTL5\nNhTpb0AC/MKTsBjnxVzscabK+Z913bCkfxFIKF7x3T0pwcWJe/asoDWHl0Af\nb95RzAbvuqjvKxbqoqB0RLOG+kV0+hBey6IPlCGwYRNcubMbf+RJBkh7ueQS\nOkUwzLdzJwgWmqacFzLJN6usiugB2oVGxoJnx9wneX/v+KtUDdyREpYwlXbk\nKnEc\r\n=LnEN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCXUlkPICBBb+zdfmMM5qa3u/X9d9Ei8t5hRKseqO3HqQIhAMKrM4bVHCW/f4vT9kkDwgbS42iYcLAgq1MALcnw1Uze"}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_1.0.2_1567000609142_0.4955560479480001"},"_hasShrinkwrap":true},"1.0.3-alpha.0":{"name":"chameleon-tool","version":"1.0.3-alpha.0","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^1.0.3-alpha.0","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^1.0.3-alpha.0","chameleon-dev-proxy":"^1.0.3-alpha.0","chameleon-errors-webpack-plugin":"^1.0.3-alpha.0","chameleon-linter":"^1.0.3-alpha.0","chameleon-loader":"^1.0.3-alpha.0","chameleon-miniapp-target":"^1.0.3-alpha.0","chameleon-mixins":"^1.0.3-alpha.0","chameleon-template-parse":"^1.0.3-alpha.0","chameleon-templates":"^1.0.3-alpha.0","chameleon-tool-utils":"^1.0.3-alpha.0","chameleon-url-loader":"^1.0.3-alpha.0","chameleon-vue-precompiler":"^1.0.3-alpha.0","chameleon-webpack-plugin":"^1.0.3-alpha.0","chameleon-weex-vue-loader":"^1.0.3-alpha.0","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^1.0.3-alpha.0","cml-vue-loader":"^1.0.3-alpha.0","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^1.0.3-alpha.0","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"1.0.3-alpha.0","mvvm-file-loader":"1.0.3-alpha.0","mvvm-miniapp-loader":"1.0.3-alpha.0","mvvm-pack":"1.0.3-alpha.0","mvvm-style-loader":"1.0.3-alpha.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^1.0.3-alpha.0","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^1.0.3-alpha.0","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@1.0.3-alpha.0","_npmVersion":"6.2.0","_nodeVersion":"10.9.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-mO1bh6D8jGTgLWpkgyiuJcvZeNGeRFd5Bx8qmcxpTYdOYdhqAMhZWqFSwPMEMz5WvwYav70WTt4G/gP6WoQp/g==","shasum":"14dac6eb9096739fcfa9b587607873b394f072c7","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-1.0.3-alpha.0.tgz","fileCount":104,"unpackedSize":1013261,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdb5NHCRA9TVsSAnZWagAAs2AQAKR16tCAzaFLwglaR9n+\nnZnrKsGJ2XQpn9fXOaVJL6Puxwk5jKjmXGhnHBjccZAqEw0bo02rDMOtwE7z\n0RR41MdJNCxjNhXpg1G17QYymWiX1Ntvir1fqhbXV4GSWsXf69cFMPgnIi7z\nol994Qud6pjF2OwFeYFKaA0EU9a6YtYQs4t9i84Ji+pPr6YZuLbNtWfhHeb5\nmvKXph6BBiQhrtbNdgaAScYzyiGC3ionz/tF8NLtrrAjkUX//pYOtE3G7odX\nKwEy1bYCLESyON+jVg+i9yTX1y5Sl8l6T8O7yWPuZmQehw8cKtx+zPQb6QTc\n7zhK1m3Z0iVY/nfqnFJgGpLr3VS9sEOG161+OWMfoPzGjpUFdAdY0oVoS7Q+\nPYgcaZzkhaOsJ0wKJled1nDve58q5lEUfu9ZwMB/imZwR7BS0LzLpc6OS5UI\n7/MRCkUUQimwCT1wAaNXyPDmYaBl2Qo72bjTQNEY2QMMSS3KV7yqfVTPuezQ\neswXTOebRaJZjc+DERQqgrmiUOFMvmT3d42GYD21u6MqZN1XfO1vMXLWniBd\nTR/6Tktsu06Fb2ETpuPDE75lZH0JrDaG5WUs1rzlnnKnAXiPgv19TbBPBLnJ\nADMmjo4KXE/BEH1+X64DpEerMdKLcFHzRGA5zrobak0b5SPZwVl6tAVfv9U3\nec/O\r\n=fomP\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8DGMO23RRhQKvUyfJUjBg+WbaIbgeL0WTOTbbZHSfqAIhAMV9yUpJP+if+P4lgK5FbJAlXK1KCxKXuLr6X09LVE/o"}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_1.0.3-alpha.0_1567593286658_0.18104227376640014"},"_hasShrinkwrap":true},"1.0.3":{"name":"chameleon-tool","version":"1.0.3","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^1.0.3","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^1.0.3","chameleon-dev-proxy":"^1.0.3","chameleon-errors-webpack-plugin":"^1.0.3","chameleon-linter":"^1.0.3","chameleon-loader":"^1.0.3","chameleon-miniapp-target":"^1.0.3","chameleon-mixins":"^1.0.3","chameleon-template-parse":"^1.0.3","chameleon-templates":"^1.0.3","chameleon-tool-utils":"^1.0.3","chameleon-url-loader":"^1.0.3","chameleon-vue-precompiler":"^1.0.3","chameleon-webpack-plugin":"^1.0.3","chameleon-weex-vue-loader":"^1.0.3","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^1.0.3","cml-vue-loader":"^1.0.3","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^1.0.3","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"1.0.3","mvvm-file-loader":"1.0.3","mvvm-miniapp-loader":"1.0.3","mvvm-pack":"1.0.3","mvvm-style-loader":"1.0.3","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^1.0.3","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^1.0.3","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@1.0.3","_npmVersion":"6.2.0","_nodeVersion":"10.9.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-xlfq0cUuNdoPuG9SZn7ITSaCtEN/BP5R65V4dMTcWnQYshnUkntKL2jPTtjVsTRRmySzCjQ+xj0HcnKVvZwSWQ==","shasum":"41e789de47719daf211dd41db61d17f9a0c1c9ac","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-1.0.3.tgz","fileCount":104,"unpackedSize":1012929,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddkB4CRA9TVsSAnZWagAAR40P/R26KUse/4aeBNjUvjWx\nQsZmqn7NlgSrDaveIu7QHTwwmALm8ZV+ge7UW6Y7ULN7IVZHmCfyalSkAPGC\nlAGFLs00t303WL1Zw3ENtuHRteUdgRigSDSC3iFemwJ8M5LUxB/QVxwdT8JR\nvfKsSGRcIipd4pZ84j7EFAWAZ22wtp66lLDmjpEfx6DTNEQ4eqJFN4VZzA0Z\nESZQhq5+LpqW0618c166oBKNWQScAdcaImIX1EpYQeOy9IT3RBopYPxWc/GO\nR20u0SpVXGn5TxnGwpyk/cFgASvMFVPtymPIIUAjUwAaGGxQxlV7Ie/OD+sN\njpbE8Uu4cT2p2UlXqDuufLMGHlYBgVCr1607JLR03qztXYpMV2kIhfxnGlZ0\nQleYZTS/bD4UrJrrSTYPWbFu1OFSkVoaDuCeJz+pfuCl/fyo71uxCKK8f1jq\n3YZY6lTmDI1KA7H6gvOIVGvbeizKfC0V58Ze4L7+ladvU4MHLuMbfKoRDdNN\nkZC8loxThLsUQIz1c9GOn9IsFx+QxxlihmB0SDAB7c+VrRFixXXw6wsVqtRt\n+QjcKD+Vh8I4Zdclh65mSQdbxyY9DkF7KZVS63Z8xNsdCX4aWrA3eXQ110VP\nYPtth/V3QM9w/iXLau5gFCt02vC5IAi0jJXFOw8lwoUgm8eBQ989nmrXTG33\nMiht\r\n=7qsf\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCwGoQ1dulXrev/FsmlbFWh8x3I1gBVphakdBWTNVFX0AIgcM/uQpPAmpQnk1pFjIGgY+lpLlscpIfI+128XdNX4L4="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_1.0.3_1568030839555_0.760169074606871"},"_hasShrinkwrap":true},"1.0.4-alpha.1":{"name":"chameleon-tool","version":"1.0.4-alpha.1","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^1.0.4-alpha.1","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^1.0.4-alpha.1","chameleon-dev-proxy":"^1.0.4-alpha.1","chameleon-errors-webpack-plugin":"^1.0.4-alpha.1","chameleon-linter":"^1.0.4-alpha.1","chameleon-loader":"^1.0.4-alpha.1","chameleon-miniapp-target":"^1.0.4-alpha.1","chameleon-mixins":"^1.0.4-alpha.1","chameleon-template-parse":"^1.0.4-alpha.1","chameleon-templates":"^1.0.4-alpha.1","chameleon-tool-utils":"^1.0.4-alpha.1","chameleon-url-loader":"^1.0.4-alpha.1","chameleon-vue-precompiler":"^1.0.4-alpha.1","chameleon-webpack-plugin":"^1.0.4-alpha.1","chameleon-weex-vue-loader":"^1.0.4-alpha.1","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^1.0.4-alpha.1","cml-vue-loader":"^1.0.4-alpha.1","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^1.0.4-alpha.1","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"1.0.4-alpha.1","mvvm-file-loader":"1.0.4-alpha.1","mvvm-miniapp-loader":"1.0.4-alpha.1","mvvm-pack":"1.0.4-alpha.1","mvvm-style-loader":"1.0.4-alpha.1","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^1.0.4-alpha.1","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^1.0.4-alpha.1","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@1.0.4-alpha.1","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-LVAXE3T6yx8ogVAUz0NC2tTDW737tZI7sAzEKrUfHCDrMpDMCQC2Tm4xcGFph+5fTbVP9s3yPdH4ZauyWF2xxg==","shasum":"e080d5e9a51f6c6a4006e24c0c6528b3119ac32e","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-1.0.4-alpha.1.tgz","fileCount":105,"unpackedSize":997705,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1SV4CRA9TVsSAnZWagAAsrEP/ilvgkRMzQC2oF8G043B\niPLxCz0a9+QuoNXNnMWpecw/qJ6qzQUZ2MryL1MDgbRG7jaL8Gl+uVozKpow\npf2oh5mHguqyk9jlVdIpWkb7iXiagTAvr+MXQ9itbyM+TFm9hRMWP0sNO+tf\nIHX6j1QHGOy0kZZwfUt4OKlA3nczSV1rw8Ae/E/bdxK4aIESll7AjcB6XdGu\n+Vfzg0ZWFkn3JZFwMPrSnMQBoPi6bHONqYhLM7dFsJTH01+q+J/+HlkbY0zq\nx6aLbkDjQK6Rygr0C0Qy8fkeeHwTdYAYAkAKBb4cD3uHEkQnQw4t+ZKw9G0l\neAL8evw0zm+wrwPj6SX1T339Q5xQKMvafijZUp794XdOkFY0QY1evcarFiDs\nQlblPaRw7gBFWoDByJjF7+pX4rLAP/4imT0P1BbrGHTEwBj95M3qZIWSrNBI\n8xKyySl0+OlCzcDYWcuOatC4GwRjY2X4ZDNYNClRAqQHA061XDSZHH24UYav\n4ZOacl6qnXSHZ1D/uaf9u818es8RGKDQLwAFp8R04ntLXw16OwKUuJy9Qse7\nUVLByGn60MZtvxq2bId+DNCD3ZTdtgXMQYCQPWoU+lJXY3IW//9HZPOaoLTA\ncF7soRT10TVdf2F7rEX0rlTQ15sMUOW4TH939UDG7gJ4iLeARlJCNqxGcg5b\nixsz\r\n=SrSx\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIB2BkzrsPVJFce34O2vAgA0DgCeJFxtgH+2jWevBGutbAiBSFQJ9FK5ozCkn6SmtjVot/hphRVeY+ZIWaDmcjUR0Wg=="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_1.0.4-alpha.1_1574249847807_0.7777907356816289"},"_hasShrinkwrap":true},"1.0.4-alpha.2":{"name":"chameleon-tool","version":"1.0.4-alpha.2","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^1.0.4-alpha.2","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^1.0.4-alpha.2","chameleon-dev-proxy":"^1.0.4-alpha.2","chameleon-errors-webpack-plugin":"^1.0.4-alpha.2","chameleon-linter":"^1.0.4-alpha.2","chameleon-loader":"^1.0.4-alpha.2","chameleon-miniapp-target":"^1.0.4-alpha.2","chameleon-mixins":"^1.0.4-alpha.2","chameleon-template-parse":"^1.0.4-alpha.2","chameleon-templates":"^1.0.4-alpha.2","chameleon-tool-utils":"^1.0.4-alpha.2","chameleon-url-loader":"^1.0.4-alpha.2","chameleon-vue-precompiler":"^1.0.4-alpha.2","chameleon-webpack-plugin":"^1.0.4-alpha.2","chameleon-weex-vue-loader":"^1.0.4-alpha.2","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^1.0.4-alpha.2","cml-vue-loader":"^1.0.4-alpha.2","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^1.0.4-alpha.2","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"1.0.4-alpha.2","mvvm-file-loader":"1.0.4-alpha.2","mvvm-miniapp-loader":"1.0.4-alpha.2","mvvm-pack":"1.0.4-alpha.2","mvvm-style-loader":"1.0.4-alpha.2","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^1.0.4-alpha.2","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^1.0.4-alpha.2","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@1.0.4-alpha.2","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-HIEc0DWMt9JqHmwJpq+r/0HwcL+5uu5wz1VjXVw/2Dv1fYeraCneNe6rGvh80U6bJ3MGzzqg/cHq1X4y7qg+mA==","shasum":"faa145750e758f102033f8bb4ace32717ff4b6d0","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-1.0.4-alpha.2.tgz","fileCount":105,"unpackedSize":1026040,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBFz1CRA9TVsSAnZWagAA8DAP/j5jtnjeIhT6upvRM+aO\nMuODa3YvLNdyP6sP/UG0lGMI/eljFzKyO9Mz15xhaifq4K1x4Y4w/moe0a5I\nK+XFrU7a1cV2HBeKIyxPWqbth+OzXq3oEWueEIU/bhFj4kUxDlev03RqkqhH\nzd35vDxkX5SsgqFTSt3TLXRKZSM/fOil4+/Oos1AfStUfVlzuG6cI+iEfTtk\nh0b7WTuxrl/+NniYnn8bJRP98Gi0sLir/Iiwhj9L4geMJtqLXxmrnVoN7Ut9\ni5r/ty34SH5T0qK3e30WXWNOgthqSw6pi2yQBgcJXaunRY0AG+FVIKkpIi1d\n3uTI7avvWrdt+NkXWbVzQugGYm/+3/WVjdg1H+DkWAfA6JCelmEhPa5drKRl\nJ9tuEHdbmf5JiAS6XDthbqsItGt3AGJDuw9QcLbzCQLuT9/C7L2tlbcA0H2p\n6zyUXGhwki65L+WCoB+MeNYYTJkoEYPydEQLfXdHoG4srAtCz2/T0wTMEH5n\n5mYr2At6SJBwsxhkPIZ/JDqF4XwT+4R5AFS8iOcqYabXmPNM9E0JraWTCmMV\ni/QSM1I9iCV5ZvCJdNbGFIKMjB0dN4lrS3KCMAUpeE9XjhCSvW3ta/sk7Ysk\nyzA4hiBURdtLGGgsdNPofpGIncYBzVzVfQ2Pp4RweABkFBSfyF0KSuMkqqh6\n38f6\r\n=kxm8\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID8vPKHpM6Nnj/tauKvt2mD9nbEKfPBFJ0AdYuOceaKOAiEAlqVti3yh70qyJ7lS7JDrQa2KOtMgS6RYqzWfxxNc+L8="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_1.0.4-alpha.2_1577344245504_0.3103753766795816"},"_hasShrinkwrap":true},"1.0.4":{"name":"chameleon-tool","version":"1.0.4","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^1.0.4","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^1.0.4","chameleon-dev-proxy":"^1.0.4","chameleon-errors-webpack-plugin":"^1.0.4","chameleon-linter":"^1.0.4","chameleon-loader":"^1.0.4","chameleon-miniapp-target":"^1.0.4","chameleon-mixins":"^1.0.4","chameleon-template-parse":"^1.0.4","chameleon-templates":"^1.0.4","chameleon-tool-utils":"^1.0.4","chameleon-url-loader":"^1.0.4","chameleon-vue-precompiler":"^1.0.4","chameleon-webpack-plugin":"^1.0.4","chameleon-weex-vue-loader":"^1.0.4","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^1.0.4","cml-vue-loader":"^1.0.4","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extra-watch-webpack-plugin":"^1.0.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^1.0.4","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"1.0.4","mvvm-file-loader":"1.0.4","mvvm-miniapp-loader":"1.0.4","mvvm-pack":"1.0.4","mvvm-style-loader":"1.0.4","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^1.0.4","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^1.0.4","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@1.0.4","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-sLGfjW8Xs4Te2LHGACL/7brKpiJer82d6RGIWvSJnZ2AcchYsZXUNQ/NPnzumcgKIvjmJBcaOMwVaCcyFDlTnQ==","shasum":"2008f068915633c5ce54c7a705a73d9302dd2e9a","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-1.0.4.tgz","fileCount":105,"unpackedSize":1022913,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOUcnCRA9TVsSAnZWagAAWBsP/i2uT2IIRR9ChavRvQHM\nZBW0HIoM5khrxHGMFSbFL9KlH9FhX58rxYutInyv2ORBAiyV0TIHSXWqKDCP\nxTBDrrOA5NPBDAO6reybEdEbsat05g1/1UW4vaWXuVPJPiAm528KVLfRsdT8\nUbGObvWWx+j49nAUMEq3Q3HPXNEpgY3AVa+blesuv6F+Phdxhl6xKsHdAJl9\nyNjOCD+68tqz5i0fsCrkurgxfaUoSnb0GK2pWjXZaW4Rf4ljFX4Ub0KbFz0e\nFS3G328quSQv5GJABev2CjdVyNtKzG5sliK+tP4wmNfmny0lBgK8VrxVt0/z\nkqHfCytdGE1ECR4mMwDEch/cceSiVd7QpOFoJIMX0SoKnD/Nh1ChSwKOtdCj\nYponBFc643Ucy80jFrqWCManKYgsPXO8Bxsyiih348n8Vl/icoz3Hxjs58Nd\nR/eIL+rYTQOZm42ipzZxsjQIaekcRKk4CbqrUQ8eYwqAMij045EFwZLHDjGw\nwqP10I6ldjC3hfbTVpfuNMt3sYLddvDoSFOg05GHG25IoT4NbpzOTWfjkFxB\nC/axStKBd/fclR6OXW3tMnKtESt2sBY0pWVIo053VMtOMF6eBH/l6nZ4qrXw\nBWAj7stnSiNGWzw8mPIYOgbngpjzZUkETTxtxnEENynIyKVzRDqEMtW76Hyg\nSuJL\r\n=V325\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEckfltlLbjnJ9HIqB3XNf3/TfZ0ndeU0aiz/INSvQ07AiEAyAx7VzuDWJhzf2YN5vUPmCH8SKhhAr1JC0OUtN3RLEA="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_1.0.4_1580812070587_0.34601571860423364"},"_hasShrinkwrap":true},"1.0.5-alpha.1":{"name":"chameleon-tool","version":"1.0.5-alpha.1","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^1.0.5-alpha.1","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^1.0.5-alpha.1","chameleon-dev-proxy":"^1.0.5-alpha.1","chameleon-errors-webpack-plugin":"^1.0.5-alpha.1","chameleon-linter":"^1.0.5-alpha.1","chameleon-loader":"^1.0.5-alpha.1","chameleon-miniapp-target":"^1.0.5-alpha.1","chameleon-mixins":"^1.0.5-alpha.1","chameleon-template-parse":"^1.0.5-alpha.1","chameleon-templates":"^1.0.5-alpha.1","chameleon-tool-utils":"^1.0.5-alpha.1","chameleon-url-loader":"^1.0.5-alpha.1","chameleon-vue-precompiler":"^1.0.5-alpha.1","chameleon-webpack-plugin":"^1.0.5-alpha.1","chameleon-weex-vue-loader":"^1.0.5-alpha.1","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^1.0.5-alpha.1","cml-vue-loader":"^1.0.5-alpha.1","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extra-watch-webpack-plugin":"^1.0.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^1.0.5-alpha.1","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"1.0.5-alpha.1","mvvm-file-loader":"1.0.5-alpha.1","mvvm-miniapp-loader":"1.0.5-alpha.1","mvvm-pack":"1.0.5-alpha.1","mvvm-style-loader":"1.0.5-alpha.1","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^1.0.5-alpha.1","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^1.0.5-alpha.1","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n> **[success] 尝鲜版 **\n>\n> 尝鲜版提供了百度小程序和支付宝小程序的支持    \n> 如果想提前使用可移步[这里查看使用](https://cmljs.org/doc/alpha_version.html)\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@1.0.5-alpha.1","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-fwmtv6pygFCqVy8q7ciB9NhkFqZE3/fetGmwkLQFi4714zvKXi2QmZ+Pwin3m5IFPj4wrGVFD3O5XPCyzdz1eQ==","shasum":"6a3547ae23a7ebe534a450721d9dd4ba8ad902ad","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-1.0.5-alpha.1.tgz","fileCount":105,"unpackedSize":1033986,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTNM4CRA9TVsSAnZWagAA4fIP/1bJv059/ToZQumAiUlv\nrPmjb+U+BA7Y/VTrHJI89jRWHlWQVY9s2UxF71E66v7RPvWe/VLJpd0L+fBq\nWZd6ft2pqpp07291Qujhtt+XTUYYi0ySfae6KIEbpyTz/5BbMnfAa+zrNb0j\nc4/jCQO6hkVAky27rOpv+VcrD+BZ3skzYb3NY78kpWH3T1vDsCtNXZYY9oil\nwNono8bDPt1Foi07xZq3OtAGB207+GH3VE9bwMX+en+a2NLb8onJ7nlrrYSV\ngRJU30PntoCw91oPSGdbzmNUyWmT+ej9sjNI8UgE0D2g7T+xU7IEuPB5Z1/8\n60b/nqf5GkY6GUySTwE4/tajXw5rk0rS1MXtihN9lYENwwH5e3FMVm+lbLyr\nxP/cp5yMxPYx5bTdYmjJBGQ4Q+VYfKwPaMAwfKLwizl1JE+QFO8GzFBf68YY\nDazsjxbfbHAomWivaIDEy1RAhBx1cZlOL467c4CZ8IJjIbGRpbnNQPOofp/O\ndVzQYHCJAcIzBwxJN6UQs7mjPUp4jdocIwNVZQSUUF7LtcHQoVmARnF4dwYR\n0X35s3/A/9+t7sVl2QFYxYNEr5UWEOrLgbnlbulk+uPObGhD6WzXcgOP9Ybm\nG5MBfgBPa1Cz2XEFQnmRSuZ77aJkvXVT5FAsTQXnPsXBGd9s8+WNXe49U/FO\nntOb\r\n=c/xH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDlkj9a01TTaBF40UaGyOBjVoGtVkbMNiNwWTzlNWXHbAIgHAXfER23wteGMBQvTMFymzmbcZYTf184Jo+uQL4iL5o="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_1.0.5-alpha.1_1582093111922_0.8565027662055058"},"_hasShrinkwrap":true},"1.0.5-alpha.2":{"name":"chameleon-tool","version":"1.0.5-alpha.2","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^1.0.5-alpha.2","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^1.0.5-alpha.2","chameleon-dev-proxy":"^1.0.5-alpha.2","chameleon-errors-webpack-plugin":"^1.0.5-alpha.2","chameleon-linter":"^1.0.5-alpha.2","chameleon-loader":"^1.0.5-alpha.2","chameleon-miniapp-target":"^1.0.5-alpha.2","chameleon-mixins":"^1.0.5-alpha.2","chameleon-template-parse":"^1.0.5-alpha.2","chameleon-templates":"^1.0.5-alpha.2","chameleon-tool-utils":"^1.0.5-alpha.2","chameleon-url-loader":"^1.0.5-alpha.2","chameleon-vue-precompiler":"^1.0.5-alpha.2","chameleon-webpack-plugin":"^1.0.5-alpha.2","chameleon-weex-vue-loader":"^1.0.5-alpha.2","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^1.0.5-alpha.2","cml-vue-loader":"^1.0.5-alpha.2","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extra-watch-webpack-plugin":"^1.0.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^1.0.5-alpha.2","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"1.0.5-alpha.2","mvvm-file-loader":"1.0.5-alpha.2","mvvm-miniapp-loader":"1.0.5-alpha.2","mvvm-pack":"1.0.5-alpha.2","mvvm-style-loader":"1.0.5-alpha.2","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^1.0.5-alpha.2","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^1.0.5-alpha.2","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@1.0.5-alpha.2","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-u3gk48dhHqKhfzU0R6AkvE6UxzQZfErZI4Oi26hziU+hmijkCKMiniC732XSCD+WzmCrHPOk3115WfiZT6rY+Q==","shasum":"9c8b4d5b43fa7f90206e848ab031aa369c18d212","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-1.0.5-alpha.2.tgz","fileCount":107,"unpackedSize":1031315,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecZt8CRA9TVsSAnZWagAAYkcP/j6Aen4E3xwsJbT3EvhT\nuJOwkNNKn27Aw++G2SIUZ1vdNrEMJgaebMBuNhTN3rF10Hs9TzcAo93cBvlD\nprvaokmKBk9NNAMRVXDru0FlNMqwC98l8KVoPS8swU7vFXdEakAXupZ0kVYU\n5umiFkEjK9Y6rdxEeaM+HIggUF99Zw4rTyg1Eal+GsM01kHQ7g3Ux9An0/UU\nHiyr9BkkgHaC0+Gcdbj/nEJOd8yWyB7B6heWBaijUtknBUomUg5TRtFXVd/K\n/52VcEH8AmaeURj/KyEws4LBnKHI0Rx0+5GMx3w+BRmNs0o8TEKNPaOsIgKU\nRTlIwotMfI9ndA+/iFtSXeoRl8AgzXr6+FSONWne0gAYuTduoXttNKbOoK6H\nPCib186usx5G7q52s4qtM1VyNRasXuTprddkt1izB47cHNvVI1Xhf/SjeUmB\ntKEcnSLnXyBxCG4H7UPPdj6WW5l9xyp6M1nG9ReU/jEKLciFHo5gRhjSbT4L\n54h5XVrU5N7CYzfZzIXBJJ0MIjQLGh6WY1uMFkPwxyxAZ35+3Ba/GlAJcn06\n80rCHArsOR57l5WitR5Ka4HV32ZMoVXmRsye7Y6ToWng2OzMLWf4QD0J/OmV\nuyLNtbI9qWmviwQ02THUKsvfEkWhHkfYobX3tmPm7/FPiDNsS+9dHN/M5mGi\nWgkp\r\n=x6Cn\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCEOPhb3P+kXeoCPlLNMifsmHKPAXxhU0scJx3mHkpU6AIgMTjZgwD/Te+DIdTqFMwrVBJE7g8bmhuIK7AwHB/yf/g="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_1.0.5-alpha.2_1584503676404_0.7074761677026635"},"_hasShrinkwrap":true},"1.0.5":{"name":"chameleon-tool","version":"1.0.5","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^1.0.5","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^1.0.5","chameleon-dev-proxy":"^1.0.5","chameleon-errors-webpack-plugin":"^1.0.5","chameleon-linter":"^1.0.5","chameleon-loader":"^1.0.5","chameleon-miniapp-target":"^1.0.5","chameleon-mixins":"^1.0.5","chameleon-template-parse":"^1.0.5","chameleon-templates":"^1.0.5","chameleon-tool-utils":"^1.0.5","chameleon-url-loader":"^1.0.5","chameleon-vue-precompiler":"^1.0.5","chameleon-webpack-plugin":"^1.0.5","chameleon-weex-vue-loader":"^1.0.5","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^1.0.5","cml-vue-loader":"^1.0.5","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extra-watch-webpack-plugin":"^1.0.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^1.0.5","ip":"1.1.5","less":"3.0.4","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"1.0.5","mvvm-file-loader":"1.0.5","mvvm-miniapp-loader":"1.0.5","mvvm-pack":"1.0.5","mvvm-style-loader":"1.0.5","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^1.0.5","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^1.0.5","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@1.0.5","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-ZLIAb9XB4DPIvCf4UyDNfbg4cyVjTeQGACEv0BNZvGL1LKIrGVqlUeYy9wBzQS4FWaqCj8fCKNk7ZDbu2iFqOg==","shasum":"20e8eea6c7e1b2d58bfc699636d251bcef896294","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-1.0.5.tgz","fileCount":108,"unpackedSize":1281319,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeetbcCRA9TVsSAnZWagAAmxkP+gKHLN39Hh9rbXmFRle3\noLjffN6b7JqaYGeTXN+W9zkKu/0AfkrDI2l3o9ScbijGVH5y375qylc+MG7u\nvQhqO4zbPjaggTR9U/e9sCoeqda5Ft7UZQ9x3V9HRdIdttet2MvPBE71t7bG\nfxwUBXYjGd3i/ckY41duBh1EFkI+/u8nBh6NXP9bn1+uhnkLOw0YnGZBqtF5\n8CXiM+qhv96S45Sq7zH0MtOraNzhjxXtKR2OwkAqq0jBZccG9yiZjsp9SHIr\nD7BhQgrqrQ+l3cYJcOMI0QCxP4UZOZrFyHEyEyqPNTJJfpcAEC9IGesfnGMA\nlo4OF20a15YjNM8XpYAK8mlgfSAwZnNCRcG/g58r6+UzG2A8/Zl6O7OXZNW4\ny3ktSfWwK3ki2IdAsuORP4n/X/0e8tS64VJFmHJzbNwMimRox62Fy3RhF/QC\ndFVT/hMPY4cqo27PxINnED7tEGCKpSeoBNain7sdmnwUC+jtHmMV8QX3VGFU\nozOiWtb7+I0AqN59hXni+LbjahAwTtv/RjR32mAiqNwFif3h/8312de8mjhU\nyJPSIfMP6VJbuJO6jBZAdk3b6nja0oaOmMjbbr6l8FZlIId51rzaYX4Yx2UJ\n/txAaJfbsjgu/EM8htFVwF2TIAVSFesuPN5hquz+wOD+/JHIP1A3pTgN10ql\nhAB8\r\n=55+t\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAMJrhr8ZuallyYOTEZa/sz2Og0Ckp4w/SuUlvJ1RZqDAiAgdIst0izxi9adIq4VlmzaAqINyEfLi9NGxbdF4nfmSg=="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_1.0.5_1585108700132_0.18164928111540934"},"_hasShrinkwrap":true},"1.0.6-alpha.1":{"name":"chameleon-tool","version":"1.0.6-alpha.1","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^1.0.6-alpha.1","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^1.0.6-alpha.1","chameleon-dev-proxy":"^1.0.6-alpha.1","chameleon-errors-webpack-plugin":"^1.0.6-alpha.1","chameleon-linter":"^1.0.6-alpha.1","chameleon-loader":"^1.0.6-alpha.1","chameleon-miniapp-target":"^1.0.6-alpha.1","chameleon-mixins":"^1.0.6-alpha.1","chameleon-template-parse":"^1.0.6-alpha.1","chameleon-templates":"^1.0.6-alpha.1","chameleon-tool-utils":"^1.0.6-alpha.1","chameleon-url-loader":"^1.0.6-alpha.1","chameleon-vue-precompiler":"^1.0.6-alpha.1","chameleon-webpack-plugin":"^1.0.6-alpha.1","chameleon-weex-vue-loader":"^1.0.6-alpha.1","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^1.0.6-alpha.1","cml-vue-loader":"^1.0.6-alpha.1","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extra-watch-webpack-plugin":"^1.0.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^1.0.6-alpha.1","ip":"1.1.5","less":"^3.11.1","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"1.0.6-alpha.1","mvvm-file-loader":"1.0.6-alpha.1","mvvm-miniapp-loader":"1.0.6-alpha.1","mvvm-pack":"1.0.6-alpha.1","mvvm-style-loader":"1.0.6-alpha.1","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^1.0.6-alpha.1","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^1.0.6-alpha.1","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@1.0.6-alpha.1","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-F4lyGxWPa7HxQuWEPiEv//gyoTI7vYvHyrZ0+rGYbta1hKrNJEwGP4bdiKmoe0uYl/xsjAVikWx0aajr5mdOXg==","shasum":"2acc83db56b60a6b850ee7dfb4f2162cc1ba3d0b","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-1.0.6-alpha.1.tgz","fileCount":108,"unpackedSize":1275572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemX7jCRA9TVsSAnZWagAAjl4P/1n7l/gMJW+Hi5Pwv1d3\nWC7ANWCUeRwT3zplLyZyEo2hChGeULg0NxH1LL7Oc8C22F/NeErtPuEhHCa6\nF4y8VzyJklxZecCqEGD+jQeChvsdhM7PymZnvZO1Lwy2teNRWf7P8FKSQkwo\nzWTywBq2Jmy3UEy7b2QqxXWxobHhxJ2TgUwScprtid8Lb/3D5lMmvnBciXc1\nZjrl9NGsQveNzeDPmbv43j8tkp7nH/uHLSrfrXa1+e6xWBznhcmeqCkgCoQg\nhr508gOk8P//bdKLqktUYmvIH4sKJVaipl4YFCXrAT6sLHNvU0PIK6s/zoGb\nJIbPFddtGqoi2Hx5TocaAhL79g7T3Z8i+aIWW53dQooM3Hki/aJefY5+Abbk\njxFfoyLQ1EiJOCuh5W/z7OUxMSk1P/NuS4PtehVzyHxSb0eJZzgdT3J4YCJP\nec/iI8B/njarm0yixFEn7mHy4vDYW6ZOJRRnBzIVRrq2Tl9d/ObqyjrBZ2jd\ncB1WNaN+mW0yQv2CkcWFwC6/PulzJb+ULyUFrjOzxQUbl+kryurnovD4hryp\nBYNmdFIH2bT8mqPuoZWWKrErRizn740jZI4AWYh5ZnVYwGVwP6BE3IECoK5H\nhK2jaacwwPSPvjyl1KpwOlTYjBeIoanzbpeq9hbzp7prKY/CH5Wn3yHdS7eC\nsXD4\r\n=Pa/O\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQC8qiyGYg1NFxYWpjwtF2jl9+q0cKGbGXwMOzBRIlAUpgIhAKBXAFZBIlKZwyNANeLqgWZXwtzXZKPWiJuNMguS9p+i"}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_1.0.6-alpha.1_1587117794558_0.0018764109409661334"},"_hasShrinkwrap":true},"1.0.6-alpha.2":{"name":"chameleon-tool","version":"1.0.6-alpha.2","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^1.0.6-alpha.2","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^1.0.6-alpha.2","chameleon-dev-proxy":"^1.0.6-alpha.2","chameleon-errors-webpack-plugin":"^1.0.6-alpha.2","chameleon-linter":"^1.0.6-alpha.2","chameleon-loader":"^1.0.6-alpha.2","chameleon-miniapp-target":"^1.0.6-alpha.2","chameleon-mixins":"^1.0.6-alpha.2","chameleon-template-parse":"^1.0.6-alpha.2","chameleon-templates":"^1.0.6-alpha.2","chameleon-tool-utils":"^1.0.6-alpha.2","chameleon-url-loader":"^1.0.6-alpha.2","chameleon-vue-precompiler":"^1.0.6-alpha.2","chameleon-webpack-plugin":"^1.0.6-alpha.2","chameleon-weex-vue-loader":"^1.0.6-alpha.2","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^1.0.6-alpha.2","cml-vue-loader":"^1.0.6-alpha.2","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extra-watch-webpack-plugin":"^1.0.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^1.0.6-alpha.2","ip":"1.1.5","less":"^3.11.1","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"1.0.6-alpha.2","mvvm-file-loader":"1.0.6-alpha.2","mvvm-miniapp-loader":"1.0.6-alpha.2","mvvm-pack":"1.0.6-alpha.2","mvvm-style-loader":"1.0.6-alpha.2","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^1.0.6-alpha.2","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^1.0.6-alpha.2","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@1.0.6-alpha.2","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-iTi3C9tzdM14bxpRH67sEcfJ5/GCSPDwXISznRHvjZqkFm1GYq4UFwcDeir9o4C3cgLCwQtQgGCjqB1i9fPxuQ==","shasum":"ad6037c5324f0d706515ac35241e871638baf2af","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-1.0.6-alpha.2.tgz","fileCount":108,"unpackedSize":1259219,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetUkmCRA9TVsSAnZWagAATb8P/RDG8tsugz7faTFnjFpL\nxHEmGCc7rylA328+VoIaicHw8A2GS0SO7pHSh83MyRvSEfnJs4XFrheW4C5H\nSLd1N7iR0Toxy98hb30qijUYoqvdGKmxy4Ge38VWhFw2tsyqV19bE75AHj2/\nS3AlrkmysM67NGvADLHbJePyWfWcwW76x1tt1gtwhwnVUSkLGuEAoj8ibBFb\nhfUq+rodau72aNOd34hyZd/Rcb1xPCT5635xsnZDqpq9YFA48dpRPbglERXf\ni9VPdMK49lzQEtZfFQVz0k31uHy6EBUUmrHRub57In0ptpUdNzmuM58mxhwf\ngon2dEl/osyYy/XNpASczacYNAtPcO9y3pwP2AJodb1Iqku4pWfhKM+xE7L8\n3vxP4wpUY2vhl6NhTiYN/9qQD3V43U5Kpm2bR3hUKcMYaiTguQyxSelXyyUe\n8h9QP2Kr7W3g19nL/Yl8b+T5Lh1jorppGzKQBAOBmEwO4S9qZbgN7R4FonlE\nCc5g9o75W/8nDDm4MGlDEut47HU/cbsZzROksgWHzjitFkz3BmpkSg8P4eVt\n55ZZ2S6nL3GpTt2AY2YybANHx9qixJW+9kD6HE9+4AmuScHeEDzjMk+un1tG\nMhQYhau+cdFNX+bglfc/TyDKV8v73YUic3DLysa8mhiItuuXa7Dd3vUjiAoc\naB3M\r\n=kLOJ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCNmULbGFiZArjvQ4xiQunJ2eLCCcZgavojDdLKZJqO7AIgW1JHpuPe/Kr0w4OM3da+iKYajILJyM7r/F6mZl6dY+4="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_1.0.6-alpha.2_1588939046523_0.49976202029552197"},"_hasShrinkwrap":true},"1.0.6-alpha.3":{"name":"chameleon-tool","version":"1.0.6-alpha.3","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^1.0.6-alpha.3","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^1.0.6-alpha.3","chameleon-dev-proxy":"^1.0.6-alpha.3","chameleon-errors-webpack-plugin":"^1.0.6-alpha.3","chameleon-linter":"^1.0.6-alpha.3","chameleon-loader":"^1.0.6-alpha.3","chameleon-miniapp-target":"^1.0.6-alpha.3","chameleon-mixins":"^1.0.6-alpha.3","chameleon-template-parse":"^1.0.6-alpha.3","chameleon-templates":"^1.0.6-alpha.3","chameleon-tool-utils":"^1.0.6-alpha.3","chameleon-url-loader":"^1.0.6-alpha.3","chameleon-vue-precompiler":"^1.0.6-alpha.3","chameleon-webpack-plugin":"^1.0.6-alpha.3","chameleon-weex-vue-loader":"^1.0.6-alpha.3","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^1.0.6-alpha.3","cml-vue-loader":"^1.0.6-alpha.3","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","eventsource-polyfill":"0.9.6","express":"4.16.3","extra-watch-webpack-plugin":"^1.0.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^1.0.6-alpha.3","ip":"1.1.5","less":"^3.11.1","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"1.0.6-alpha.3","mvvm-file-loader":"1.0.6-alpha.3","mvvm-miniapp-loader":"1.0.6-alpha.3","mvvm-pack":"1.0.6-alpha.3","mvvm-style-loader":"1.0.6-alpha.3","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^1.0.6-alpha.3","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^1.0.6-alpha.3","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@1.0.6-alpha.3","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-7pfgc17E9M8Z+9iYFl3SCa9zYYuC9l5RY6JDWPsb14YI6xcZBeICJjk5Z9juknLmsCrdY1dATRjM7e0O0ewQMg==","shasum":"3326e629e68a2be582a45297d81759df14d0738d","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-1.0.6-alpha.3.tgz","fileCount":109,"unpackedSize":1255499,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeu8QWCRA9TVsSAnZWagAAb9YP/iX9f0wL/f/mwabd9C5q\nunpCk35n06wzQdGa/Ix0HDJhumNnLHnlWPgzQIuri0FBPvx45/bAaVcLKisL\nOITRnL2UmiEauMd2UGtHekOLSjTJlvk9GQ2JmJzn9+ECQ9qcapgB5d2SrZMK\nAmp5oN4ZtqUoCog/C5ceG+mYkxLrN042Jz64C3ofssIFZc3eYpHGgtnEJaHt\no0GLNeCsO2KDByromE7JuoPkZF9pcodD7kjuhFn85F/B5DshvKeD601xZ/iW\nv2P0f2ca0Q+RS4UAMR14KTzioNTaFHXI3Aa2IxzQO0eJi8qG5ynCbT3ow73V\n+C88KzMbEWuZrmVhua34Gssqo3yi5ZCf8MmLS2+WvtRO690fpbWH1G8DsJCB\n57UCpYclYWbOWoBOKHZ5aKjHp7kfTYo4NAiCrFE+vv1VSogXN7Bcvw9ZkCFX\ndtjLqDIsPy6xseD2aCA/wXpevCjwfNFs8u1PLaVwzcX22uMK7j8vEPRg7jjh\nmdWABGlT5ySh12bjxj/GTumySnzlio+Tq4+4nGaSCMvoX1RSr8owQqJSYvV9\n1yj3mfSdP7CG+3sAFDATGWlWVUjkPZHjq6gJVmmRe+xUB/CvdxR2+s/f7K1k\nRIsAUuPdPeQIyJpDGB1pQV/cyFCx1zmlaYAxJT/3G4W2fHwcLRcx3vdJIzPT\nZONb\r\n=AKbV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAl4r5EveS38w0nvUbYjBn+9Q1SzARXV1tnOQtKlwlMAAiBHm1H9Hq7xsjCCgkY14Ttky1NqqeW+Eshl8sbRFyMC5w=="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_1.0.6-alpha.3_1589363734108_0.8125230989674774"},"_hasShrinkwrap":true},"1.0.6-alpha.5":{"name":"chameleon-tool","version":"1.0.6-alpha.5","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^1.0.6-alpha.5","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^1.0.6-alpha.5","chameleon-dev-proxy":"^1.0.6-alpha.5","chameleon-errors-webpack-plugin":"^1.0.6-alpha.5","chameleon-linter":"^1.0.6-alpha.5","chameleon-loader":"^1.0.6-alpha.5","chameleon-miniapp-target":"^1.0.6-alpha.5","chameleon-mixins":"^1.0.6-alpha.5","chameleon-template-parse":"^1.0.6-alpha.5","chameleon-templates":"^1.0.6-alpha.5","chameleon-tool-utils":"^1.0.6-alpha.5","chameleon-url-loader":"^1.0.6-alpha.5","chameleon-vue-precompiler":"^1.0.6-alpha.5","chameleon-webpack-plugin":"^1.0.6-alpha.5","chameleon-weex-vue-loader":"^1.0.6-alpha.5","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^1.0.6-alpha.5","cml-vue-loader":"^1.0.6-alpha.5","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","duplicate-package-checker-webpack-plugin":"^2.1.0","envinfo":"^7.5.1","eventsource-polyfill":"0.9.6","express":"4.16.3","extra-watch-webpack-plugin":"^1.0.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","inquirer":"6.0.0","interface-loader":"^1.0.6-alpha.5","ip":"1.1.5","less":"^3.11.1","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"1.0.6-alpha.5","mvvm-file-loader":"1.0.6-alpha.5","mvvm-miniapp-loader":"1.0.6-alpha.5","mvvm-pack":"1.0.6-alpha.5","mvvm-style-loader":"1.0.6-alpha.5","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","progress-bar-webpack-plugin":"^2.1.0","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^1.0.6-alpha.5","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^1.0.6-alpha.5","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@1.0.6-alpha.5","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-yQTAtoQrd0qHD1gDW6oin2p3FvGTCQexNKhHx94Ef5CA3pcOEPdKguKfQ3nO6ML0ulzQ6+tCZMkFHGqnUGaiLg==","shasum":"b5f0d14d4bfa1ca090ef5a68484b52401b911119","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-1.0.6-alpha.5.tgz","fileCount":110,"unpackedSize":1312753,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJex4o0CRA9TVsSAnZWagAAAU0P/15POPCQoncWnZ2wKdeF\neBZt+HHbYsASvR2ABUBU5CsAH0dbsFg9I6UZ9SSw9bIauOaEiPBK97u6fWPG\nQSC2j8SjWDaF+GzmWyimP55ppgl9yd/2mt9sj8W/FfinVhEsH2E91PRijx1i\nKpE+vYKVMDVP0Gpzk1XHGQ3aBgpCoN7ELU8S7Ll/tnrE4eIQ2nCYE+aI0v2+\n3Vmd38oA66k8OkrDyMRoGiydGWy90L5Q9GWZkFmp5Tj1GKjI3mwa1EQkmAfb\n1eJhYTXnOWhFF82fHADXBg1tZDhozRirZtoujZLuxvk3SmqL8sj03+ZwIxti\ndqYTEsC+j9a/vWPTRgPD4Du8kFoWOImyK3AoIDtWJM1dehnoSz2DJi7wJ2D3\nwgahKBMzGf0K5kH/QkQZDTXQQRa54zj44rseEjDxIsyr7efvxr8cnZqBYKjB\n7ZQph/JgzwmqTm02E3fUzk0sjLOFPXXkymVn44GDtaAuVji/+uh0RZoHisN9\ngB2gS5yDdwmlsboHduGl6zx4/Vi/HZ2eStIlpLNMEXwhpH6dU5IHZ95OGgbV\nbJHFT2S8f7zU5/SM3IlVvzN2x2Yty4odsNsKDAZLxlkceAdwCDaNIpIhwObD\ngyzmoR5yBdbKBZyvjMxHL8Hl7DvK13ZsKTUyY5lmBlj312ALUh8fFsbtnHks\nJjOT\r\n=sqnm\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAyoJlsv2UaIZm9L1yLxxyA66DMypicDvke1Itse2gUAAiEA/M0zBE6MLi9sxpySLsP8mD/2yNaygbmGhnT05zDbxyg="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_1.0.6-alpha.5_1590135348264_0.32869771206671516"},"_hasShrinkwrap":true},"1.0.6-alpha.6":{"name":"chameleon-tool","version":"1.0.6-alpha.6","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^1.0.6-alpha.6","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^1.0.6-alpha.6","chameleon-dev-proxy":"^1.0.6-alpha.6","chameleon-errors-webpack-plugin":"^1.0.6-alpha.6","chameleon-linter":"^1.0.6-alpha.6","chameleon-loader":"^1.0.6-alpha.6","chameleon-miniapp-target":"^1.0.6-alpha.6","chameleon-mixins":"^1.0.6-alpha.6","chameleon-template-parse":"^1.0.6-alpha.6","chameleon-templates":"^1.0.6-alpha.6","chameleon-tool-utils":"^1.0.6-alpha.6","chameleon-url-loader":"^1.0.6-alpha.6","chameleon-vue-precompiler":"^1.0.6-alpha.6","chameleon-webpack-plugin":"^1.0.6-alpha.6","chameleon-weex-vue-loader":"^1.0.6-alpha.6","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^1.0.6-alpha.6","cml-vue-loader":"^1.0.6-alpha.6","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","duplicate-package-checker-webpack-plugin":"^2.1.0","envinfo":"^7.5.1","eventsource-polyfill":"0.9.6","express":"4.16.3","extra-watch-webpack-plugin":"^1.0.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","http-proxy-middleware":"^1.0.4","inquirer":"6.0.0","interface-loader":"^1.0.6-alpha.6","ip":"1.1.5","less":"^3.11.1","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"1.0.6-alpha.6","mvvm-file-loader":"1.0.6-alpha.6","mvvm-miniapp-loader":"1.0.6-alpha.6","mvvm-pack":"1.0.6-alpha.6","mvvm-style-loader":"1.0.6-alpha.6","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","progress-bar-webpack-plugin":"^2.1.0","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^1.0.6-alpha.6","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^1.0.6-alpha.6","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@1.0.6-alpha.6","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-uLiWS3uOVigz2Zl7sPGh5aexPCjDshm0PC6+sslINMtaYv3el2sW8k/9o08siYb0RuDpF2xuhIcejAnQunEiPQ==","shasum":"44233791670973422153bb1354e9b995f317ac37","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-1.0.6-alpha.6.tgz","fileCount":110,"unpackedSize":1290989,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe15KbCRA9TVsSAnZWagAAqvcP/1kIpx434X5kIZMt9opg\nQZxrrtZ1YYf02Sp4cdy5VClLdfnnCwkQ+XLQCX5UZiX9unmueatQ9VS5qnfW\n99sfkNgMGQu3/lEtL9CXlMTn9UyabWYspjwMLf1eJpVllA8Lvl9INAkRnzVx\nxfF/VvK0OufQtNRu3Dlg1xrGZ/53NqkYv0b/VSQuwuI+9P5HjpgvkghW18Wa\nGV6n+amfFPx6LUg+6eo2mSornjgY3BT2k8mwYZYHaLEAnN76Sh9sKsuYH6HQ\nDtczcCp9cHMx/OqOFuUuar6fsaRzqulkABuL/wYQs4EjpSUU4S3frbjOSqp1\n/3nXENlbOkffPz4s297Zmobvy5WDhGiO0WFLLCy60Gcwu24QeO0b0G3ZbplI\n1Kpm18urlsjWwBycPSgK4neVMGhJqTwHyQAoupFWF5HjLjLaTSbSyz/RxKs5\nRm8/yXSkZzqKxtR34SUnkEDPD0QfbQLjrVZeEBjofXm44f0TZJTKdRG8Vrc+\npu8vSVLg09FgSzmeN7YHoVz5WD3A32tI5nYcWKy9AsX4gAv9A6VlAMEteyyK\n8V4CFNsIW45loedbQboVEafdUok/2mHBt6ABU6aNqSkiTH3w0TGZAZp/kbHL\n6ZUD48quJcDnMtqmFYrxBrPtlonelwN5MDOWwxuZAOyDWmc3QHXg2ZhAjVyl\n++QW\r\n=Vkeb\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIDGGD1+FeMr2fS/F7nMDq3rVmLegWUsRrcjmdACRjpbHAiEAjEEZ+AVQ+Z967eUxmh2qk5rH+Gxtjj6zZ1GT1kMF4/I="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_1.0.6-alpha.6_1591186074733_0.5681240970300592"},"_hasShrinkwrap":true},"1.0.6":{"name":"chameleon-tool","version":"1.0.6","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^1.0.6","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^1.0.6","chameleon-dev-proxy":"^1.0.6","chameleon-errors-webpack-plugin":"^1.0.6","chameleon-linter":"^1.0.6","chameleon-loader":"^1.0.6","chameleon-miniapp-target":"^1.0.6","chameleon-mixins":"^1.0.6","chameleon-template-parse":"^1.0.6","chameleon-templates":"^1.0.6","chameleon-tool-utils":"^1.0.6","chameleon-url-loader":"^1.0.6","chameleon-vue-precompiler":"^1.0.6","chameleon-webpack-plugin":"^1.0.6","chameleon-weex-vue-loader":"^1.0.6","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^1.0.6","cml-vue-loader":"^1.0.6","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","duplicate-package-checker-webpack-plugin":"^2.1.0","envinfo":"^7.5.1","eventsource-polyfill":"0.9.6","express":"4.16.3","extra-watch-webpack-plugin":"^1.0.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","http-proxy-middleware":"^1.0.4","inquirer":"6.0.0","interface-loader":"^1.0.6","ip":"1.1.5","less":"^3.11.1","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"1.0.6","mvvm-file-loader":"1.0.6","mvvm-miniapp-loader":"1.0.6","mvvm-pack":"1.0.6","mvvm-style-loader":"1.0.6","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","progress-bar-webpack-plugin":"^2.1.0","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^1.0.6","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^1.0.6","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@1.0.6","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-UbTR1sHgfhKQ9peL2UsAuqqESmAkQw2vj1V0t7epPXUGGPvrq0yE3SBZp1Nfa0Yq6NpFo4cMoOTXQEH+F3KYTg==","shasum":"9d71548884f371371f59621624837a75b2a9461a","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-1.0.6.tgz","fileCount":110,"unpackedSize":1317958,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7KapCRA9TVsSAnZWagAAMtcP/RbcNvj/AEn1NqF36163\nlqv7CiWjZ0zfpkU1Kd/2sMexyPnTCTvvSRR2lI84Eyuc6pAJWhS7oW3oHHvk\nBZM2VKDsED96Gda7x5AMNBxFgiQ0ZU+ZSwhaaCctUhMutPs7r2tiwQdjjBfO\ncaL8m7LS1WERTBnPpzNnEEt8mP4pP/tgL3/GgDfzu6HjPrLnnqacSWMimcZR\nRf2i2f4+Cciy51HsHKbiFRDCViNV6juKnL4Z1p8yN4B8sbDW+W3r7NHp/2T+\ngAF3eFShpSkgtexP7v9kprXth3CuGe3RfG0X21ZYRipkqJeBgCRgrQIxVZnL\niHg7MUByK33j0pbY2IcBk/HC3AomKG5ZPQQKISoz/CBwCpnDgSWSvorB5Ore\n5Owqpu4m9X11MC+jzMj3pX1pBXX5gtJz5fiU0jW4/s0UDCQbbGAfCzDongd5\nL2xJ92PU3H5CW7MIHB+oSwTRkRWw1bZdt42mcmZ7XKAvs6SGWDGhb5tUJoUN\nR5Sof8XFvDLX9g+AzCaO48Foy6kLlcYtB6CzAAEsB5XynaHG/PIaJRP1m+l5\nSkZuk4KqViX7lamhETW2ZN/0ZlME5DitycMR324BfCkeHM6FNzby54q785vp\naSBGviXqRjgKtD964oAn4FRQkwtVu2Q7KnXweHZmzC1GFDMmRM0mhtJ6X+eg\nDeXw\r\n=1y1I\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIBWCNUSkH2D2+xirwc2LqkFRKVeTUi0sy29thun5IG9hAiADnwrawrqJq7TsrB+vcnI+iNIgNu0IPSHWlbQ9lN742w=="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_1.0.6_1592567464855_0.21441182240736434"},"_hasShrinkwrap":true},"1.0.8-alpah.0":{"name":"chameleon-tool","version":"1.0.8-alpah.0","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^1.0.8-alpah.0","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^1.0.8-alpah.0","chameleon-dev-proxy":"^1.0.8-alpah.0","chameleon-errors-webpack-plugin":"^1.0.8-alpah.0","chameleon-linter":"^1.0.8-alpah.0","chameleon-loader":"^1.0.8-alpah.0","chameleon-miniapp-target":"^1.0.8-alpah.0","chameleon-mixins":"^1.0.8-alpah.0","chameleon-template-parse":"^1.0.8-alpah.0","chameleon-templates":"^1.0.8-alpah.0","chameleon-tool-utils":"^1.0.8-alpah.0","chameleon-url-loader":"^1.0.8-alpah.0","chameleon-vue-precompiler":"^1.0.8-alpah.0","chameleon-webpack-plugin":"^1.0.8-alpah.0","chameleon-weex-vue-loader":"^1.0.8-alpah.0","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^1.0.8-alpah.0","cml-vue-loader":"^1.0.8-alpah.0","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","duplicate-package-checker-webpack-plugin":"^2.1.0","envinfo":"^7.5.1","eventsource-polyfill":"0.9.6","express":"4.16.3","extra-watch-webpack-plugin":"^1.0.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","http-proxy-middleware":"^1.0.4","inquirer":"6.0.0","interface-loader":"^1.0.8-alpah.0","ip":"1.1.5","less":"^3.11.1","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"1.0.8-alpah.0","mvvm-file-loader":"1.0.8-alpah.0","mvvm-miniapp-loader":"1.0.8-alpah.0","mvvm-pack":"1.0.8-alpah.0","mvvm-style-loader":"1.0.8-alpah.0","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","progress-bar-webpack-plugin":"^2.1.0","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^1.0.8-alpah.0","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^1.0.8-alpah.0","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@1.0.8-alpah.0","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-AsnpEPstAMaCrFqlYRDw2coqX7qrA6FDhL/+BCJZE9CIyJRaFPp02biUmkd6NBi5DTb1xHdE5EEN/J/T8Gfwsw==","shasum":"0ce558faa33ac3b71293d635724d2ebf464baf16","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-1.0.8-alpah.0.tgz","fileCount":110,"unpackedSize":1294028,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI/XtCRA9TVsSAnZWagAAw3sQAJCNrf1AUgl+4ZPPmnTe\nH/B9u/MzqGvW+m2FA7ZGSJRaRIUpnVfieBQy/T0PRCINQfl3Yw3QkfZE2RGG\n496BbBU5gfTwqwrOhiqel/hHmFsF1zcRPivQmHpLzLKaFlTLwVl0wB4n3WA2\nBBNr7c1OuPiqlvHrtJCLj3uBW/66kZGIqoq35wRiQ9OgAJz7H9dtfmp7V8ss\nSOX66NUqMma66sUfZfzhIKesngfrqQyJ9bsFrdV3aOwYjGLIpDV+0D9Hf3Kf\n4fN+uNIFnmjqJm6eKugJrBB4aVkx3x8mg0AiB0DdHa+lJ98bWQdZDt6lK87r\nAnayI3DLHPCytEaiXgJfeLk13piYXD1gCp6Yac82XvP8XfPhJ8szMi7KiUOs\nlIUeCybLLSPB2IVyEzfPqjidxidMoQE8vgsmt4oc66IAxQZk6cfAUD50mU1N\nCCjAaAD7J8zVPALjcWseIJbgitBy2D9OYcmh67/lGIG3twB11AWscb+Du7dA\n6+yfCTTKJoRIbrC/I0Q4cVvKCuhVextNCnBueBUZBh1lghcuckIWC4ZhPGtK\nCBqc/EaGRq+LB2sKlmzODQDhzS/fMp/OWAiGV18tAhtOB6+PXFZAiFnaDXWp\nEVcaz/EdQW1cjWWRHkaeyqdJ793Icij0zjCupZ3x98+VNTB9oP8a7ODST0oz\nohbO\r\n=fQM3\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIFdQvLIORChKrNfiV1QUNRSAk9LrAOjHPWWoB28SRa+oAiBs69qLn/6zc9bFFeLI8J/xfT6n+m7UHhm7VmXVj3MQIQ=="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_1.0.8-alpah.0_1596192237253_0.5552216345139676"},"_hasShrinkwrap":true},"1.0.8-alpah.1":{"name":"chameleon-tool","version":"1.0.8-alpah.1","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^1.0.8-alpah.1","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","chalk":"^2.4.2","chameleon-css-loader":"^1.0.8-alpah.1","chameleon-dev-proxy":"^1.0.8-alpah.1","chameleon-errors-webpack-plugin":"^1.0.8-alpah.1","chameleon-linter":"^1.0.8-alpah.1","chameleon-loader":"^1.0.8-alpah.1","chameleon-miniapp-target":"^1.0.8-alpah.1","chameleon-mixins":"^1.0.8-alpah.1","chameleon-template-parse":"^1.0.8-alpah.1","chameleon-templates":"^1.0.8-alpah.1","chameleon-tool-utils":"^1.0.8-alpah.1","chameleon-url-loader":"^1.0.8-alpah.1","chameleon-vue-precompiler":"^1.0.8-alpah.1","chameleon-webpack-plugin":"^1.0.8-alpah.1","chameleon-weex-vue-loader":"^1.0.8-alpah.1","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^1.0.8-alpah.1","cml-vue-loader":"^1.0.8-alpah.1","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","duplicate-package-checker-webpack-plugin":"^2.1.0","envinfo":"^7.5.1","eventsource-polyfill":"0.9.6","express":"4.16.3","extra-watch-webpack-plugin":"^1.0.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","http-proxy-middleware":"^1.0.4","inquirer":"6.0.0","interface-loader":"^1.0.8-alpah.1","ip":"1.1.5","less":"^3.11.1","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"1.0.8-alpah.1","mvvm-file-loader":"1.0.8-alpah.1","mvvm-miniapp-loader":"1.0.8-alpah.1","mvvm-pack":"1.0.8-alpah.1","mvvm-style-loader":"1.0.8-alpah.1","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","progress-bar-webpack-plugin":"^2.1.0","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^1.0.8-alpah.1","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^1.0.8-alpah.1","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@1.0.8-alpah.1","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-8irC4c+bI8O0+1EdTDwGnx5srRkWr3Y9+oM6teNGPQYR2UPBDHol8osCM+eYBASHcamXt2mY2+WX6RUK+tR/Mg==","shasum":"12678640bab1b1fd658dbcb34d7c1b217eba56d4","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-1.0.8-alpah.1.tgz","fileCount":110,"unpackedSize":1325605,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNTQqCRA9TVsSAnZWagAAt1kP/00fqMGUjfofLMamadb9\nMFdMMaLmPhnud/XtPoqY0vC+ci3Zj1OenA/F3xYgYFQajPHFrGOrrGWg1ljC\nL0cgPwMxJ8Nm9yONYS7ffSHd1e62pvbGtRAKuubsBb2Uim7fGKXyAODweRsO\nA27cqMqL642ei9r5b7+0CnmX/ZncYpOzljw8UfWL2xSPZx0RoLxlDjPZHcK+\nJqxsMa9Q1TQdiDPQ9MU0TV2WOP9KlWKsFXwa7jUOEdd85KxyaTKQ3/s4qmto\nwnP2Ol88tAG2ev68hkGKXFaL10xsC968yDwuJqWTaafU6G3KixtpTOsDDIQK\nNuTc3+orRai7BemZICTdg0cTwvRDGT+xWQxfYlkdd3EP3JORZzXTl5prxUM7\nMTMxiye8yq1brZRGdsdIquTyXZfbju/1xmHEzrG92kkdfhdTzSAtSbpxH8/X\nLyeSfYW4ZQGew9gRhg0emcMo4PhWArnpj+sMVsmpGxLTwvlpXCKpUBf+HoXd\nBjonLPKQgFGOpn/gs0NSAj7s0x9WW1NJAS1e5FeupQtxGDONlLxH9Bfuf8R6\ncSgzdGPLWzFDVPe1GCXAHr1EI+Yf/YYaqzuoPvoEiJy7xGRssrgrAbyfJIHn\nnxXyqXNAX8H14JkJa2GVHjusq064EONTu6B3F1x5bs1tidoUC4+6gTj9VN/w\nLWkL\r\n=kv4R\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCsiM/Om8Bcw6ZWnCzv69wmo4cz2ygrr5Muhadn2E18ugIgGxCERvv6InGArPo3Pme/d6S2KvoEnv9W4uHnQvsBAYc="}]},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_1.0.8-alpah.1_1597322282431_0.9102273791657944"},"_hasShrinkwrap":true},"1.0.8":{"name":"chameleon-tool","version":"1.0.8","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/polyfill":"7.0.0","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-chameleon-import":"^1.0.8","babel-plugin-transform-remove-strict-mode":"0.0.2","babel-plugin-transform-runtime":"6.23.0","babel-preset-env":"1.7.0","babel-preset-flow":"6.23.0","babel-preset-stage-0":"6.24.1","body-parser":"^1.18.3","cache-loader":"^4.1.0","chalk":"^2.4.2","chameleon-css-loader":"^1.0.8","chameleon-dev-proxy":"^1.0.8","chameleon-errors-webpack-plugin":"^1.0.8","chameleon-linter":"^1.0.8","chameleon-loader":"^1.0.8","chameleon-miniapp-target":"^1.0.8","chameleon-mixins":"^1.0.8","chameleon-template-parse":"^1.0.8","chameleon-templates":"^1.0.8","chameleon-tool-utils":"^1.0.8","chameleon-url-loader":"^1.0.8","chameleon-vue-precompiler":"^1.0.8","chameleon-webpack-plugin":"^1.0.8","chameleon-weex-vue-loader":"^1.0.8","circular-dependency-plugin":"^4.4.0","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^1.0.8","cml-vue-loader":"^1.0.8","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"0.28.11","duplicate-package-checker-webpack-plugin":"^2.1.0","envinfo":"^7.5.1","eventsource-polyfill":"0.9.6","express":"4.16.3","extra-watch-webpack-plugin":"^1.0.3","file-loader":"1.1.11","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"2.30.1","http-proxy-middleware":"^1.0.4","inquirer":"6.0.0","interface-loader":"^1.0.8","ip":"1.1.5","less":"^3.11.1","less-loader":"4.1.0","minimist":"1.2.0","mvvm-cml-loader":"1.0.8","mvvm-file-loader":"1.0.8","mvvm-miniapp-loader":"1.0.8","mvvm-pack":"1.0.8","mvvm-style-loader":"1.0.8","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"3.2.0","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","progress-bar-webpack-plugin":"^2.1.0","shelljs":"0.8.2","style-loader":"0.18.2","stylus":"0.54.5","stylus-loader":"3.0.2","vue":"2.5.16","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"3.12.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^1.0.8","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^1.0.8","webpack-merge":"4.1.3","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","_id":"chameleon-tool@1.0.8","_npmVersion":"5.6.0","_nodeVersion":"8.10.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-V9B9nDfBhRI8qeqoKU+8/6DMyc1J3/xdqnQs+f2nymyNJf3WreFRGxJLqYWJ8+YRsIOdQS81V4Da5sU774OzxQ==","shasum":"d220562c553e6cf321890dee61c7ebfdbb9ad6c3","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-1.0.8.tgz","fileCount":110,"unpackedSize":1338036,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrm0wCRA9TVsSAnZWagAAvmcP/3BUxnam06J4wwoaXxI2\nfPCnaJad8f+ZtVu8VWeTe6cRjQAklQQqGOj6bOwHGgVYolgADVAhIkjWlSju\ns0FSnkWFNW2e+dQcSD2bpDzQYID09f1XdZrhqkQFLFsT/GS/zMbYVUG60mBS\nbwF/gLFEeWom6s2aWOkZfdX25MoNq6FBNrzbW+IvYTtLy4Dv270josGEC8+d\nZFWA/LKxYuw3F9VDGifTXqaQ1hTAFg7qAMTPVMfYwTxTGGaj0SYkjgyXksKK\n+ytbWTN6F6CNCsyfjpUuzRz33fpnDPKzSQmXMZYXvpEfi3yjKwcS+JugtWLX\nLjxUYn5t8T8mj3O9+NGNdybLgqRiTXmpIbslYJPNNDiq1TWrtrPe4CUEnsDr\nH2oO2+I1Rr60xupLWX2qzWvnfacyRAgb6XceJO9fiZAV5ucOVrozQxpO2Wpa\nv2YMUDEJc7T2axbObmT3lkbM45uq0C8u1DwZyxTMRJQfdr14zAmYf2IAnPEq\n/s4SocJQPFU7ObctmfZycw+EkgPeSDvFq5Ue+KdMrDRj3AYOMM7H6LiZMYWf\niUjg9EVZ8u4FssjD7KAkVz0OkXGPl6k5ThupNJi+qoN4P8SmmGmhy9avVNUX\nQUsWS1Ermj+JlNDhgKfUgbr1j08a1k8rNLcvO9aNrwvlCCpx3+sWrduuFTsO\n0vjH\r\n=LSI5\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD5d+Hnss62NXC6zK9GPiEx8zTS4iYhrzC2MdiV2+ayjgIhAJmJSuqVNHxicBaMptRnIv+SkgRfLrKYCn9z18IFmeOh"}]},"directories":{},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_1.0.8_1605266736143_0.5887428396633976"},"_hasShrinkwrap":true},"2.0.0-alpha.1":{"name":"chameleon-tool","version":"2.0.0-alpha.1","description":"chameleon 脚手架工具","main":"chameleon.js","scripts":{"eslint":"eslint ./lib ./configs ./commanders","test":"mocha --recursive --reporter spec","cover":"nyc ./node_modules/mocha/bin/mocha ./test/*/*.js"},"bin":{"cml":"chameleon.js"},"author":{"name":"Chameleon-Team"},"license":"Apache","keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"],"dependencies":{"@babel/core":"^7.9.0","@babel/plugin-proposal-class-properties":"^7.8.3","@babel/plugin-transform-modules-commonjs":"^7.10.4","@babel/plugin-transform-runtime":"^7.9.0","@babel/plugin-transform-strict-mode":"^7.8.3","@babel/preset-env":"^7.9.5","@babel/preset-flow":"^7.9.0","@babel/preset-stage-0":"^7.8.3","@babel/runtime-corejs3":"^7.9.2","assets-webpack-plugin":"3.8.4","autoprefixer":"8.6.4","babel-loader":"^8.1.0","babel-plugin-chameleon-import":"^2.0.0-alpha.1","body-parser":"^1.18.3","cache-loader":"^4.1.0","chalk":"^2.4.2","chameleon-css-loader":"^2.0.0-alpha.1","chameleon-dev-proxy":"^2.0.0-alpha.1","chameleon-errors-webpack-plugin":"^2.0.0-alpha.1","chameleon-linter":"^2.0.0-alpha.1","chameleon-loader":"^2.0.0-alpha.1","chameleon-miniapp-target":"^2.0.0-alpha.1","chameleon-mixins":"^2.0.0-alpha.1","chameleon-template-parse":"^2.0.0-alpha.1","chameleon-templates":"^2.0.0-alpha.1","chameleon-tool-utils":"^2.0.0-alpha.1","chameleon-url-loader":"^2.0.0-alpha.1","chameleon-vue-precompiler":"^2.0.0-alpha.1","chameleon-webpack-plugin":"^2.0.0-alpha.1","chameleon-weex-vue-loader":"^2.0.0-alpha.1","clean-webpack-plugin":"0.1.19","cml-extract-css-webpack-plugin":"^2.0.0-alpha.1","cml-vue-loader":"^2.0.0-alpha.1","commander":"2.16.0","connect-history-api-fallback":"^1.5.0","copy-webpack-plugin":"4.5.2","css-hot-loader":"1.3.9","css-loader":"^3.5.3","duplicate-package-checker-webpack-plugin":"^3.0.0","envinfo":"^7.5.1","eventsource-polyfill":"0.9.6","express":"4.16.3","extra-watch-webpack-plugin":"^1.0.3","file-loader":"^6.0.0","fs-extra":"6.0.1","glob":"7.1.2","glob-watcher":"^5.0.3","html-loader":"0.5.5","html-webpack-plugin":"^4.2.0","http-proxy-middleware":"^1.0.4","inquirer":"6.0.0","interface-loader":"^2.0.0-alpha.1","ip":"1.1.5","less":"^3.11.1","less-loader":"^6.0.0","mini-css-extract-plugin":"^0.9.0","minimist":"1.2.0","mvvm-cml-loader":"2.0.0-alpha.1","mvvm-file-loader":"2.0.0-alpha.1","mvvm-miniapp-loader":"2.0.0-alpha.1","mvvm-pack":"2.0.0-alpha.1","mvvm-style-loader":"2.0.0-alpha.1","node-phpcgi":"0.3.7","node-watch":"^0.5.9","opn":"5.3.0","optimize-css-assets-webpack-plugin":"^4.0.3","ora":"2.1.0","portfinder":"^1.0.13","postcss-import":"11.1.0","postcss-loader":"2.1.5","postcss-plugin-px2rem":"0.7.0","postcss-plugin-weex":"0.1.6","prettier":"1.15.3","progress-bar-webpack-plugin":"^2.1.0","shelljs":"0.8.2","style-loader":"^1.2.0","stylus":"^0.54.7","stylus-loader":"^3.0.2","uglifyjs-webpack-plugin":"^2.2.0","vue":"2.5.16","vue-loader":"^15.9.2","vue-router":"3.0.1","vue-template-compiler":"2.5.16","vuex":"3.0.1","webpack":"^4.43.0","webpack-bundle-analyzer":"2.13.1","webpack-check-plugin":"^2.0.0-alpha.1","webpack-chunk-hash":"0.6.0","webpack-hot-middleware":"2.22.2","webpack-liveload-middleware":"^2.0.0-alpha.1","webpack-merge":"^4.2.2","ws":"^6.1.0"},"devDependencies":{"chai":"^4.2.0","coveralls":"^2.11.9","eslint":"^5.9.0","istanbul":"^0.4.5","mocha":"^5.2.0","nyc":"^13.1.0"},"mail":"ChameleonCore@didiglobal.com","readme":"# 快速上手\n\n## 1 安装启动\n\n> **[success] 运行环境 **\n>\n> [node](https://nodejs.org/en/download/) >= 8.10.0\n> npm >= 5.6.0\n\n建议安装使用[nvm](https://github.com/creationix/nvm)管理node版本\n\n### 1.1 全局安装chameleon-tool构建工具\n\n```shell\nnpm i -g chameleon-tool\n```\n安装成功后，执行 `cml -v` 即可查看当前版本， `cml -h`查看命令行帮助文档。\n\n\n### 1.2 创建项目与启动\n\n- 执行 `cml init project`\n- 输入项目名称\n- 等待自动执行npm install依赖\n- 切换到项目根目录执行`cml dev`\n- 会自动打开预览界面 预览界面如下：\n\n![](https://cmljs.org/doc/assets/home.png)\n\nweb端可以点击模拟器内页面右上角打开\b新的浏览器窗口。\n\nnative端的效果请\b下载[chameleon playground](https://beatles-chameleon.github.io/playground/download.html)(目前可下载Android端，IOS端即将发布)或者下载[weex playground](http://weex.apache.org/cn/tools/playground.html)扫码预览\n\n小程序端请下载[微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html)，打开项目根目录下的 `/dist/wx` 目录预览。\n\n<b>支付宝、百度小程序、快应用正在努力测试中，尽请期待。</b>\n\n### 2 目录与文件结构\n\n生成的目录结构如下，详细介绍参见<a href=\"https://cmljs.org/doc/framework/structure.html\">目录结构</a>：\n\n```bash\n├── chameleon.config.js                 // 项目的配置文件\n├── dist                                // 打包产出目录\n├── mock                                // 模拟数据目录\n├── node_modules                        // npm包依赖\n├── package.json\n└── src                                 // 项目源代码\n    ├── app                             // app启动入口\n    ├── components                      // 组件文件夹\n    ├── pages                           // 页面文件夹\n    ├── router.config.json              // 路由配置\n    └── store                           // 全局状态管理\n```\n> \b编辑器中语法高亮，暂时使用`.vue`的插件，参见<a href=\"https://cmljs.org/doc/framework/edit-plugin.html\">编辑器插件</a>，后续会推出更强大的插件。\n\n\n\n### 4 语法体验\n\n替换`src/pages/index/index.cml`文件，删除`src/pages/index/index.cml`文件中的所有代码，然后替换为下面的代码，体验chameleon语法。\n\n#### 数据绑定\n\n```html\n<template>\n  <view>\n    <!-- 数据绑定与计算属性 -->\n    <text>{{ message }}</text>\n    <text class=\"class1\">{{ message2 }}</text>\n\n    <!-- 条件与循环渲染 -->\n    <view c-if=\"{{showlist}}\">\n      <view c-for=\"{{array}}\" c-for-index=\"idx\" c-for-item=\"itemName\" c-key=\"city\" >\n        <text> {{idx}}: {{itemName.city}}</text>\n      </view>\n    </view>\n\n    <!-- 事件绑定 -->\n    <view c-bind:tap=\"changeShow\"><text>切换展示</text></view>\n  </view>\n</template>\n\n<script>\nclass Index {\n  data = {\n    message: 'Hello Chameleon!',\n    array: [\n      {\n        city: '北京'\n      },\n      {\n        city: '上海'\n      },\n      {\n        city: '广州'\n      }\n    ],\n    showlist: true\n  }\n\n  computed = {\n    message2: function() {\n      return 'computed' + this.message;\n    }\n  }\n\n  watch = {\n    showlist(newVal, oldVal) {\n      console.log(`showlist changed:`+ newVal)\n    }\n  }\n\n  methods = {\n    changeShow() {\n      this.showlist = !this.showlist;\n    }\n  }\n\n  created() {\n    console.log('生命周期')\n  }\n}\n\nexport default new Index();\n</script>\n<style scoped>\n.class1 {\n  color: #f00;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n### 5 创建新页面\n项目根目录下\b执行\b`cml init page`, 输入页面名称first-page\n\n```shell\n$ cml init page\n? Please input page name:\n```\n回车，即可生成页面\b组件`src/pages/first-page/first-page.cml`。\n\n### 6 创建及引用组件\n\n项目根目录下\b执行\b`cml init component`，选择`普通组件`,输入first-com，\b回车，即可生成文件`components/first-com/first-com.cml`。 组件也是cml文件\b结构上与页面相同。\n\n拷贝如下代码到`first-com.cml`\n```html\n<template>\n  <view>\n    <text class=\"first-com-text\">我是组件first-com</text>\n  </view>\n</template>\n<script>\nclass FirstCom {\n\n}\nexport default new FirstCom();\n</script>\n<style scoped>\n.first-com-text {\n  color: #0f0;\n}\n</style>\n<script cml-type=\"json\">\n{}\n</script>\n```\n\n然后在刚才的`src/pages/index/index.cml`中引用`first-com`\n\n```html\n<script cml-type=\"json\">\n{\n  \"base\": {\n    \"usingComponents\": {\n      \"first-com\": \"components/first-com/first-com\"\n    }\n  }\n}\n</script>\n```\n\ntemplate中使用first-com组件。\n\n```html\n<template>\n  <view>\n    <first-com></first-com>\n  </view>\n</template>\n```\n\n经过以上操作，你已经学会了组件的引用，[丰富的组件](https://cmljs.org/doc/component/component.html)等待着你去学习!\n\n\n##进阶\b体验\n\n### [7 项目配置](https://cmljs.org/doc/framework/config.html)\n\n`chameleon.config.js`为项目的配置文件，以后定制化构建会\b使用到，比如是否带hash，是否\b压缩等等,可以在项目根目录下执行`cml build` \b，\b执行完成后\b，项目根目录的`dist`文件夹下生成build模式的文件。\n\n### [8 模拟\b数据](https://cmljs.org/doc/framework/mock.html)\n\n`mock/api/index.js`文件内容如下，可以本地模拟api请求。访问`localhost:8000/api/getMessage`\b即可看到模拟的api返回。端口以实际启动为准，默认8000.\n\n```javascript\nmodule.exports = [\n  {\n    method: ['get', 'post'],\n    path: '/api/getMessage',\n    controller: function (req, res, next) {\n      res.json({\n        total: 0,\n        message: [{\n          name: 'Hello chameleon!'\n        }]\n      });\n    }\n  }\n];\n```\n### 9 \b示例demo学习\n\b`chameleon-tool`中内置了todolist的项目模板，\b通过命令`cml init project --demo todo` 即可生成该模板，按照1.2节中的说明启动项目，即可看到如下页面\n\n![](https://cmljs.org/doc/assets/todo_preview.jpg)\n\n经过以上的介绍和实践操作，相信你已经了解了chameleon的基本使用，本文档其余部分将涵盖剩余功能和其他高级功能的详尽细节，所以请务必完整阅读整个文档！\n\n### [10 FAQ](https://cmljs.org/doc/framework/faq.html)\n\n##### 我想使用chameleon，是否需要大刀阔斧的重构项目？\n不需要，可以使用chameleon开发公用组件，<a href=\"https://cmljs.org/doc/terminal/io.html\">导出</a>到各端原有项目中使用。\n\n##### 用CML标准编写代码，是否增加调试成本？\n我们实现了全面的语法检查功能，且在持续加强。理论上框架是降低调试成本，就像从原生js开发到vuejs、reactjs是否认为也增加了调试成本，见仁见智。\n\n##### 各端包括小程序的接口更新频繁，如何保证框架编译的抽象度和稳定性？\n1、自建输入语法标准 cml，编译输出结果自定的格式语法。\n2、框架的runtime层实现匹配接收的编译输出代码，runtime跟随小程序更新。\n3、框架整体方向一致：mvvm底层设计模式为标准设计接口。\n基于以上三条，你可以理解为：我们设计了一个框架统一标准协议，再在各个端runtime分别实现这个框架，宏观的角度就像nodejs同时运行在window和macOS系统，就像flutter运行在Android和iOS一个道理。各端小程序接口更新除非遇到不向下兼容情况，否则不影响框架，如果真遇到不向下兼容更新，这种情况下是否用框架都需要改。\n\n##### 框架有多大，性能是否有影响？\n1、小程序的主要运行性能瓶颈是webview和js虚拟机的传输性能，我们在这里会做优化，尽可能diff出修改的部分进行传输，性能会更好。\n2、包大小，小程序有包大小限制，web端包大小也是工程师关心的点。首先基于多态协议，产出包纯净保留单端代码；其次框架的api和组件会按需打包。包大小是我们重点发力点，会持续优化到极致。目前build模式包大小测试结果如下:\n<span style=\"color: #ff534d;\">minimize</span><span style=\"color: #edd0be;\"> | </span><span style=\"color: #25c6fc;\">minimize + gzip</span>   \n<table style=\"color: #edd0be;\">\n<tr>\n  <th>平台</th><th>js总体积</th><th>外部框架</th><th>chameleon运行时代码</th><th>其他代码</th>\n</tr>\n<tr>\n  <td>web</td>\n  <td>\n    <span style=\"color: #ff534d;\">141.87kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">43.72kb</span>\n  </td>\n  <td>\n    vue+vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">99.26kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">33.89kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">35.96kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 8.85kb</span>\n  </td>\n  <td>\n    业务代码\n  </td>\n</tr>\n<tr>\n  <td>weex</td><td>\n    <span style=\"color: #ff534d;\">135kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">32.43kb</span>\n  </td>\n  <td>\n    vuex+vue-router<br/>\n    <span style=\"color: #ff534d;\">33.49kb</span>  \n    | \n    <span style=\"color: #25c6fc;\">17.96kb</span>\n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">25.23kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">5.94kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>wx</td><td>\n    <span style=\"color: #ff534d;\">101.66kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.75kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.53kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>baidu</td><td>\n    <span style=\"color: #ff534d;\">101.72kb</span>  \n    |\n    <span style=\"color: #25c6fc;\"> 28.13kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">98.78kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.61kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n<tr>\n  <td>alipay</td><td>\n    <span style=\"color: #ff534d;\">102kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">28.12kb</span>\n  </td>\n  <td>\n    mobx算在chameleon运行时中  \n  </td>\n  <td>\n    <span style=\"color: #ff534d;\">99.15kb</span>  \n    |\n    <span style=\"color: #25c6fc;\">26.34kb</span>\n  </td>\n    <td>\n    业务代码\n  </td>\n</tr>\n\n\n</table>\n\n##### 我只想跨web和各类小程序，是否可以不使用 Flexbox 布局模型？\n可以，如果你的项目不在 快应用、react-native、weex等平台运行，可以更便捷开发项目，特别是CSS的限制更少：\n<a href=\"https://cmljs.org/doc/example/web_wx.html\">只跨web和小程序的应用</a>\n","readmeFilename":"README.md","_id":"chameleon-tool@2.0.0-alpha.1","_npmVersion":"6.2.0","_nodeVersion":"10.9.0","_npmUser":{"name":"cml-tool","email":"CML@didichuxing.com"},"dist":{"integrity":"sha512-wCGq28onxX1TVodOYyWpdW50CC5inFr9TrUqz2tjw82rqieuBnMg4a+ZnLlDW+66ZZDsx1+/kbeGQHQlIKw9pA==","shasum":"add5e6716a9a73b7ac6c79b5178e36e3c6385f31","tarball":"https://registry.npmjs.org/chameleon-tool/-/chameleon-tool-2.0.0-alpha.1.tgz","fileCount":110,"unpackedSize":707100,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf5IRqCRA9TVsSAnZWagAAoakP/20x+J2W14yAB+f+IEsJ\nhtEJJEAatYx+JILPgWOf2Z5xQp3SCbgxUThpobaJEI0NGzeo5W0CWFJOTocq\nQHcA4CzNKLNZ0pUbztW/41Y01atm9MQBMBOC64J5wOH+pGhYF1L7FuVM6CSG\nWlPn6I5pcBRd0VoUk/JAr6bzUzQrO9m1bN12zvOyBgsphHOfwtJtmeoJwIdR\nYYKQa5dvdgpJwkPgm/tIxodw20k6pD6aQTQTqtEVFqQnXPzDucGhjNY5fPVP\nI9aFWinPys8w7tPcO+ktQ/FoXxy/mVK5u5saCdHpNm/DULx81mtKcR4h6acX\n605h9CFDN8yOdcBZTuUqJRNs6uR3e9/WkaSQCVr7utFrwacyEVQDZIa2Ttwb\n7v0uM23tH4jYK4QVUvbOp9F8QDvWlEpUKpXoDMX78yLJN2r8SMEPMkSwnpIs\nX4O1CpIeitnFtgKIms2i8JgB2iZZmBOjI23nlkXZ1/m2b1iwaC0uFP/HarY/\n335xK3xWLa9/ZbwlKUWN51UUAf1yCBigHuTeuQuhnijTZR5og/Lops95x5Ta\nVX/k1cf11o3kfEuugmW3hnlcdRWYkg1AEjjaX9xm14cWqWeTmRjHrqExg8o9\n8GSvx7AImOQG5UH+qcVlANkhyb0tatuSPdlb2u229FpFz53kOW62u2O8L+qg\nM6x1\r\n=ptJk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDZUCoEooM80Brkckm7WX4D6YPYw7eFKcwo08tgLXXx5wIgN1oD0I0qjQszRb7qQoWbgc6MGLZxHmcf4I+tGpDsciI="}]},"directories":{},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/chameleon-tool_2.0.0-alpha.1_1608811625630_0.0553988457091239"},"_hasShrinkwrap":false}},"time":{"created":"2018-12-13T02:28:04.521Z","0.0.1":"2018-12-13T02:28:04.659Z","modified":"2022-04-12T05:54:19.709Z","0.0.2":"2019-01-10T17:28:58.199Z","0.0.3":"2019-01-10T17:59:50.912Z","0.0.4":"2019-01-11T13:02:11.678Z","0.0.5":"2019-01-11T17:27:46.449Z","0.0.6":"2019-01-12T10:13:06.704Z","0.0.7":"2019-01-12T13:18:34.767Z","0.0.8":"2019-01-15T12:20:29.149Z","0.0.9":"2019-01-16T12:43:58.226Z","0.0.10":"2019-01-18T03:52:48.619Z","0.0.11":"2019-01-18T14:22:14.408Z","0.0.12-alpha.0":"2019-01-25T11:34:43.161Z","0.0.12":"2019-01-25T13:06:59.842Z","0.0.30-alpha.2":"2019-01-28T08:38:51.656Z","0.0.13":"2019-01-28T08:44:26.091Z","0.1.0-alpha.1":"2019-01-29T14:29:06.471Z","0.1.0-alpha.2":"2019-02-03T07:58:41.936Z","0.1.0-alpha.3":"2019-02-11T09:42:57.885Z","0.0.14":"2019-02-12T12:19:18.991Z","0.0.15-alpha.0":"2019-02-13T12:32:59.223Z","0.0.15":"2019-02-13T12:50:56.063Z","0.0.16-alpha.0":"2019-02-20T12:06:14.867Z","0.0.16":"2019-02-21T06:56:55.799Z","0.1.0-alpha.4":"2019-03-05T07:11:19.750Z","0.1.1-alpha.0":"2019-03-20T08:49:27.432Z","0.1.1":"2019-03-20T09:28:36.123Z","0.2.0-alpha.0":"2019-03-27T03:09:07.346Z","0.2.0-alpha.1":"2019-04-02T02:42:13.805Z","0.2.0":"2019-04-03T14:59:16.837Z","0.3.0-alpha.1":"2019-04-08T13:24:51.907Z","0.3.0-alpha.2":"2019-04-09T11:35:48.960Z","0.3.0-alpha.3":"2019-04-12T09:34:47.197Z","0.3.0-alpha.4":"2019-04-12T10:31:40.850Z","0.2.1":"2019-04-15T11:55:38.554Z","0.3.0-alpha.5":"2019-04-15T12:07:04.002Z","0.3.0-alpha.6":"2019-04-16T03:43:13.839Z","0.3.0-alpha.7":"2019-04-17T03:14:18.891Z","0.3.0-alpha.8":"2019-04-19T03:36:44.645Z","0.3.0-alpha.9":"2019-04-19T09:21:28.679Z","0.4.0-mvvm.1":"2019-04-22T12:04:44.145Z","0.4.0-mvvm.3":"2019-04-22T12:46:35.121Z","0.3.0":"2019-04-23T07:10:58.620Z","0.3.1":"2019-04-23T08:34:39.079Z","0.3.2":"2019-04-23T11:26:28.035Z","0.4.0-mvvm.5":"2019-04-28T09:32:10.707Z","0.4.0-mvvm.6":"2019-05-05T09:33:20.130Z","0.4.0-mvvm.7":"2019-05-09T05:13:48.822Z","0.4.0-mvvm.8":"2019-05-09T15:16:51.185Z","0.4.0-mvvm.9":"2019-05-16T12:54:22.589Z","0.4.0-mvvm.10":"2019-05-21T05:31:59.595Z","0.3.3-alpha.0":"2019-05-21T10:13:10.568Z","0.4.0-mvvm.11.1":"2019-05-28T02:36:51.158Z","0.4.0-mvvm.11":"2019-05-28T02:37:21.619Z","0.4.0-mvvm.12":"2019-05-29T09:48:21.471Z","0.4.0-mvvm.13":"2019-06-10T11:51:58.747Z","0.3.3-alpha.1":"2019-06-10T12:25:14.516Z","0.3.3-alpha.2":"2019-06-13T03:22:34.446Z","0.3.3-alpha.qq.1":"2019-06-13T07:28:03.210Z","0.4.0-mvvm.15":"2019-06-14T11:21:28.095Z","0.3.3-alpha.3":"2019-06-18T08:00:43.413Z","0.3.3-alpha.4":"2019-06-26T08:28:24.728Z","0.4.0-mvvm.16":"2019-06-27T03:54:08.960Z","0.3.3-alpha.5.1":"2019-07-03T04:03:37.899Z","0.3.3-alpha.5":"2019-07-03T04:04:46.327Z","0.3.3-alpha.6":"2019-07-10T10:20:56.718Z","0.3.3-alpha.7":"2019-07-12T11:27:21.896Z","0.3.3":"2019-07-17T09:38:05.178Z","0.4.0-alpha.2":"2019-07-19T09:57:21.038Z","0.4.0":"2019-08-08T12:31:26.948Z","0.4.1-alpha.0":"2019-08-21T13:02:53.345Z","0.4.1-alpha.1":"2019-08-26T05:16:25.996Z","0.4.1":"2019-08-28T03:55:22.598Z","1.0.0":"2019-08-28T13:06:03.610Z","1.0.2":"2019-08-28T13:56:49.295Z","1.0.3-alpha.0":"2019-09-04T10:34:46.831Z","1.0.3":"2019-09-09T12:07:19.764Z","1.0.4-alpha.1":"2019-11-20T11:37:28.010Z","1.0.4-alpha.2":"2019-12-26T07:10:45.685Z","1.0.4":"2020-02-04T10:27:50.741Z","1.0.5-alpha.1":"2020-02-19T06:18:32.102Z","1.0.5-alpha.2":"2020-03-18T03:54:36.671Z","1.0.5":"2020-03-25T03:58:20.359Z","1.0.6-alpha.1":"2020-04-17T10:03:14.827Z","1.0.6-alpha.2":"2020-05-08T11:57:26.659Z","1.0.6-alpha.3":"2020-05-13T09:55:34.400Z","1.0.6-alpha.5":"2020-05-22T08:15:48.443Z","1.0.6-alpha.6":"2020-06-03T12:07:54.933Z","1.0.6":"2020-06-19T11:51:04.997Z","1.0.8-alpah.0":"2020-07-31T10:43:57.430Z","1.0.8-alpah.1":"2020-08-13T12:38:02.605Z","1.0.8":"2020-11-13T11:25:36.328Z","2.0.0-alpha.1":"2020-12-24T12:07:05.786Z"},"maintainers":[{"name":"cml-tool","email":"CML@didichuxing.com"}],"license":"Apache","readme":"","readmeFilename":"","description":"chameleon 脚手架工具","author":{"name":"Chameleon-Team"},"keywords":["chameleon","cml","miniprogram","vue","weex","android","ios","mobile","mvvm"]}