3 工程层面的迁移

3.1 迁移 —— webpack配置

chameleon的工程配置具体参考

chameleon脚手架工具,提供了 dev build两种构建模式,可以对应到 weex 项目中的dev build
weex项目cml项目
npm run devcml dev
npm run buildcml build
chameleon内置了对于webpack和项目的构建,参考这里修改chameleon内置webpack构建

3.2 迁移 —— store

weex使用vuex参考weex官网

chameleon中的store使用参考

cml项目中的store和 weex 项目中的store文件下是对应的;

假设vue项目中某个组件

  1. import {mapState} from 'vuex';
  2. export default {
  3. computed: mapState(['count'])
  4. }

那么在cml项目中

  1. import store from '../path/to/store';
  2. class Index {
  3. computed = store.mapState(['count'])
  4. }
  5. export default new Index();

3.3 迁移 —— router

1 router-view出口的对应关系

假如weex项目中入口文件 src/index.vue

  1. <template>
  2. <div id="app">
  3. <router-view/>
  4. </div>
  5. </template>

那么对应着cml项目中的src/app/app.cml,这里的<app>会渲染成<router-view>对应的某个路由;

  1. <template >
  2. <app store="{{store}}" router-config="{{routerConfig}}"></app>
  3. </template>
2 路由配置的对应关系

weex项目中的路由 src/router.js

  1. import Vue from 'vue'
  2. import Router from 'vue-router'
  3. import HelloWorld from '@/components/HelloWorld'
  4. Vue.use(Router)
  5. export default new Router({
  6. routes: [
  7. {
  8. path: '/helloworld',
  9. name: 'HelloWorld',
  10. component: HelloWorld
  11. }
  12. ]
  13. })

cml项目src/router.config.json

  1. {
  2. "mode": "history",
  3. "domain": "https://www.chameleon.com",
  4. "routes":[
  5. {
  6. "url": "/helloworld",
  7. "path": "/pages/HelloWorld/HelloWorld",
  8. "name": "helloworld",
  9. "mock": "index.php"
  10. }
  11. ]
  12. }

其中:

url字段 对应vue中的path字段;

path字段对应vue中 import Comp from '/path/to/Comp'中的组件路径

chameleon会自动引入component字段配置的组件,不需要再配置component字段;

总结

1 注意cml项目中不支持路由嵌套,如果有路由嵌套的情况需要考虑转化成组件去实现

2 在迁移路由的时候,要一个一个路由对应着去迁移

3 vue项目中的一级路由的组件都通过 cml init page去初始化这个组件