Skip to content

C
Chameleon

DiDi / Chameleon

通知 13
Star 1
Fork 0
C
Chameleon

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
migrate-vue-to-cml.html 86.4 KB
Newer Older
J
doc: update  
JiM-W 已提交
1 2 3 4 5 6 7 8 9 10 
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>迁移 Vue 项目到 CML | Chameleon 变色龙</title>
    <meta name="description" content="一套代码运行多端，一端所见即多端所见">
    <meta name="generator" content="VuePress 1.4.0">
    <link rel="icon" href="/brand/logo.png">
J
feat: 中文搜索改用chameleon 的id  
JiM-W 已提交
11 12 
    <link rel="preload" href="/assets/css/0.styles.54ae56e3.css" as="style"><link rel="preload" href="/assets/js/app.bcfec7ef.js" as="script"><link rel="preload" href="/assets/js/60.7feedc98.js" as="script"><link rel="preload" href="/assets/js/1.b97c77c7.js" as="script"><link rel="preload" href="/assets/js/44.a26444fd.js" as="script"><link rel="preload" href="/assets/js/2.d28a060e.js" as="script"><link rel="prefetch" href="/assets/js/10.051c47d1.js"><link rel="prefetch" href="/assets/js/11.2aa2c0dc.js"><link rel="prefetch" href="/assets/js/12.c44665a3.js"><link rel="prefetch" href="/assets/js/13.70dfc111.js"><link rel="prefetch" href="/assets/js/14.6a71260e.js"><link rel="prefetch" href="/assets/js/15.705c4158.js"><link rel="prefetch" href="/assets/js/16.71245a0d.js"><link rel="prefetch" href="/assets/js/17.1a08cd91.js"><link rel="prefetch" href="/assets/js/18.e24096cc.js"><link rel="prefetch" href="/assets/js/19.8a8e69c2.js"><link rel="prefetch" href="/assets/js/20.cfee8d18.js"><link rel="prefetch" href="/assets/js/21.659a4f9f.js"><link rel="prefetch" href="/assets/js/22.ca78fab7.js"><link rel="prefetch" href="/assets/js/23.28baa1bb.js"><link rel="prefetch" href="/assets/js/24.c0a085ec.js"><link rel="prefetch" href="/assets/js/25.2f0d69d1.js"><link rel="prefetch" href="/assets/js/26.205c20fa.js"><link rel="prefetch" href="/assets/js/27.5314d987.js"><link rel="prefetch" href="/assets/js/28.0087c8dc.js"><link rel="prefetch" href="/assets/js/29.70de71c9.js"><link rel="prefetch" href="/assets/js/30.9c7a51df.js"><link rel="prefetch" href="/assets/js/31.a0c45279.js"><link rel="prefetch" href="/assets/js/32.b68995bf.js"><link rel="prefetch" href="/assets/js/33.5ebcc272.js"><link rel="prefetch" href="/assets/js/34.76b8c9f0.js"><link rel="prefetch" href="/assets/js/35.6d4c26dc.js"><link rel="prefetch" href="/assets/js/36.70afd6a5.js"><link rel="prefetch" href="/assets/js/37.d40c4e19.js"><link rel="prefetch" href="/assets/js/38.3f0d946f.js"><link rel="prefetch" href="/assets/js/39.def09b51.js"><link rel="prefetch" href="/assets/js/40.7f6b7784.js"><link rel="prefetch" href="/assets/js/41.a0de49d9.js"><link rel="prefetch" href="/assets/js/42.8c3379e9.js"><link rel="prefetch" href="/assets/js/43.a81a4bb3.js"><link rel="prefetch" href="/assets/js/45.1393dfc0.js"><link rel="prefetch" href="/assets/js/46.e2ebc893.js"><link rel="prefetch" href="/assets/js/47.4da9ab59.js"><link rel="prefetch" href="/assets/js/48.2fdfc375.js"><link rel="prefetch" href="/assets/js/49.f9d1a56b.js"><link rel="prefetch" href="/assets/js/5.1068e2bd.js"><link rel="prefetch" href="/assets/js/50.1ceb9d3f.js"><link rel="prefetch" href="/assets/js/51.a255833a.js"><link rel="prefetch" href="/assets/js/52.98e72823.js"><link rel="prefetch" href="/assets/js/53.03ba08cb.js"><link rel="prefetch" href="/assets/js/54.9d82aee4.js"><link rel="prefetch" href="/assets/js/55.4956ad06.js"><link rel="prefetch" href="/assets/js/56.5f511c62.js"><link rel="prefetch" href="/assets/js/57.9806475a.js"><link rel="prefetch" href="/assets/js/58.ebf8ba39.js"><link rel="prefetch" href="/assets/js/59.ebca6969.js"><link rel="prefetch" href="/assets/js/6.25d813cf.js"><link rel="prefetch" href="/assets/js/61.45ebc898.js"><link rel="prefetch" href="/assets/js/62.3a2ee585.js"><link rel="prefetch" href="/assets/js/63.310dd45c.js"><link rel="prefetch" href="/assets/js/64.5cc72cbe.js"><link rel="prefetch" href="/assets/js/65.fdc686c2.js"><link rel="prefetch" href="/assets/js/66.7730cd91.js"><link rel="prefetch" href="/assets/js/67.5c4cc3ba.js"><link rel="prefetch" href="/assets/js/68.35e45285.js"><link rel="prefetch" href="/assets/js/69.f52c6d25.js"><link rel="prefetch" href="/assets/js/7.9a617213.js"><link rel="prefetch" href="/assets/js/70.fb558cc9.js"><link rel="prefetch" href="/assets/js/71.bb886562.js"><link rel="prefetch" href="/assets/js/72.3c87e0a1.js"><link rel="prefetch" href="/assets/js/73.4cd26a47.js"><link rel="prefetch" href="/assets/js/74.ae876b8f.js"><link rel="prefetch" href="/assets/js/75.80730e6c.js"><link rel="prefetch" href="/assets/js/76.3eca2e20.js"><link rel="prefetch" href="/assets/js/77.5f4c3e9b.js"><link rel="prefetch" href="/assets/js/78.991d2007.js"><link rel="prefetch" href="/assets/js/79.2798e216.js"><link rel="prefetch" href="/assets/js/8.b158ec59.js"><link rel="prefetch" href="/assets/js/80.c095fb3b.js"><link rel="prefetch" href="/assets/js/81.e408e60b.js"><link rel="prefetch" href="/assets/js/82.cc25d73a.js"><link rel="prefetch" href="/assets/js/83.356558e4.js"><link rel="prefetch" href="/assets/js/84.8866a75b.js"><link rel="prefetch" href="/assets/js/85.87eac94e.js"><link rel="prefetch" href="/assets/js/86.76900837.js"><link rel="prefetch" href="/assets/js/87.103b6b87.js"><link rel="prefetch" href="/assets/js/88.94e419d1.js"><link rel="prefetch" href="/assets/js/89.8be3decb.js"><link rel="prefetch" href="/assets/js/9.dc5cb60e.js"><link rel="prefetch" href="/assets/js/90.48dae3fa.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.1b18fdaf.js">
    <link rel="stylesheet" href="/assets/css/0.styles.54ae56e3.css">
J
doc: update  
JiM-W 已提交
13 14 
  </head>
  <body>
J
feat: 中文搜索改用chameleon 的id  
JiM-W 已提交
15 
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/brand/logo.png" alt="Chameleon 变色龙" class="logo"> <span class="site-name can-hide">Chameleon 变色龙</span></a> <div class="links"><form id="search-form" role="search" class="algolia-search-wrapper search-box"><input id="algolia-search-input" class="search-query"></form> <nav class="nav-links can-hide"><div class="nav-item"><a href="/docs/" class="nav-link router-link-active">
J
doc: update  
JiM-W 已提交
16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 
  文档
</a></div><div class="nav-item"><a href="/components/" class="nav-link">
  组件
</a></div><div class="nav-item"><a href="/api/" class="nav-link">
  API
</a></div><div class="nav-item"><a href="/tutorial/" class="nav-link">
  教程
</a></div><div class="nav-item"><a href="/faq/" class="nav-link">
  FAQ
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/docs/" class="nav-link router-link-active">
  文档
</a></div><div class="nav-item"><a href="/components/" class="nav-link">
  组件
</a></div><div class="nav-item"><a href="/api/" class="nav-link">
  API
</a></div><div class="nav-item"><a href="/tutorial/" class="nav-link">
  教程
</a></div><div class="nav-item"><a href="/faq/" class="nav-link">
  FAQ
J
feat: 增加案例  
JiM-W 已提交
35 
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>开始</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/introduction.html" class="sidebar-link">介绍</a></li><li><a href="/docs/setup.html" class="sidebar-link">起步</a></li><li><a href="/docs/cli.html" class="sidebar-link">命令行工具 (CLI)</a></li><li><a href="/docs/folder.html" class="sidebar-link">目录结构</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>框架</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/view.html" class="sidebar-link">视图层</a></li><li><a href="/docs/cmss.html" class="sidebar-link">CMSS介绍</a></li><li><a href="/docs/cml.html" class="sidebar-link">CML 语法</a></li><li><a href="/docs/cml-vue.html" class="sidebar-link">CML - 类 Vue 语法</a></li><li><a href="/docs/logic.html" class="sidebar-link">逻辑层</a></li><li><a href="/docs/store.html" class="sidebar-link">数据管理</a></li><li><a href="/docs/custom.html" class="sidebar-link">自定义组件</a></li><li><a href="/docs/config.html" class="sidebar-link">配置</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>高级指引</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/poly.html" class="sidebar-link">多态协议</a></li><li><a href="/docs/build.html" class="sidebar-link">工程化</a></li><li><a href="/docs/io.html" class="sidebar-link">导入与导出</a></li><li><a href="/docs/sdk.html" class="sidebar-link">CML SDK</a></li><li><a href="/docs/mvvm.html" class="sidebar-link">定制扩展端</a></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>迁移</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/docs/migrate-guide.html" class="sidebar-link">CML 迁移指南</a></li><li><a href="/docs/migrate-wx-to-cml.html" class="sidebar-link">迁移微信小程序项目到 CML</a></li><li><a href="/docs/migrate-vue-to-cml.html" class="active sidebar-link">迁移 Vue 项目到 CML</a></li><li><a href="/docs/migrate-weex-to-cml.html" class="sidebar-link">迁移 Weex 项目到 CML</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="迁移-vue-项目到-cml"><a href="#迁移-vue-项目到-cml" class="header-anchor">#</a> 迁移 Vue 项目到 CML</h1> <h2 id="迁移原则："><a href="#迁移原则：" class="header-anchor">#</a> 迁移原则：</h2> <p>以小逻辑块为单位，对照老代码，以 cml 语法重写，报错可修正</p> <p>这样可避免以下问题：</p> <p>1、大块逻辑迁移会导致报错无法追查</p> <p>2、直接 copy 会导致语法隐藏 bug 不可控（虽然 ide 没有问题，但真机调试出问题）</p> <p>请尽量按照 cml 语法或者类 vue 语法重写迁移，避免语法纠错浪费时间</p> <h2 id="项目初始化"><a href="#项目初始化" class="header-anchor">#</a> 项目初始化</h2> <div class="language- extra-class"><pre class="language-text"><code>cml init project
J
doc: update  
JiM-W 已提交
36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 
</code></pre></div><p>初始化后，CML 项目如下：</p> <img src="/assets/img/cml-project.e50ef814.png" width="400px"> <p>依具体情况配置构建平台和配置平台基础样式。</p> <p>可修改 <code>chameleon.config.js</code> 的 <code>platforms</code> 和 <code>baseStyle</code> 字段，如下：</p> <img src="/assets/img/project-config.28771b63.png" width="400px"> <p>假设有下面 👇 结构的 vue 项目（vue-cli 2 版本生成的）</p> <img src="/assets/img/vue-project.d21e5571.png" width="400px"> <p>components 下包含各个组件代码，router 下是路由配置，store 是数据管理中心，config 和 build 下是 vue 项目的 webpack 构建的基本配置</p> <p>接下来就一步步展示如何将这个项目迁移到 CML</p> <h2 id="工程层面的迁移"><a href="#工程层面的迁移" class="header-anchor">#</a> 工程层面的迁移</h2> <h4 id="迁移-webpack-配置"><a href="#迁移-webpack-配置" class="header-anchor">#</a> 迁移 —— webpack 配置</h4> <p>CML 的工程配置具体<a href="/docs/config.html">参考</a></p> <p>CML 命令行工具，提供了 <code>dev</code> <code>build</code> 两种构建模式，可以对应到 Vue 项目中的 <code>dev</code> <code>build</code></p> <table><thead><tr><th>vue 项目</th> <th>CML 项目</th></tr></thead> <tbody><tr><td>npm run dev</td> <td>cml dev</td></tr> <tr><td>npm run build</td> <td>cml build</td></tr></tbody></table> <p>chameleon 内置了对于 webpack 和项目的构建，<a href="/docs/config.html#修改-webpack-配置">参考这里修改 CML 内置 webpack 构建</a></p> <h4 id="迁移-store"><a href="#迁移-store" class="header-anchor">#</a> 迁移 —— store</h4> <p>CML 中的 store 使用<a href="/docs/store.html">参考</a></p> <p>CML 项目中的<code>store</code>和 vue 项目中的<code>store</code>文件下是对应的；</p> <p>假设 vue 项目中某个组件</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> mapState <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'vuex'</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  computed<span class="token operator">:</span> <span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'count'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre></div><p>那么在 CML 项目中</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> store <span class="token keyword">from</span> <span class="token string">'../path/to/store'</span><span class="token punctuation">;</span>

<span class="token keyword">class</span> <span class="token class-name">Index</span> <span class="token punctuation">{</span>
  computed <span class="token operator">=</span> store<span class="token punctuation">.</span><span class="token function">mapState</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'count'</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">new</span> <span class="token class-name">Index</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="迁移-router"><a href="#迁移-router" class="header-anchor">#</a> 迁移 —— router</h4> <p><code>router-view</code>出口的的对应关系</p> <p>假设<code>vue项目</code>中入口文件 <code>src/App.vue</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-view</span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>那么对应着<code>cml项目</code>中的<code>src/app/app.cml</code>,这里的<code>&lt;app&gt;</code>会渲染成<code>&lt;router-view&gt;</code>对应的某个路由；</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>app</span> <span class="token attr-name">store</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>{{store}}<span class="token punctuation">&quot;</span></span> <span class="token attr-name">router-config</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>{{routerConfig}}<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>app</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>路由配置对应关系</p> <p><code>vue项目</code>中的路由 <code>src/router/index.js</code></p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> Vue <span class="token keyword">from</span> <span class="token string">'vue'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> Router <span class="token keyword">from</span> <span class="token string">'vue-router'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> HelloWorld <span class="token keyword">from</span> <span class="token string">'@/components/HelloWorld'</span><span class="token punctuation">;</span>

Vue<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span>Router<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">new</span> <span class="token class-name">Router</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  routes<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      path<span class="token operator">:</span> <span class="token string">'/helloworld'</span><span class="token punctuation">,</span>
      name<span class="token operator">:</span> <span class="token string">'HelloWorld'</span><span class="token punctuation">,</span>
      component<span class="token operator">:</span> HelloWorld<span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>对于<code>router.js</code>中配置的一级路由，需要通过 <code>cml init page</code> 去生成对应的组件</p> <p><code>cml项目</code>中 <code>src/router.config.json</code></p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token punctuation">{</span>
  <span class="token string">&quot;mode&quot;</span><span class="token operator">:</span> <span class="token string">&quot;history&quot;</span><span class="token punctuation">,</span>
  <span class="token string">&quot;domain&quot;</span><span class="token operator">:</span> <span class="token string">&quot;https://www.chameleon.com&quot;</span><span class="token punctuation">,</span>
  <span class="token string">&quot;routes&quot;</span><span class="token operator">:</span><span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      <span class="token string">&quot;url&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/helloworld&quot;</span><span class="token punctuation">,</span>
      <span class="token string">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/pages/HelloWorld/HelloWorld&quot;</span><span class="token punctuation">,</span>
      <span class="token string">&quot;name&quot;</span><span class="token operator">:</span> <span class="token string">&quot;helloworld&quot;</span><span class="token punctuation">,</span>
      <span class="token string">&quot;mock&quot;</span><span class="token operator">:</span> <span class="token string">&quot;index.php&quot;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span>

</code></pre></div><p>其中：</p> <p><code>url</code>字段 对应 vue 中的 path 字段；</p> <p><code>path</code>字段对应着 vue 中 <code>import Comp from '/path/to/Comp'</code>中的组件路径</p> <p>chameleon 会自动引入 component 字段配置的组件,不需要再配置 component 字段；</p> <p><strong>总结</strong></p> <p><strong>1 注意 CML 项目中不支持路由嵌套,如果有路由嵌套的情况需要考虑转化成组件去实现</strong></p> <p><strong>2 在迁移路由的时候，要一个一个路由对应着去迁移</strong></p> <p><strong>3 vue 项目中的一级路由的组件都通过 <code>cml init page</code>去初始化这个组件</strong></p> <h2 id="迁移页面-组件"><a href="#迁移页面-组件" class="header-anchor">#</a> 迁移页面/组件</h2> <p>假如 vue 项目中 <code>src/components/HelloWorld.vue</code>组件内有个子组件 <code>comp</code>;</p> <p>首先我们修改下这两个组件，使其有一些简单的新增 todolist 的功能</p> <p><code>HelloWorld.vue</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>demo-com<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>title<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>this is helloworld<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>comp</span> <span class="token attr-name">@parentClick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>handleParentClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>comp</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> lodash <span class="token keyword">from</span> <span class="token string">'lodash'</span><span class="token punctuation">;</span>

<span class="token keyword">import</span> comp <span class="token keyword">from</span> <span class="token string">'./comp.vue'</span><span class="token punctuation">;</span>
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'HelloWorld'</span><span class="token punctuation">,</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">handleParentClick</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'parentClick'</span><span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  components<span class="token operator">:</span> <span class="token punctuation">{</span>
    comp<span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- Add &quot;scoped&quot; attribute to limit CSS to this component only --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
<span class="token selector">.demo-com</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
  <span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>
  <span class="token property">align-items</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 400px<span class="token punctuation">;</span>
  <span class="token property">justify-content</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.title</span> <span class="token punctuation">{</span>
  <span class="token property">align-self</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
  <span class="token property">color</span><span class="token punctuation">:</span> #61c7fc<span class="token punctuation">;</span>
  <span class="token property">font-size</span><span class="token punctuation">:</span> 72px<span class="token punctuation">;</span>
  <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>注意：如果第三方仓库中的某些 API 依赖该平台的全局变量，那么这些 API 只能在该平台使用，在其他平台是无效的；</p> <p><code>comp.vue</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>todo<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>(item, index) in todos<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      {{ item }}
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>addTodo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>addTodo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>handleClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>触发父组件事件<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  name<span class="token operator">:</span> <span class="token string">'HelloWorld'</span><span class="token punctuation">,</span>
  <span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      todo<span class="token operator">:</span> <span class="token string">'todo1'</span><span class="token punctuation">,</span>
      todos<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  methods<span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token function">addTodo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>todos<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>todo<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">handleClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'click'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$emit</span><span class="token punctuation">(</span><span class="token string">'parentClick'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        value<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- Add &quot;scoped&quot; attribute to limit CSS to this component only --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="新建页面-组件"><a href="#新建页面-组件" class="header-anchor">#</a> 新建页面/组件</h3> <div class="language- extra-class"><pre class="language-text"><code>cml init page

输入 HelloWorld

</code></pre></div><p>利用命令行命令，在<code>src/pages</code>中生成对应的页面</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span><span class="token punctuation">&gt;</span></span>HelloCML<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">class</span> <span class="token class-name">HelloWorld</span> <span class="token punctuation">{</span>
  <span class="token comment">//...</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">new</span> <span class="token class-name">HelloWorld</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">cml-type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token punctuation">{</span>
  <span class="token string">&quot;base&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token string">&quot;wx&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string">&quot;navigationBarTitleText&quot;</span><span class="token operator">:</span> <span class="token string">&quot;index&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;backgroundTextStyle&quot;</span><span class="token operator">:</span> <span class="token string">&quot;dark&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;backgroundColor&quot;</span><span class="token operator">:</span> <span class="token string">&quot;#E2E2E2&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token string">&quot;alipay&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string">&quot;defaultTitle&quot;</span><span class="token operator">:</span> <span class="token string">&quot;index&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;pullRefresh&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token string">&quot;allowsBounceVertical&quot;</span><span class="token operator">:</span> <span class="token string">&quot;YES&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;titleBarColor&quot;</span><span class="token operator">:</span> <span class="token string">&quot;#ffffff&quot;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token string">&quot;baidu&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string">&quot;navigationBarBackgroundColor&quot;</span><span class="token operator">:</span> <span class="token string">&quot;#ffffff&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;navigationBarTextStyle&quot;</span><span class="token operator">:</span> <span class="token string">&quot;white&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;navigationBarTitleText&quot;</span><span class="token operator">:</span> <span class="token string">&quot;index&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;backgroundColor&quot;</span><span class="token operator">:</span> <span class="token string">&quot;#ffffff&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;backgroundTextStyle&quot;</span><span class="token operator">:</span> <span class="token string">&quot;dark&quot;</span><span class="token punctuation">,</span>
    <span class="token string">&quot;enablePullDownRefresh&quot;</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
    <span class="token string">&quot;onReachBottomDistance&quot;</span><span class="token operator">:</span> <span class="token number">50</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language- extra-class"><pre class="language-text"><code>cml init component
选择 Normal component
输入 comp
</code></pre></div><p>利用命令行命令，在<code>src/components</code>中生成对应的组件</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span><span class="token punctuation">&gt;</span></span>HelloCML<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">class</span> <span class="token class-name">Comp</span> <span class="token punctuation">{</span>
  <span class="token comment">//...</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">new</span> <span class="token class-name">Comp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">cml-type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>json<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token punctuation">{</span>
  <span class="token string">&quot;base&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="迁移组件引用"><a href="#迁移组件引用" class="header-anchor">#</a> 迁移组件引用</h3> <p>假设 vue 项目<code>src/components/HelloWorld.vue</code>中引用了其他组件 <code>import comp from './comp.vue';</code></p> <p>对应到 CML 项目 组件需要在 usingComponents 引用，不需要在配置 <code>components</code>字段</p> <p>修改<code>src/pages/HelloWorld/HelloWorld.cml</code> 页面配置，如下：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token operator">&lt;</span>script cml<span class="token operator">-</span>type<span class="token operator">=</span><span class="token string">&quot;json&quot;</span><span class="token operator">&gt;</span>
<span class="token punctuation">{</span>
  <span class="token string">&quot;base&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token string">&quot;usingComponents&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
      <span class="token string">&quot;comp&quot;</span><span class="token operator">:</span><span class="token string">&quot;/components/comp/comp&quot;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token operator">&lt;</span><span class="token operator">/</span>script<span class="token operator">&gt;</span>
</code></pre></div><p><strong>总结</strong></p> <p><strong>1 <code>router.js</code>中对应的组件需要通过 <code>cml init page</code>生成，然后在 <code>router.config.js</code>中配置对应路由</strong></p> <p><strong>2 组件内部引用的子组件要通过<code>cml init component</code> 生成 ，然后通过<code>usingComponents</code>字段去引用</strong></p> <p><strong>3 组件内引用的其他 js 库，比如<code>import lodash from 'lodash'</code>仍然通过<code>import</code>的形式引用</strong></p> <h2 id="页面-组件迁移细节"><a href="#页面-组件迁移细节" class="header-anchor">#</a> 页面&amp;&amp;组件迁移细节</h2> <h3 id="template模板迁移"><a href="#template模板迁移" class="header-anchor">#</a> <code>template</code>模板迁移</h3> <p>这里以 CML 的 Vue 语法为例：<a href="/docs/cml-vue.html">CML 类 Vue 基础语法</a></p> <h4 id="数据绑定、条件渲染、循环、事件绑定的迁移"><a href="#数据绑定、条件渲染、循环、事件绑定的迁移" class="header-anchor">#</a> 数据绑定、条件渲染、循环、事件绑定的迁移</h4> <p>假设，原有 vue 项目代码，如下：</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>scroller-wrap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  数据绑定
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>{{}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  条件渲染
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>condition<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>v-if<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-else-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>condition1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>v-else-if<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-else</span><span class="token punctuation">&gt;</span></span>v-else<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  循环
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>(item ,index) in array<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  事件绑定
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>tapTest<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>handleClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Click me!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>那么，使用 CML 的类 Vue 语法后：整体基本上不用变，只需要将标签改成 CML 的内置标签即可。</p> <p>注意需要声明<code>&lt;template lang=&quot;vue&quot;&gt;&lt;/template&gt;</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>scroller-wrap<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    数据绑定
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>{{}}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
    条件渲染
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>condition<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>v-if<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">v-else-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>condition1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>v-else-if<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">v-else</span><span class="token punctuation">&gt;</span></span>v-else<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
    循环
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>(item ,index) in array<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
    事件绑定
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>tapTest<span class="token punctuation">&quot;</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>handleClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>Click me!<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h4 id="vue-项目标签-cml-标签"><a href="#vue-项目标签-cml-标签" class="header-anchor">#</a> vue 项目标签 -&gt; cml 标签</h4> <table><thead><tr><th>vue 项目</th> <th>cml</th></tr></thead> <tbody><tr><td>div</td> <td>view</td></tr> <tr><td>text span</td> <td>text</td></tr> <tr><td>img</td> <td>image</td></tr> <tr><td>input</td> <td>input<a href="/components/input.html">组件</a></td></tr> <tr><td>button</td> <td>button<a href="/components/button.html">组件</a></td></tr> <tr><td>textarea</td> <td>textarea<a href="/components/textarea.html">组件</a></td></tr> <tr><td>switch</td> <td>switch<a href="/components/switch.html">组件</a></td></tr> <tr><td>radio</td> <td>radio<a href="/components/radio.html">组件</a></td></tr> <tr><td>checkbox</td> <td>checkbox<a href="/components/checkbox.html">组件</a></td></tr> <tr><td>image</td> <td>image<a href="/components/image.html">组件</a></td></tr> <tr><td>video</td> <td>video<a href="/components/video.html">组件</a></td></tr> <tr><td></td> <td></td></tr></tbody></table> <p>没有列出来的标签比如<code>head p main</code>等等只能在多态组件中使用，不支持跨多端</p> <p>对于 <code>a</code>标签的 href,如果想要达到跨多端的效果，需要通过绑定事件使用 <code>cml.open()</code> 去跳转。</p> <h4 id="cml-对于语法的扩展支持"><a href="#cml-对于语法的扩展支持" class="header-anchor">#</a> CML 对于语法的扩展支持</h4> <p>指令的扩展 c-show、c-model、c-show<a href="/docs/cml.html#指令">参考</a></p> <p>component is 动态组件的扩展<a href="/docs/cml.html#动态组件">参考</a></p> <p>事件绑定支持内联事件传参数<a href="/docs/cml.html#事件">参考</a></p> <h4 id="迁移注意点"><a href="#迁移注意点" class="header-anchor">#</a> 迁移注意点</h4> <ul><li><a href="/docs/cml-vue.html">CML 支持的类 Vue 语法</a>,只有在文档中列出的语法才支持多端，其他没有列出的语法仅可以在 Web 端使用，跨端没有支持，比如 <code>v-html</code> <code>class</code> 的对象语法 数组语法等。</li></ul> <p>根据以上教程，我们可以迁移 <code>HelloWorld.vue</code> 和 <code>comp.vue</code> 中的模板内容了</p> <p><code>HelloWorld.cml</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>vue<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span><span class="token punctuation">&gt;</span></span>this is helloworld<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>comp</span> <span class="token attr-name">@parentClick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>handleParentClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>comp</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p><code>comp.cml</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>vue<span class="token punctuation">'</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>text<span class="token punctuation">&quot;</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>todo<span class="token punctuation">&quot;</span></span> <span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>input</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>(item,index) in todos<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      {{item}}
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>addTodo<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>addTodo<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>handleClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>text</span><span class="token punctuation">&gt;</span></span>触发父组件事件<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>text</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

</code></pre></div><h3 id="js-内容迁移"><a href="#js-内容迁移" class="header-anchor">#</a> JS 内容迁移</h3> <h4 id="生命周期迁移-：和-vue-保持一致"><a href="#生命周期迁移-：和-vue-保持一致" class="header-anchor">#</a> 生命周期迁移 ：和 vue 保持一致</h4> <h4 id="数据的迁移参考"><a href="#数据的迁移参考" class="header-anchor">#</a> 数据的迁移<a href="/docs/logic.html">参考</a></h4> <h4 id="vue-项目-api-的迁移"><a href="#vue-项目-api-的迁移" class="header-anchor">#</a> vue 项目 API 的迁移</h4> <p>API 迁移包括 http 请求 路由跳转 本地存储等
参考：<a href="/api/">chameleon-api 的文档</a></p> <p>假设，原有 vue 项目代码，如下：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code>router<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span> path<span class="token operator">:</span> <span class="token string">'/pages/navigateBack/index'</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><p>跨多端的路由仅支持 传入 path 字段进行路由，不支持路由 <code>name</code>字段的路由</p> <p>那么，使用 CML 语法后：</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">import</span> cml <span class="token keyword">from</span> <span class="token string">'chameleon-api'</span><span class="token punctuation">;</span>
cml<span class="token punctuation">.</span><span class="token function">redirectTo</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  path<span class="token operator">:</span> <span class="token string">'/pages/navigateBack/index'</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><h4 id="事件的触发机制，映射如下："><a href="#事件的触发机制，映射如下：" class="header-anchor">#</a> 事件的触发机制，映射如下：</h4> <table><thead><tr><th>vue 项目</th> <th>cml</th></tr></thead> <tbody><tr><td>this.$emit(xxx,xxx)</td> <td>this.$cmlEmit(xxx,xxx)</td></tr></tbody></table> <p>事件对象参数</p> <p>CML 对 <code>web</code> <code>native</code> <code>wx</code> 各个端的事件对象进行了统一代理<a href="/docs/cml.html#事件">参考</a>。</p> <p>对于灰度区组件（多态组件）各个端的事件对象还是<strong>对应端的事件对象</strong>，CML 框架不会对灰度区<code>origin-</code>开头的标签和第三方组件标签上绑定的事件进行事件代理。</p> <p>事件冒泡</p> <p>#chameleon 生成的 Weex 项目默认都是开启了支持事件冒泡的机制</p> <p>#同时扩展了阻止事件冒泡的语法；</p> <p>vue 语法(仅仅支持 <code>.stop</code>)</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name">@click.stop</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>handleClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p>cml 语法</p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>view</span> <span class="token attr-name"><span class="token namespace">c-catch:</span>click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>handleClick<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>view</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p><strong>总结</strong></p> <p><strong>1 由于 CML 是跨多端框架，所以在 Web 端特有的全局变量，比如 <code>window document history location</code>等在 CML 中是不支持的</strong></p> <p><strong>2 对于 vue 的一些全局 API 比如<code>Vue.extend Vue.set</code>以及一些文档中没有列出的指令，比如<code>v-html v-pre</code>等都是不支持跨多端的</strong></p> <p>根据以上教程，我们可以迁移<code>HelloWorld.vue</code>和<code>comp.vue</code>中的 js 内容了</p> <p><code>HelloWorld.cml</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> lodash <span class="token keyword">from</span> <span class="token string">'lodash'</span><span class="token punctuation">;</span>
<span class="token keyword">class</span> <span class="token class-name">HelloWorld</span> <span class="token punctuation">{</span>
  methods <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token function">handleParentClick</span><span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'parentClick'</span><span class="token punctuation">,</span> <span class="token operator">...</span>args<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">new</span> <span class="token class-name">HelloWorld</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><p><code>comp.cml</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">class</span> <span class="token class-name">Comp</span> <span class="token punctuation">{</span>
  data <span class="token operator">=</span> <span class="token punctuation">{</span>
    todo<span class="token operator">:</span> <span class="token string">'todo1'</span><span class="token punctuation">,</span>
    todos<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>

  methods <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token function">addTodo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>todos<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>todo<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token function">handleClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">$cmlEmit</span><span class="token punctuation">(</span><span class="token string">'parentClick'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
        value<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token keyword">new</span> <span class="token class-name">Comp</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><h3 id="style-内容的迁移"><a href="#style-内容的迁移" class="header-anchor">#</a> style 内容的迁移</h3> <h4 id="页面布局的迁移"><a href="#页面布局的迁移" class="header-anchor">#</a> 页面布局的迁移</h4> <p>由于 CML 应用是 跨多端 Web Native 小程序框架，如果需要跨 Native，必须使用 <code>flexbox</code> 进行样式布局，其他场景可以参考<a href="/tutorial/web-wx-only-app.html">只跨 Web 和小程序的应用</a></p> <p>关于样式的使用教程<a href="/docs/cmss.html">参考</a></p> <p>模板上的样式语法<a href="/docs/cmss.html">参考</a></p> <h4 id="样式单位的迁移"><a href="#样式单位的迁移" class="header-anchor">#</a> 样式单位的迁移</h4> <p>如果样式想要适配多端，需要将单位改成<code>cpx</code>;</p> <p>👉 根据以上教程，我们可以迁移<code>HelloWorld.vue</code>和<code>comp.vue</code>中的 js 内容了</p> <p><code>HelloWorld.cml</code></p> <div class="language-vue extra-class"><pre class="language-vue"><code>.demo-com { display: flex; flex-direction: column; align-items: center; height:400cpx;
justify-content: center; } .title { align-self: center; color: #61c7fc; font-size: 72cpx;
margin-bottom: 20cpx; }
</code></pre></div><p>以上，简单的介绍了 vue 项目迁移到 CML 的步骤，如果还有任何疑问，欢迎随时在 CML 官方微信和官方 QQ 群里进行反馈，我们将随时解答你的困惑，再次感谢你对 CML 的支持~</p> <p>​ Best wishes</p> <p>​ CML 团队</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/docs/migrate-wx-to-cml.html" class="prev">
        迁移微信小程序项目到 CML
      </a></span> <span class="next"><a href="/docs/migrate-weex-to-cml.html">
        迁移 Weex 项目到 CML
      </a>
      →
    </span></p></div> <footer class="footer" data-v-aa5c954a><div class="content" data-v-aa5c954a><div class="left" data-v-aa5c954a><a href="/" class="brand" data-v-aa5c954a><img src="data:image/png;base64,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" alt="logo" data-v-aa5c954a> <span data-v-aa5c954a>Chameleon</span></a> <div class="info" data-v-aa5c954a>Copyright © 2020 DiDi Chuxing Inc.</div></div> <div class="right" data-v-aa5c954a><div class="col" data-v-aa5c954a><h4 data-v-aa5c954a>资源</h4> <a href="/components/expand.html" data-v-aa5c954a>Chameleon UI</a><a href="https://github.com/beatles-chameleon/cml-demo" target="_blank" rel="noopener" data-v-aa5c954a>
              Chameleon Demo
            </a><a href="https://github.com/chameleon-team/awesome-cml" target="_blank" rel="noopener" data-v-aa5c954a>
              Awesome Chameleon
            </a><a href="https://github.com/didi/chameleon/releases" target="_blank" rel="noopener" data-v-aa5c954a>
              更新记录
            </a></div><div class="col" data-v-aa5c954a><h4 data-v-aa5c954a>社区</h4> <a href="https://github.com/didi/chameleon/issues" target="_blank" rel="noopener" data-v-aa5c954a>
              GitHub
            </a><a data-v-aa5c954a><span data-v-aa5c954a>微信交流群</span> <img src="/assets/img/qr_weixin.59cd000a.png" alt="image" data-v-aa5c954a></a><a data-v-aa5c954a><span data-v-aa5c954a>QQ 交流群</span> <img src="/assets/img/qr_qq.115678d7.jpg" alt="image" data-v-aa5c954a></a><a data-v-aa5c954a><span data-v-aa5c954a>顺风公鹿</span> <img src="/assets/img/qr_deer.e2ddb653.png" alt="image" data-v-aa5c954a></a></div><div class="col" data-v-aa5c954a><h4 data-v-aa5c954a>关于</h4> <a href="https://github.com/didi/chameleon/wiki/Chameleon%E5%9B%A2%E9%98%9F" target="_blank" rel="noopener" data-v-aa5c954a>
              Chameleon 团队
            </a><a href="https://github.com/didi/chameleon/wiki/%E5%8A%A0%E5%85%A5%E6%88%91%E4%BB%AC" target="_blank" rel="noopener" data-v-aa5c954a>
              加入我们
            </a><a href="mailto:CML@didichuxing.com" target="_blank" rel="noopener" data-v-aa5c954a>
              联系我们
            </a><a href="https://github.com/didi/chameleon/wiki/Contributors" target="_blank" rel="noopener" data-v-aa5c954a>
              贡献者
            </a></div></div></div></footer></main></div><div class="global-ui"><!----></div></div>
J
feat: 中文搜索改用chameleon 的id  
JiM-W 已提交
348 
    <script src="/assets/js/app.bcfec7ef.js" defer></script><script src="/assets/js/60.7feedc98.js" defer></script><script src="/assets/js/1.b97c77c7.js" defer></script><script src="/assets/js/44.a26444fd.js" defer></script><script src="/assets/js/2.d28a060e.js" defer></script>
J
doc: update  
JiM-W 已提交
349 350 
  </body>
</html>