3 工程层面的迁移

3.1 迁移 —— webpack配置

chameleon的工程配置具体参考

chameleon脚手架工具，提供了 dev build两种构建模式，可以对应到 vue 项目中的dev build

chameleon内置了对于webpack和项目的构建，参考这里修改chameleon内置webpack构建

3.2 迁移 —— store

chameleon中的store使用参考

cml项目中的store和 vue 项目中的store文件下是对应的；

假设vue项目中某个组件

import {mapState} from 'vuex';
export default {
    computed: mapState(['count'])
}

那么在cml项目中

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

3.3 迁移 —— router

1 router-view出口的的对应关系

假设vue项目中入口文件 src/App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

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

<template >
  <app store="{{store}}" router-config="{{routerConfig}}"></app>
</template>

2 路由配置对应关系

vue项目中的路由 src/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/helloworld',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

对于router.js中配置的一级路由，需要通过 cml init page 去生成对应的组件

cml项目中 src/router.config.json

{
  "mode": "history",
  "domain": "https://www.chameleon.com",
  "routes":[
    {
      "url": "/helloworld",
      "path": "/pages/HelloWorld/HelloWorld",
      "name": "helloworld",
      "mock": "index.php"
    }
  ]
}

其中：

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

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

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

总结

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

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

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