diff --git a/.gitignore b/.gitignore
index d5e6f0a..4fd0d7b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,6 @@
 node_modules
 .DS_Store
+.vscode
 design
 *.log
 packages/test
diff --git a/packages/@megalo/cli-service/generator/index.js b/packages/@megalo/cli-service/generator/index.js
new file mode 100644
index 0000000..a3396f5
--- /dev/null
+++ b/packages/@megalo/cli-service/generator/index.js
@@ -0,0 +1,153 @@
+module.exports = (api, options) => {
+  const tplDir = api.hasPlugin('typescript') ? './template/typescript' : './template/main'
+  api.render(tplDir, {
+    doesCompile: api.hasPlugin('babel') || api.hasPlugin('typescript')
+  })
+
+  const scopedPkgVersions = api.generator.scopedPkgVersions
+  let pkgList
+  
+  const scripts = {
+    'build:wechat': 'megalo-cli-service build',
+    'build:alipay': 'megalo-cli-service build --platform alipay',
+    'build:swan': 'megalo-cli-service build --platform swan',
+    'build:toutiao': 'megalo-cli-service build --platform toutiao',
+    'dev:alipay': 'megalo-cli-service serve --platform alipay',
+    'dev:swan': 'megalo-cli-service serve --platform swan',
+    'dev:wechat': 'megalo-cli-service serve',
+    'dev:toutiao': 'megalo-cli-service serve --platform toutiao',
+  }
+
+  const dependencies = {
+    'octoparse': '^0.4.2',
+    '@megalo/vhtml-plugin': '^0.1.2',
+    'megalo': '0.10.1'
+  }
+
+  const devDependencies = {
+    '@megalo/target': '^0.7.4-0',
+  }
+
+  pkgList = [
+    '@megalo/babel-preset-app',
+    '@megalo/cli-service',
+    '@megalo/template-compiler'
+  ]
+  pkgList.forEach(p => devDependencies[p] = scopedPkgVersions[p])
+
+  if (api.hasPlugin('eslint')) {
+    scripts['lint'] = 'megalo-cli-service lint'
+
+    pkgList = [
+      '@megalo/cli-plugin-eslint',
+      '@megalo/eslint-config-standard'
+    ]
+    pkgList.forEach(p => devDependencies[p] = scopedPkgVersions[p])
+
+    devDependencies['eslint'] = '^5.15.3'
+  }
+
+  if (options.vuex) {
+    dependencies['vuex'] = '^3.1.0'
+
+    if (api.hasPlugin('typescript')) {
+      dependencies['vuex-class'] = '^0.3.2'
+    }
+  }
+
+  if (options.needMegaloAPI === 'Yes') {
+    pkgList = [
+      '@megalo/api'
+    ]
+    pkgList.forEach(p => dependencies[p] = scopedPkgVersions[p])
+  }
+
+  if (api.hasPlugin('typescript')) {
+    dependencies['vue-property-decorator'] = '8.1.1'
+    dependencies['vue-class-component'] = '^7.0.2'
+
+    pkgList = [
+      '@megalo/cli-plugin-typescript'
+    ]
+    pkgList.forEach(p => devDependencies[p] = scopedPkgVersions[p])
+    devDependencies['@types/node'] = '^11.11.4'
+    devDependencies['miniprogram-api-typings'] = '^2.8.2'
+    devDependencies['typescript'] = '^3.4.4'
+
+    if (api.hasPlugin('eslint')) {
+      pkgList = [
+        '@megalo/eslint-config-typescript'
+      ]
+      pkgList.forEach(p => devDependencies[p] = scopedPkgVersions[p])
+    }
+  }
+
+  if (options.cssPreset === 'less') {
+    devDependencies['less'] = '^3.8.1'
+    devDependencies['less-loader'] = '^4.1.0'
+  } else if (options.cssPreset === 'stylus') {
+    devDependencies['stylus'] = '^0.54.5'
+    devDependencies['stylus-loader'] = '^3.0.2'
+  } else if (options.cssPreset === 'scss') {
+    devDependencies['node-sass'] = '^4.10.0'
+    devDependencies['sass-loader'] = '^7.1.0'
+  }
+
+  api.extendPackage({
+    scripts,
+    dependencies,
+    devDependencies,
+    'postcss': {
+      'plugins': {
+        'autoprefixer': {}
+      }
+    },
+    browserslist: [
+      '> 1%',
+      'last 2 versions'
+    ]
+  })
+
+  if (options.router) {
+    require('./router')(api, options)
+  }
+
+  if (options.vuex) {
+    require('./vuex')(api, options)
+  }
+
+  if (options.cssPreprocessor) {
+    const deps = {
+      // TODO: remove 'sass' option in v4 or rename 'dart-sass' to 'sass'
+      sass: {
+        'node-sass': '^4.9.0',
+        'sass-loader': '^7.1.0'
+      },
+      'node-sass': {
+        'node-sass': '^4.9.0',
+        'sass-loader': '^7.1.0'
+      },
+      'dart-sass': {
+        sass: '^1.18.0',
+        'sass-loader': '^7.1.0'
+      },
+      less: {
+        'less': '^3.0.4',
+        'less-loader': '^5.0.0'
+      },
+      stylus: {
+        'stylus': '^0.54.5',
+        'stylus-loader': '^3.0.2'
+      }
+    }
+
+    api.extendPackage({
+      devDependencies: deps[options.cssPreprocessor]
+    })
+  }
+
+  // additional tooling configurations
+  if (options.configs) {
+    api.extendPackage(options.configs)
+  }
+}
diff --git a/packages/@megalo/cli-service/generator/router/index.js b/packages/@megalo/cli-service/generator/router/index.js
new file mode 100644
index 0000000..12f257a
--- /dev/null
+++ b/packages/@megalo/cli-service/generator/router/index.js
@@ -0,0 +1,38 @@
+module.exports = (api, options = {}) => {
+  api.injectImports(api.entryFile, `import router from './router'`)
+  api.injectRootOptions(api.entryFile, `router`)
+  api.extendPackage({
+    dependencies: {
+      'vue-router': '^3.0.3'
+    }
+  })
+  api.render('./template', {
+    historyMode: options.routerHistoryMode,
+    doesCompile: api.hasPlugin('babel') || api.hasPlugin('typescript')
+  })
+
+  if (api.invoking) {
+    api.postProcessFiles(files => {
+      const appFile = files[`src/App.vue`]
+      if (appFile) {
+        files[`src/App.vue`] = appFile.replace(/^<template>[^]+<\/script>/, `
+<template>
+  <div id="app">
+    <div id="nav">
+      <router-link to="/">Home</router-link> |
+      <router-link to="/about">About</router-link>
+    </div>
+    <router-view/>
+  </div>
+</template>
+        `.trim())
+      }
+    })
+
+    if (api.hasPlugin('typescript')) {
+      /* eslint-disable-next-line node/no-extraneous-require */
+      const convertFiles = require('@vue/cli-plugin-typescript/generator/convert')
+      convertFiles(api)
+    }
+  }
+}
diff --git a/packages/@megalo/cli-service/generator/router/template/src/router.js b/packages/@megalo/cli-service/generator/router/template/src/router.js
new file mode 100644
index 0000000..967e7b6
--- /dev/null
+++ b/packages/@megalo/cli-service/generator/router/template/src/router.js
@@ -0,0 +1,33 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import Home from './views/Home.vue'
+
+Vue.use(Router)
+
+export default new Router({
+  <%_ if (historyMode) { _%>
+  mode: 'history',
+  base: process.env.BASE_URL,
+  <%_ } _%>
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: Home
+    },
+    {
+      path: '/about',
+      name: 'about',
+      // route level code-splitting
+      // this generates a separate chunk (about.[hash].js) for this route
+      // which is lazy-loaded when the route is visited.
+      <%_ if (doesCompile) { _%>
+      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
+      <%_ } else { _%>
+      component: function () { 
+        return import(/* webpackChunkName: "about" */ './views/About.vue')
+      }
+      <%_ } _%>
+    }
+  ]
+})
diff --git a/packages/@megalo/cli-service/generator/router/template/src/views/About.vue b/packages/@megalo/cli-service/generator/router/template/src/views/About.vue
new file mode 100644
index 0000000..3fa2807
--- /dev/null
+++ b/packages/@megalo/cli-service/generator/router/template/src/views/About.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
diff --git a/packages/@megalo/cli-service/generator/router/template/src/views/Home.vue b/packages/@megalo/cli-service/generator/router/template/src/views/Home.vue
new file mode 100644
index 0000000..fda1f4f
--- /dev/null
+++ b/packages/@megalo/cli-service/generator/router/template/src/views/Home.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="home">
+    <img alt="Vue logo" src="../assets/logo.png">
+    <%_ if (!rootOptions.bare) { _%>
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <%_ } else { _%>
+    <h1>Welcome to Your Vue.js App</h1>
+    <%_ } _%>
+  </div>
+</template>
+<%_ if (!rootOptions.bare) { _%>
+
+<script>
+// @ is an alias to /src
+import HelloWorld from '@/components/HelloWorld.vue'
+
+export default {
+  name: 'home',
+  components: {
+    HelloWorld
+  }
+}
+</script>
+<%_ } _%>
diff --git a/packages/@megalo/cli/templates/typescript/README b/packages/@megalo/cli-service/generator/template/main/README.md
old mode 100644
new mode 100755
similarity index 84%
rename from packages/@megalo/cli/templates/typescript/README
rename to packages/@megalo/cli-service/generator/template/main/README.md
index 275b7a9..2392a13
--- a/packages/@megalo/cli/templates/typescript/README
+++ b/packages/@megalo/cli-service/generator/template/main/README.md
@@ -1,4 +1,4 @@
-# <%- projectName %>
+# <%- rootOptions.projectName %>
 
 ## 运行
 
diff --git a/packages/@megalo/cli/templates/main/.env.development b/packages/@megalo/cli-service/generator/template/main/_env.development
similarity index 100%
rename from packages/@megalo/cli/templates/main/.env.development
rename to packages/@megalo/cli-service/generator/template/main/_env.development
diff --git a/packages/@megalo/cli/templates/main/.env.production b/packages/@megalo/cli-service/generator/template/main/_env.production
similarity index 100%
rename from packages/@megalo/cli/templates/main/.env.production
rename to packages/@megalo/cli-service/generator/template/main/_env.production
diff --git a/packages/@megalo/cli/templates/main/eslintignore b/packages/@megalo/cli-service/generator/template/main/_eslintignore
old mode 100644
new mode 100755
similarity index 100%
rename from packages/@megalo/cli/templates/main/eslintignore
rename to packages/@megalo/cli-service/generator/template/main/_eslintignore
diff --git a/packages/@megalo/cli/templates/main/eslintrc b/packages/@megalo/cli-service/generator/template/main/_eslintrc.js
similarity index 100%
rename from packages/@megalo/cli/templates/main/eslintrc
rename to packages/@megalo/cli-service/generator/template/main/_eslintrc.js
diff --git a/packages/@megalo/cli/templates/main/gitignore b/packages/@megalo/cli-service/generator/template/main/_gitignore
old mode 100644
new mode 100755
similarity index 100%
rename from packages/@megalo/cli/templates/main/gitignore
rename to packages/@megalo/cli-service/generator/template/main/_gitignore
diff --git a/packages/@megalo/cli/templates/typescript/megalo.config.js b/packages/@megalo/cli-service/generator/template/main/megalo.config.js
old mode 100644
new mode 100755
similarity index 91%
rename from packages/@megalo/cli/templates/typescript/megalo.config.js
rename to packages/@megalo/cli-service/generator/template/main/megalo.config.js
index f57876d..cb8cede
--- a/packages/@megalo/cli/templates/typescript/megalo.config.js
+++ b/packages/@megalo/cli-service/generator/template/main/megalo.config.js
@@ -3,7 +3,7 @@ module.exports = {
   productionSourceMap: false,
 
   // 开启eslint格式化代码
-  lintOnSave: <%= features.includes('eslint') %>,
+  lintOnSave: <%= rootOptions.plugins['@megalo/cli-plugin-eslint'].lintOn[0] === 'Save' %>,
 
   configureWebpack: config => {
     // 你可以在这里粗放的修改webpack的配置并返回
@@ -35,7 +35,7 @@ module.exports = {
         // https://github.com/shama/stylus-loader
       },
         // https://github.com/megalojs/megalo-px2rpx-loader
-      px2rpx: <% if (needPx2Rpx === 'Yes') { %>{
+      px2rpx: <% if (rootOptions.px2rpx) { %>{
         rpxUnit: 0.5
       }<% } else {%>false<% } %>
     }
diff --git a/packages/@megalo/cli/templates/main/package b/packages/@megalo/cli-service/generator/template/main/package.json
old mode 100644
new mode 100755
similarity index 100%
rename from packages/@megalo/cli/templates/main/package
rename to packages/@megalo/cli-service/generator/template/main/package.json
diff --git a/packages/@megalo/cli/templates/main/src/App.vue b/packages/@megalo/cli-service/generator/template/main/src/App.vue
old mode 100644
new mode 100755
similarity index 100%
rename from packages/@megalo/cli/templates/main/src/App.vue
rename to packages/@megalo/cli-service/generator/template/main/src/App.vue
diff --git a/packages/@megalo/cli/templates/main/src/components/HelloWorld.vue b/packages/@megalo/cli-service/generator/template/main/src/components/HelloWorld.vue
old mode 100644
new mode 100755
similarity index 100%
rename from packages/@megalo/cli/templates/main/src/components/HelloWorld.vue
rename to packages/@megalo/cli-service/generator/template/main/src/components/HelloWorld.vue
diff --git a/packages/@megalo/cli/templates/main/src/main.js b/packages/@megalo/cli-service/generator/template/main/src/main.js
old mode 100644
new mode 100755
similarity index 76%
rename from packages/@megalo/cli/templates/main/src/main.js
rename to packages/@megalo/cli-service/generator/template/main/src/main.js
index 4a4f8e3..5bc1c0b
--- a/packages/@megalo/cli/templates/main/src/main.js
+++ b/packages/@megalo/cli-service/generator/template/main/src/main.js
@@ -1,14 +1,12 @@
 import App from './App'
 import Vue from 'vue'
-import VHtmlPlugin from '@megalo/vhtml-plugin'<% if (features.includes('vuex')) { %>
-import Vuex from 'vuex'<% } %>
+import VHtmlPlugin from '@megalo/vhtml-plugin'
 
-Vue.use(VHtmlPlugin)<% if (features.includes('vuex')) { %>
-Vue.use(Vuex)
-
-const store = require('./store').default
+Vue.use(VHtmlPlugin)
+<%_ if (rootOptions.vuex) { _%>
 Vue.prototype.$store = store
-<% } %>
+<%_ } _%>
+
 const app = new Vue(App)
 
 app.$mount()
@@ -18,7 +16,7 @@ export default {
     // pages 的首个页面会被编译成首页
     pages: [
       'pages/hello',
-      'pages/my/my'<% if (features.includes('vuex')) { %>,
+      'pages/my/my'<% if (rootOptions['vuex']) { %>,
       'pages/vuex/vuex'<% } %>
     ],
     tabBar: {
@@ -36,7 +34,7 @@ export default {
           text: 'my',
           iconPath: 'native/tabbar/mine.png',
           selectedIconPath: 'native/tabbar/mine_on.png'
-        }<% if (features.includes('vuex')) { %>,
+        }<% if (rootOptions['vuex']) { %>,
         {
           pagePath: 'pages/vuex/vuex',
           text: 'vuex',
diff --git a/packages/@megalo/cli/templates/main/src/native/tabbar/home.png b/packages/@megalo/cli-service/generator/template/main/src/native/tabbar/home.png
old mode 100644
new mode 100755
similarity index 100%
rename from packages/@megalo/cli/templates/main/src/native/tabbar/home.png
rename to packages/@megalo/cli-service/generator/template/main/src/native/tabbar/home.png
diff --git a/packages/@megalo/cli/templates/main/src/native/tabbar/home_on.png b/packages/@megalo/cli-service/generator/template/main/src/native/tabbar/home_on.png
old mode 100644
new mode 100755
similarity index 100%
rename from packages/@megalo/cli/templates/main/src/native/tabbar/home_on.png
rename to packages/@megalo/cli-service/generator/template/main/src/native/tabbar/home_on.png
diff --git a/packages/@megalo/cli/templates/main/src/native/tabbar/mine.png b/packages/@megalo/cli-service/generator/template/main/src/native/tabbar/mine.png
old mode 100644
new mode 100755
similarity index 100%
rename from packages/@megalo/cli/templates/main/src/native/tabbar/mine.png
rename to packages/@megalo/cli-service/generator/template/main/src/native/tabbar/mine.png
diff --git a/packages/@megalo/cli/templates/main/src/native/tabbar/mine_on.png b/packages/@megalo/cli-service/generator/template/main/src/native/tabbar/mine_on.png
old mode 100644
new mode 100755
similarity index 100%
rename from packages/@megalo/cli/templates/main/src/native/tabbar/mine_on.png
rename to packages/@megalo/cli-service/generator/template/main/src/native/tabbar/mine_on.png
diff --git a/packages/@megalo/cli/templates/main/src/native/tabbar/vue.png b/packages/@megalo/cli-service/generator/template/main/src/native/tabbar/vue.png
old mode 100644
new mode 100755
similarity index 100%
rename from packages/@megalo/cli/templates/main/src/native/tabbar/vue.png
rename to packages/@megalo/cli-service/generator/template/main/src/native/tabbar/vue.png
diff --git a/packages/@megalo/cli/templates/main/src/native/tabbar/vue_on.png b/packages/@megalo/cli-service/generator/template/main/src/native/tabbar/vue_on.png
old mode 100644
new mode 100755
similarity index 100%
rename from packages/@megalo/cli/templates/main/src/native/tabbar/vue_on.png
rename to packages/@megalo/cli-service/generator/template/main/src/native/tabbar/vue_on.png
diff --git a/packages/@megalo/cli/templates/main/src/pages/hello.vue b/packages/@megalo/cli-service/generator/template/main/src/pages/hello.vue
old mode 100644
new mode 100755
similarity index 97%
rename from packages/@megalo/cli/templates/main/src/pages/hello.vue
rename to packages/@megalo/cli-service/generator/template/main/src/pages/hello.vue
index 2e479fd..7c321a3
--- a/packages/@megalo/cli/templates/main/src/pages/hello.vue
+++ b/packages/@megalo/cli-service/generator/template/main/src/pages/hello.vue
@@ -63,7 +63,7 @@ export default {
   }
 }
 </script>
-<% if (features.includes('css-pre-processors')) { %>
+<% if (rootOptions['cssPreProcessors']) { %>
 <style lang="<%= cssPreset %>" scoped>
 .app{
   padding-top: 100px;
diff --git a/packages/@megalo/cli/templates/main/src/pages/my/my.vue b/packages/@megalo/cli-service/generator/template/main/src/pages/my/my.vue
old mode 100644
new mode 100755
similarity index 97%
rename from packages/@megalo/cli/templates/main/src/pages/my/my.vue
rename to packages/@megalo/cli-service/generator/template/main/src/pages/my/my.vue
index 1f9574e..3b337cc
--- a/packages/@megalo/cli/templates/main/src/pages/my/my.vue
+++ b/packages/@megalo/cli-service/generator/template/main/src/pages/my/my.vue
@@ -63,7 +63,7 @@ export default {
   }
 }
 </script>
-<% if (features.includes('css-pre-processors')) { %>
+<% if (rootOptions['cssPreProcessors']) { %>
 <style lang="<%= cssPreset %>">
 .app{
   padding-top: 100px;
diff --git a/packages/@megalo/cli/templates/main/src/pages/vuex/vuex.vue b/packages/@megalo/cli-service/generator/template/main/src/pages/vuex/vuex.vue
old mode 100644
new mode 100755
similarity index 100%
rename from packages/@megalo/cli/templates/main/src/pages/vuex/vuex.vue
rename to packages/@megalo/cli-service/generator/template/main/src/pages/vuex/vuex.vue
diff --git a/packages/@megalo/cli/templates/main/src/static/imgs/megalo_logo.png b/packages/@megalo/cli-service/generator/template/main/src/static/imgs/megalo_logo.png
old mode 100644
new mode 100755
similarity index 100%
rename from packages/@megalo/cli/templates/main/src/static/imgs/megalo_logo.png
rename to packages/@megalo/cli-service/generator/template/main/src/static/imgs/megalo_logo.png
diff --git a/packages/@megalo/cli/templates/main/README b/packages/@megalo/cli-service/generator/template/typescript/README.md
old mode 100644
new mode 100755
similarity index 84%
rename from packages/@megalo/cli/templates/main/README
rename to packages/@megalo/cli-service/generator/template/typescript/README.md
index 275b7a9..2392a13
--- a/packages/@megalo/cli/templates/main/README
+++ b/packages/@megalo/cli-service/generator/template/typescript/README.md
@@ -1,4 +1,4 @@
-# <%- projectName %>
+# <%- rootOptions.projectName %>
 
 ## 运行
 
diff --git a/packages/@megalo/cli/templates/typescript/.env.development b/packages/@megalo/cli-service/generator/template/typescript/_env.development
similarity index 100%
rename from packages/@megalo/cli/templates/typescript/.env.development
rename to packages/@megalo/cli-service/generator/template/typescript/_env.development
diff --git a/packages/@megalo/cli/templates/typescript/.env.production b/packages/@megalo/cli-service/generator/template/typescript/_env.production
similarity index 100%
rename from packages/@megalo/cli/templates/typescript/.env.production
rename to packages/@megalo/cli-service/generator/template/typescript/_env.production
diff --git a/packages/@megalo/cli/templates/typescript/eslintignore b/packages/@megalo/cli-service/generator/template/typescript/_eslintignore
old mode 100644
new mode 100755
similarity index 100%
rename from packages/@megalo/cli/templates/typescript/eslintignore
rename to packages/@megalo/cli-service/generator/template/typescript/_eslintignore
diff --git a/packages/@megalo/cli/templates/typescript/eslintrc b/packages/@megalo/cli-service/generator/template/typescript/_eslintrc.js
similarity index 100%
rename from packages/@megalo/cli/templates/typescript/eslintrc
rename to packages/@megalo/cli-service/generator/template/typescript/_eslintrc.js
diff --git a/packages/@megalo/cli/templates/typescript/gitignore b/packages/@megalo/cli-service/generator/template/typescript/_gitignore
old mode 100644
new mode 100755
similarity index 100%
rename from packages/@megalo/cli/templates/typescript/gitignore
rename to packages/@megalo/cli-service/generator/template/typescript/_gitignore
diff --git a/packages/@megalo/cli/templates/main/megalo.config.js b/packages/@megalo/cli-service/generator/template/typescript/megalo.config.js
similarity index 91%
rename from packages/@megalo/cli/templates/main/megalo.config.js
rename to packages/@megalo/cli-service/generator/template/typescript/megalo.config.js
index f57876d..cb8cede 100755
--- a/packages/@megalo/cli/templates/main/megalo.config.js
+++ b/packages/@megalo/cli-service/generator/template/typescript/megalo.config.js
@@ -3,7 +3,7 @@ module.exports = {
   productionSourceMap: false,
 
   // 开启eslint格式化代码
-  lintOnSave: <%= features.includes('eslint') %>,
+  lintOnSave: <%= rootOptions.plugins['@megalo/cli-plugin-eslint'].lintOn[0] === 'Save' %>,
 
   configureWebpack: config => {
     // 你可以在这里粗放的修改webpack的配置并返回
@@ -35,7 +35,7 @@ module.exports = {
         // https://github.com/shama/stylus-loader
       },
         // https://github.com/megalojs/megalo-px2rpx-loader
-      px2rpx: <% if (needPx2Rpx === 'Yes') { %>{
+      px2rpx: <% if (rootOptions.px2rpx) { %>{
         rpxUnit: 0.5
       }<% } else {%>false<% } %>
     }
diff --git a/packages/@megalo/cli/templates/typescript/package b/packages/@megalo/cli-service/generator/template/typescript/package.json
old mode 100644
new mode 100755
similarity index 100%
rename from packages/@megalo/cli/templates/typescript/package
rename to packages/@megalo/cli-service/generator/template/typescript/package.json
diff --git a/packages/@megalo/cli/templates/typescript/src/App.vue b/packages/@megalo/cli-service/generator/template/typescript/src/App.vue
old mode 100644
new mode 100755
similarity index 100%
rename from packages/@megalo/cli/templates/typescript/src/App.vue
rename to packages/@megalo/cli-service/generator/template/typescript/src/App.vue
diff --git a/packages/@megalo/cli/templates/typescript/src/components/HelloWorld.vue b/packages/@megalo/cli-service/generator/template/typescript/src/components/HelloWorld.vue
old mode 100644
new mode 100755
similarity index 100%
rename from packages/@megalo/cli/templates/typescript/src/components/HelloWorld.vue
rename to packages/@megalo/cli-service/generator/template/typescript/src/components/HelloWorld.vue
diff --git a/packages/@megalo/cli/templates/typescript/src/main.ts b/packages/@megalo/cli-service/generator/template/typescript/src/main.ts
old mode 100644
new mode 100755
similarity index 83%
rename from packages/@megalo/cli/templates/typescript/src/main.ts
rename to packages/@megalo/cli-service/generator/template/typescript/src/main.ts
index 3dee220..c6eec8a
--- a/packages/@megalo/cli/templates/typescript/src/main.ts
+++ b/packages/@megalo/cli-service/generator/template/typescript/src/main.ts
@@ -1,15 +1,13 @@
 import App from './App.vue'
 import Vue from 'vue'
 import { Component } from 'vue-property-decorator'
-import VHtmlPlugin from '@megalo/vhtml-plugin'<% if (features.includes('vuex')) { %>
-import Vuex from 'vuex'<% } %>
+import VHtmlPlugin from '@megalo/vhtml-plugin'
 
-Vue.use(VHtmlPlugin)<% if (features.includes('vuex')) { %>
-Vue.use(Vuex)
-
-const store = require('./store').default
+Vue.use(VHtmlPlugin)
+<%_ if (rootOptions.vuex) { _%>
 Vue.prototype.$store = store
-<% } %>
+<%_ } _%>
+
 // https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html
 Component.registerHooks([
   'onLoad', // 监听页面加载
@@ -33,7 +31,7 @@ export default {
     // pages 的首个页面会被编译成首页
     pages: [
       'pages/hello',
-      'pages/my/my'<% if (features.includes('vuex')) { %>,
+      'pages/my/my'<% if (rootOptions['vuex']) { %>,
       'pages/vuex/vuex'<% } %>
     ],
     tabBar: {
@@ -51,7 +49,7 @@ export default {
           text: 'my',
           iconPath: 'native/tabbar/mine.png',
           selectedIconPath: 'native/tabbar/mine_on.png'
-        }<% if (features.includes('vuex')) { %>,
+        }<% if (rootOptions['vuex']) { %>,
         {
           pagePath: 'pages/vuex/vuex',
           text: 'vuex',
diff --git a/packages/@megalo/cli/templates/typescript/src/native/tabbar/home.png b/packages/@megalo/cli-service/generator/template/typescript/src/native/tabbar/home.png
old mode 100644
new mode 100755
similarity index 100%
rename from packages/@megalo/cli/templates/typescript/src/native/tabbar/home.png
rename to packages/@megalo/cli-service/generator/template/typescript/src/native/tabbar/home.png
diff --git a/packages/@megalo/cli/templates/typescript/src/native/tabbar/home_on.png b/packages/@megalo/cli-service/generator/template/typescript/src/native/tabbar/home_on.png
old mode 100644
new mode 100755
similarity index 100%
rename from packages/@megalo/cli/templates/typescript/src/native/tabbar/home_on.png
rename to packages/@megalo/cli-service/generator/template/typescript/src/native/tabbar/home_on.png
diff --git a/packages/@megalo/cli/templates/typescript/src/native/tabbar/mine.png b/packages/@megalo/cli-service/generator/template/typescript/src/native/tabbar/mine.png
old mode 100644
new mode 100755
similarity index 100%
rename from packages/@megalo/cli/templates/typescript/src/native/tabbar/mine.png
rename to packages/@megalo/cli-service/generator/template/typescript/src/native/tabbar/mine.png
diff --git a/packages/@megalo/cli/templates/typescript/src/native/tabbar/mine_on.png b/packages/@megalo/cli-service/generator/template/typescript/src/native/tabbar/mine_on.png
old mode 100644
new mode 100755
similarity index 100%
rename from packages/@megalo/cli/templates/typescript/src/native/tabbar/mine_on.png
rename to packages/@megalo/cli-service/generator/template/typescript/src/native/tabbar/mine_on.png
diff --git a/packages/@megalo/cli/templates/typescript/src/native/tabbar/vue.png b/packages/@megalo/cli-service/generator/template/typescript/src/native/tabbar/vue.png
old mode 100644
new mode 100755
similarity index 100%
rename from packages/@megalo/cli/templates/typescript/src/native/tabbar/vue.png
rename to packages/@megalo/cli-service/generator/template/typescript/src/native/tabbar/vue.png
diff --git a/packages/@megalo/cli/templates/typescript/src/native/tabbar/vue_on.png b/packages/@megalo/cli-service/generator/template/typescript/src/native/tabbar/vue_on.png
old mode 100644
new mode 100755
similarity index 100%
rename from packages/@megalo/cli/templates/typescript/src/native/tabbar/vue_on.png
rename to packages/@megalo/cli-service/generator/template/typescript/src/native/tabbar/vue_on.png
diff --git a/packages/@megalo/cli/templates/typescript/src/pages/hello.vue b/packages/@megalo/cli-service/generator/template/typescript/src/pages/hello.vue
old mode 100644
new mode 100755
similarity index 97%
rename from packages/@megalo/cli/templates/typescript/src/pages/hello.vue
rename to packages/@megalo/cli-service/generator/template/typescript/src/pages/hello.vue
index 1b5ea55..3876c30
--- a/packages/@megalo/cli/templates/typescript/src/pages/hello.vue
+++ b/packages/@megalo/cli-service/generator/template/typescript/src/pages/hello.vue
@@ -84,7 +84,7 @@ export default class Hello extends Vue {
   }
 }
 </script>
-<% if (features.includes('css-pre-processors')) { %>
+<% if (rootOptions['cssPreProcessors']) { %>
 <style lang="<%= cssPreset %>" scoped>
 .app{
   padding-top: 100px;
diff --git a/packages/@megalo/cli/templates/typescript/src/pages/my/my.vue b/packages/@megalo/cli-service/generator/template/typescript/src/pages/my/my.vue
old mode 100644
new mode 100755
similarity index 97%
rename from packages/@megalo/cli/templates/typescript/src/pages/my/my.vue
rename to packages/@megalo/cli-service/generator/template/typescript/src/pages/my/my.vue
index b5b5d04..27d6a04
--- a/packages/@megalo/cli/templates/typescript/src/pages/my/my.vue
+++ b/packages/@megalo/cli-service/generator/template/typescript/src/pages/my/my.vue
@@ -70,7 +70,7 @@ export default class My extends Vue {
   }
 }
 </script>
-<% if (features.includes('css-pre-processors')) { %>
+<% if (rootOptions['cssPreProcessors']) { %>
 <style lang="<%= cssPreset %>">
 .app{
   padding-top: 100px;
diff --git a/packages/@megalo/cli/templates/typescript/src/pages/vuex/vuex.vue b/packages/@megalo/cli-service/generator/template/typescript/src/pages/vuex/vuex.vue
old mode 100644
new mode 100755
similarity index 100%
rename from packages/@megalo/cli/templates/typescript/src/pages/vuex/vuex.vue
rename to packages/@megalo/cli-service/generator/template/typescript/src/pages/vuex/vuex.vue
diff --git a/packages/@megalo/cli/templates/typescript/src/shims-vue.d.ts b/packages/@megalo/cli-service/generator/template/typescript/src/shims-vue.d.ts
old mode 100644
new mode 100755
similarity index 100%
rename from packages/@megalo/cli/templates/typescript/src/shims-vue.d.ts
rename to packages/@megalo/cli-service/generator/template/typescript/src/shims-vue.d.ts
diff --git a/packages/@megalo/cli/templates/typescript/src/static/imgs/megalo_logo.png b/packages/@megalo/cli-service/generator/template/typescript/src/static/imgs/megalo_logo.png
old mode 100644
new mode 100755
similarity index 100%
rename from packages/@megalo/cli/templates/typescript/src/static/imgs/megalo_logo.png
rename to packages/@megalo/cli-service/generator/template/typescript/src/static/imgs/megalo_logo.png
diff --git a/packages/@megalo/cli/templates/typescript/tsconfig.json b/packages/@megalo/cli-service/generator/template/typescript/tsconfig.json
old mode 100644
new mode 100755
similarity index 100%
rename from packages/@megalo/cli/templates/typescript/tsconfig.json
rename to packages/@megalo/cli-service/generator/template/typescript/tsconfig.json
diff --git a/packages/@megalo/cli-service/generator/vuex/index.js b/packages/@megalo/cli-service/generator/vuex/index.js
new file mode 100644
index 0000000..9d65b1f
--- /dev/null
+++ b/packages/@megalo/cli-service/generator/vuex/index.js
@@ -0,0 +1,16 @@
+module.exports = (api, options) => {
+  api.injectImports(api.entryFile, `import store from './store'`)
+  // api.injectRootOptions(api.entryFile, `store`)
+  api.extendPackage({
+    dependencies: {
+      vuex: '^3.0.1'
+    }
+  })
+  api.render('./template')
+
+  if (api.invoking && api.hasPlugin('typescript')) {
+    /* eslint-disable-next-line node/no-extraneous-require */
+    const convertFiles = require('@vue/cli-plugin-typescript/generator/convert')
+    convertFiles(api)
+  }
+}
diff --git a/packages/@megalo/cli/templates/main/src/store/counter.js b/packages/@megalo/cli-service/generator/vuex/template/src/store/counter.js
similarity index 100%
rename from packages/@megalo/cli/templates/main/src/store/counter.js
rename to packages/@megalo/cli-service/generator/vuex/template/src/store/counter.js
diff --git a/packages/@megalo/cli/templates/main/src/store/index.js b/packages/@megalo/cli-service/generator/vuex/template/src/store/index.js
similarity index 56%
rename from packages/@megalo/cli/templates/main/src/store/index.js
rename to packages/@megalo/cli-service/generator/vuex/template/src/store/index.js
index 88ef01e..1c37873 100755
--- a/packages/@megalo/cli/templates/main/src/store/index.js
+++ b/packages/@megalo/cli-service/generator/vuex/template/src/store/index.js
@@ -1,8 +1,20 @@
+import Vue from 'vue'
 import Vuex from 'vuex'
 import counter from './counter'
 
+Vue.use(Vuex)
+
 export default new Vuex.Store({
   modules: {
     counter
+  },
+  state: {
+
+  },
+  mutations: {
+
+  },
+  actions: {
+
   }
 })
diff --git a/packages/@megalo/cli-share-utils/lib/env.js b/packages/@megalo/cli-share-utils/lib/env.js
index 569431c..4d9746b 100755
--- a/packages/@megalo/cli-share-utils/lib/env.js
+++ b/packages/@megalo/cli-share-utils/lib/env.js
@@ -2,6 +2,7 @@ const { execSync } = require('child_process')
 const fs = require('fs')
 const path = require('path')
 const LRU = require('lru-cache')
+const semver = require('semver')
 
 let _hasYarn
 const _yarnProjects = new LRU({
@@ -16,11 +17,14 @@ const _gitProjects = new LRU({
 
 // env detection
 exports.hasYarn = () => {
+  if (process.env.MEGALO_CLI_TEST) {
+    return true
+  }
   if (_hasYarn != null) {
     return _hasYarn
   }
   try {
-    execSync('yarnpkg --version', { stdio: 'ignore' })
+    execSync('yarn --version', { stdio: 'ignore' })
     return (_hasYarn = true)
   } catch (e) {
     return (_hasYarn = false)
@@ -44,6 +48,9 @@ function checkYarn (result) {
 }
 
 exports.hasGit = () => {
+  if (process.env.MEGALO_CLI_TEST) {
+    return true
+  }
   if (_hasGit != null) {
     return _hasGit
   }
@@ -71,6 +78,53 @@ exports.hasProjectGit = (cwd) => {
   return result
 }
 
+let _hasPnpm
+let _hasPnpm3orLater
+const _pnpmProjects = new LRU({
+  max: 10,
+  maxAge: 1000
+})
+
+exports.hasPnpm3OrLater = () => {
+  if (process.env.MEGALO_CLI_TEST) {
+    return true
+  }
+  if (_hasPnpm3orLater != null) {
+    return _hasPnpm3orLater
+  }
+  try {
+    const pnpmVersion = execSync('pnpm --version', {
+      stdio: ['pipe', 'pipe', 'ignore']
+    }).toString()
+    // there's a critical bug in pnpm 2
+    // https://github.com/pnpm/pnpm/issues/1678#issuecomment-469981972
+    // so we only support pnpm >= 3.0.0
+    _hasPnpm = true
+    _hasPnpm3orLater = semver.gte(pnpmVersion, '3.0.0')
+    return _hasPnpm3orLater
+  } catch (e) {
+    return (_hasPnpm3orLater = false)
+  }
+}
+
+exports.hasProjectPnpm = (cwd) => {
+  if (_pnpmProjects.has(cwd)) {
+    return checkPnpm(_pnpmProjects.get(cwd))
+  }
+
+  const lockFile = path.join(cwd, 'pnpm-lock.yaml')
+  const result = fs.existsSync(lockFile)
+  _pnpmProjects.set(cwd, result)
+  return checkPnpm(result)
+}
+
+function checkPnpm (result) {
+  if (result && !exports.hasPnpm3OrLater()) {
+    throw new Error(`The project seems to require pnpm${_hasPnpm ? ' >= 3' : ''} but it's not installed.`)
+  }
+  return result
+}
+
 // OS
 exports.isWindows = process.platform === 'win32'
 exports.isMacintosh = process.platform === 'darwin'
diff --git a/packages/@megalo/cli/README.md b/packages/@megalo/cli/README.md
index a8d893a..98d0881 100644
--- a/packages/@megalo/cli/README.md
+++ b/packages/@megalo/cli/README.md
@@ -7,13 +7,13 @@
 install
 
 ``` bash
-$ npm i -g sao
+$ npm i
 ```
 
 build and create project
 
 ``` bash
-$ sao npm:@megalo/cli@latest your-project-name --update
+$ megalo create your-project-name
 ```
 
 enter the project root directory
diff --git a/packages/@megalo/cli/bin/megalo.js b/packages/@megalo/cli/bin/megalo.js
new file mode 100755
index 0000000..2c04cbc
--- /dev/null
+++ b/packages/@megalo/cli/bin/megalo.js
@@ -0,0 +1,175 @@
+#!/usr/bin/env node
+
+// Check node version before requiring/doing anything else
+// The user may be on a very old node version
+
+const chalk = require('chalk')
+const semver = require('semver')
+const requiredVersion = require('../package.json').engines.node
+const didYouMean = require('didyoumean')
+
+// Setting edit distance to 60% of the input string's length
+didYouMean.threshold = 0.6
+
+function checkNodeVersion (wanted, id) {
+  if (!semver.satisfies(process.version, wanted)) {
+    console.log(chalk.red(
+      'You are using Node ' + process.version + ', but this version of ' + id +
+      ' requires Node ' + wanted + '.\nPlease upgrade your Node version.'
+    ))
+    process.exit(1)
+  }
+}
+
+checkNodeVersion(requiredVersion, 'megalo-cli')
+
+if (semver.satisfies(process.version, '9.x')) {
+  console.log(chalk.red(
+    `You are using Node ${process.version}.\n` +
+    `Node.js 9.x has already reached end-of-life and will not be supported in future major releases.\n` +
+    `It's strongly recommended to use an active LTS version instead.`
+  ))
+}
+
+const fs = require('fs')
+const path = require('path')
+const slash = require('slash')
+const minimist = require('minimist')
+
+// enter debug mode when creating test repo
+if (
+  slash(process.cwd()).indexOf('/packages/test') > 0 && (
+    fs.existsSync(path.resolve(process.cwd(), '../@megalo')) ||
+    fs.existsSync(path.resolve(process.cwd(), '../../@megalo'))
+  )
+) {
+  process.env.MEGALO_CLI_DEBUG = true
+}
+
+const program = require('commander')
+const loadCommand = require('../lib/utils/loadCommand')
+
+program
+  .version(require('../package').version)
+  .usage('<command> [options]')
+
+program
+  .command('create <app-name>')
+  .description('create a new project powered by megalo-cli-service')
+  .option('-p, --preset <presetName>', 'Skip prompts and use saved or remote preset')
+  .option('-d, --default', 'Skip prompts and use default preset')
+  .option('-i, --inlinePreset <json>', 'Skip prompts and use inline JSON string as preset')
+  .option('-m, --packageManager <command>', 'Use specified npm client when installing dependencies')
+  .option('-r, --registry <url>', 'Use specified npm registry when installing dependencies (only for npm)')
+  .option('-g, --git [message]', 'Force git initialization with initial commit message')
+  .option('-n, --no-git', 'Skip git initialization')
+  .option('-f, --force', 'Overwrite target directory if it exists')
+  .option('-c, --clone', 'Use git clone when fetching remote preset')
+  .option('-x, --proxy', 'Use specified proxy when creating project')
+  .option('-b, --bare', 'Scaffold project without beginner instructions')
+  .option('--skipGetStarted', 'Skip displaying "Get started" instructions')
+  .action((name, cmd) => {
+    const options = cleanArgs(cmd)
+
+    if (minimist(process.argv.slice(3))._.length > 1) {
+      console.log(chalk.yellow('\n Info: You provided more than one argument. The first one will be used as the app\'s name, the rest are ignored.'))
+    }
+    // --git makes commander to default git to true
+    if (process.argv.includes('-g') || process.argv.includes('--git')) {
+      options.forceGit = true
+    }
+    require('../lib/create')(name, options)
+  })
+
+program
+  .command('info')
+  .description('print debugging information about your environment')
+  .action((cmd) => {
+    console.log(chalk.bold('\nEnvironment Info:'))
+    require('envinfo').run(
+      {
+        System: ['OS', 'CPU'],
+        Binaries: ['Node', 'Yarn', 'npm'],
+        Browsers: ['Chrome', 'Edge', 'Firefox', 'Safari'],
+        npmPackages: '/**/{typescript,*vue*,@vue/*/}',
+        npmGlobalPackages: ['@vue/cli']
+      },
+      {
+        showNotFound: true,
+        duplicates: true,
+        fullTree: true
+      }
+    ).then(console.log)
+  })
+
+// output help information on unknown commands
+program
+  .arguments('<command>')
+  .action((cmd) => {
+    program.outputHelp()
+    console.log(`  ` + chalk.red(`Unknown command ${chalk.yellow(cmd)}.`))
+    console.log()
+    suggestCommands(cmd)
+  })
+
+// add some useful info on help
+program.on('--help', () => {
+  console.log()
+  console.log(`  Run ${chalk.cyan(`vue <command> --help`)} for detailed usage of given command.`)
+  console.log()
+})
+
+program.commands.forEach(c => c.on('--help', () => console.log()))
+
+// enhance common error messages
+const enhanceErrorMessages = require('../lib/utils/enhanceErrorMessages')
+
+enhanceErrorMessages('missingArgument', argName => {
+  return `Missing required argument ${chalk.yellow(`<${argName}>`)}.`
+})
+
+enhanceErrorMessages('unknownOption', optionName => {
+  return `Unknown option ${chalk.yellow(optionName)}.`
+})
+
+enhanceErrorMessages('optionMissingArgument', (option, flag) => {
+  return `Missing required argument for option ${chalk.yellow(option.flags)}` + (
+    flag ? `, got ${chalk.yellow(flag)}` : ``
+  )
+})
+
+program.parse(process.argv)
+
+if (!process.argv.slice(2).length) {
+  program.outputHelp()
+}
+
+function suggestCommands (cmd) {
+  const availableCommands = program.commands.map(cmd => {
+    return cmd._name
+  })
+
+  const suggestion = didYouMean(cmd, availableCommands)
+  if (suggestion) {
+    console.log(`  ` + chalk.red(`Did you mean ${chalk.yellow(suggestion)}?`))
+  }
+}
+
+function camelize (str) {
+  return str.replace(/-(\w)/g, (_, c) => c ? c.toUpperCase() : '')
+}
+
+// commander passes the Command object itself as options,
+// extract only actual options into a fresh object.
+function cleanArgs (cmd) {
+  const args = {}
+  cmd.options.forEach(o => {
+    const key = camelize(o.long.replace(/^--/, ''))
+    // if an option is not present and Command has a method with the same name
+    // it should not be copied
+    if (typeof cmd[key] !== 'function' && typeof cmd[key] !== 'undefined') {
+      args[key] = cmd[key]
+    }
+  })
+  return args
+}
diff --git a/packages/@megalo/cli/cli.js b/packages/@megalo/cli/cli.js
deleted file mode 100644
index a433416..0000000
--- a/packages/@megalo/cli/cli.js
+++ /dev/null
@@ -1,33 +0,0 @@
-#!/usr/bin/env node
-const sao = require('sao')
-const path = require('path')
-const minimist = require('minimist')
-const lv = require('latest-version')
-const { version: localVersion } = require('./package.json')
-const { version: consoleVersion, help: consoleHelp } = require('./util')
-
-const argv = minimist(process.argv.slice(2))
-const { h, help: _h, v, version: _v, f, force: _f } = argv
-// In a custom directory or current directory
-let latestVersion = 0
-
-let hasNewVersion = false
-
-;(async () => {
-  latestVersion = await lv('@megalo/cli')
-  hasNewVersion = consoleVersion(localVersion, latestVersion, v || _v)
-
-  if (h || _h) {
-    return consoleHelp()
-  } else if (v || _v || (hasNewVersion && !f && !_f)) {
-    return
-  }
-
-  sao({
-    // The path to your template
-    generator: path.join(__dirname, '.'),
-    outDir: path.resolve(argv._[0] || '.')
-  })
-  .run()
-  .catch(sao.handleError)
-})()
diff --git a/packages/@megalo/cli/lib/ConfigTransform.js b/packages/@megalo/cli/lib/ConfigTransform.js
new file mode 100644
index 0000000..41d27dc
--- /dev/null
+++ b/packages/@megalo/cli/lib/ConfigTransform.js
@@ -0,0 +1,65 @@
+const transforms = require('./utils/configTransforms')
+
+class ConfigTransform {
+  constructor (options) {
+    this.fileDescriptor = options.file
+  }
+
+  transform (value, checkExisting, files, context) {
+    let file
+    if (checkExisting) {
+      file = this.findFile(files)
+    }
+    if (!file) {
+      file = this.getDefaultFile()
+    }
+    const { type, filename } = file
+
+    const transform = transforms[type]
+
+    let source
+    let existing
+    if (checkExisting) {
+      source = files[filename]
+      if (source) {
+        existing = transform.read({
+          source,
+          filename,
+          context
+        })
+      }
+    }
+
+    const content = transform.write({
+      source,
+      filename,
+      context,
+      value,
+      existing
+    })
+
+    return {
+      filename,
+      content
+    }
+  }
+
+  findFile (files) {
+    for (const type of Object.keys(this.fileDescriptor)) {
+      const descriptors = this.fileDescriptor[type]
+      for (const filename of descriptors) {
+        if (files[filename]) {
+          return { type, filename }
+        }
+      }
+    }
+  }
+
+  getDefaultFile () {
+    const [type] = Object.keys(this.fileDescriptor)
+    const [filename] = this.fileDescriptor[type]
+    return { type, filename }
+  }
+}
+
+module.exports = ConfigTransform
diff --git a/packages/@megalo/cli/lib/Creator.js b/packages/@megalo/cli/lib/Creator.js
new file mode 100644
index 0000000..7e65f64
--- /dev/null
+++ b/packages/@megalo/cli/lib/Creator.js
@@ -0,0 +1,495 @@
+const path = require('path')
+const chalk = require('chalk')
+const debug = require('debug')
+const execa = require('execa')
+const inquirer = require('inquirer')
+const semver = require('semver')
+const EventEmitter = require('events')
+const Generator = require('./Generator')
+const cloneDeep = require('lodash.clonedeep')
+const sortObject = require('./utils/sortObject')
+const getVersions = require('./utils/getVersions')
+const { installDeps } = require('./utils/installDeps')
+const { clearConsole } = require('./utils/clearConsole')
+const writeFileTree = require('./utils/writeFileTree')
+const PromptModuleAPI = require('./PromptModuleAPI')
+const { formatFeatures } = require('./utils/features')
+const loadLocalPreset = require('./utils/loadLocalPreset')
+const loadRemotePreset = require('./utils/loadRemotePreset')
+const generateReadme = require('./utils/generateReadme')
+
+const {
+  defaults,
+  saveOptions,
+  loadOptions,
+  savePreset,
+  validatePreset
+} = require('./options')
+
+const {
+  log,
+  warn,
+  error,
+  hasGit,
+  hasProjectGit,
+  hasYarn,
+  hasPnpm3OrLater,
+  logWithSpinner,
+  stopSpinner,
+  exit,
+  loadModule
+} = require('@megalo/cli-share-utils')
+
+const isManualMode = answers => answers.preset === '__manual__'
+
+module.exports = class Creator extends EventEmitter {
+  constructor(name, context, promptModules) {
+    super()
+
+    this.name = name
+    this.context = process.env.MEGALO_CLI_CONTEXT = context
+    const { presetPrompt, featurePrompt } = this.resolveIntroPrompts()
+    this.presetPrompt = presetPrompt
+    this.featurePrompt = featurePrompt
+    this.outroPrompts = this.resolveOutroPrompts()
+    this.injectedPrompts = []
+    this.promptCompleteCbs = []
+    this.createCompleteCbs = []
+
+    this.run = this.run.bind(this)
+
+    const promptAPI = new PromptModuleAPI(this)
+    promptModules.forEach(m => m(promptAPI))
+  }
+
+  async create(cliOptions = {}, preset = null) {
+    const isTestOrDebug = process.env.MEGALO_CLI_TEST || process.env.MEGALO_CLI_DEBUG
+    const { run, name, context, createCompleteCbs } = this
+
+    if (!preset) {
+      if (cliOptions.preset) {
+        // megalo create foo --preset bar
+        preset = await this.resolvePreset(cliOptions.preset, cliOptions.clone)
+      } else if (cliOptions.default) {
+        // megalo create foo --default
+        preset = defaults.presets.Default
+      } else if (cliOptions.inlinePreset) {
+        // megalo create foo --inlinePreset {...}
+        try {
+          preset = JSON.parse(cliOptions.inlinePreset)
+        } catch (e) {
+          error(`CLI inline preset is not valid JSON: ${cliOptions.inlinePreset}`)
+          exit(1)
+        }
+      } else {
+        preset = await this.promptAndResolvePreset()
+      }
+    }
+
+    // clone before mutating
+    preset = cloneDeep(preset)
+    // inject core service
+    preset.plugins['@megalo/cli-service'] = Object.assign({
+      projectName: name
+    }, preset)
+    if (cliOptions.bare) {
+      preset.plugins['@megalo/cli-service'].bare = true
+    }
+
+    const packageManager = (
+      cliOptions.packageManager ||
+      loadOptions().packageManager ||
+      (hasYarn() ? 'yarn' : null) ||
+      (hasPnpm3OrLater() ? 'pnpm' : 'npm')
+    )
+
+    await clearConsole()
+    logWithSpinner(`✨`, `Creating project in ${chalk.yellow(context)}.`)
+    this.emit('creation', { event: 'creating' })
+
+    // get latest CLI version
+    const { latest } = await getVersions()
+    // const latestMinor = `${semver.major(latest)}.${semver.minor(latest)}.0`
+    // generate package.json with plugin dependencies
+    const pkg = {
+      name,
+      version: '0.1.0',
+      private: true,
+      devDependencies: {}
+    }
+    const deps = Object.keys(preset.plugins)
+    deps.forEach(dep => {
+      if (preset.plugins[dep]._isPreset) {
+        return
+      }
+
+      // Note: the default creator includes no more than `@megalo/cli-*` & `@megalo/babel-preset-env`,
+      // so it is fine to only test `@megalo` prefix.
+      // Other `@megalo/*` packages' version may not be in sync with the cli itself.
+      pkg.devDependencies[dep] = (
+        preset.plugins[dep].version ||
+        ((/^@megalo/.test(dep)) ? `^${latest[dep]}` : `latest`)
+      )
+    })
+    // write package.json
+    await writeFileTree(context, {
+      'package.json': JSON.stringify(pkg, null, 2)
+    })
+
+    // intilaize git repository before installing deps
+    // so that megalo-cli-service can setup git hooks.
+    const shouldInitGit = this.shouldInitGit(cliOptions)
+    if (shouldInitGit) {
+      logWithSpinner(`🗃`, `Initializing git repository...`)
+      this.emit('creation', { event: 'git-init' })
+      await run('git init')
+    }
+
+    // install plugins
+    stopSpinner()
+    log(`⚙  Installing CLI plugins. This might take a while...`)
+    log()
+    this.emit('creation', { event: 'plugins-install' })
+    if (isTestOrDebug) {
+      // in development, avoid installation process
+      await require('./utils/setupDevProject')(context)
+    } else {
+      await installDeps(context, packageManager, cliOptions.registry)
+    }
+
+    // run generator
+    log(`🚀  Invoking generators...`)
+    this.emit('creation', { event: 'invoking-generators' })
+    const plugins = await this.resolvePlugins(preset.plugins)
+    const generator = new Generator(context, {
+      pkg,
+      plugins,
+      scopedPkgVersions: latest,
+      completeCbs: createCompleteCbs
+    })
+    await generator.generate({
+      extractConfigFiles: preset.useConfigFiles
+    })
+
+    // install additional deps (injected by generators)
+    log(`📦  Installing additional dependencies...`)
+    this.emit('creation', { event: 'deps-install' })
+    log()
+    if (!isTestOrDebug) {
+      await installDeps(context, packageManager, cliOptions.registry)
+    }
+
+    // run complete cbs if any (injected by generators)
+    logWithSpinner('⚓', `Running completion hooks...`)
+    this.emit('creation', { event: 'completion-hooks' })
+    for (const cb of createCompleteCbs) {
+      await cb()
+    }
+
+    // generate README.md
+    stopSpinner()
+    log()
+    logWithSpinner('📄', 'Generating README.md...')
+    await writeFileTree(context, {
+      'README.md': generateReadme(generator.pkg, packageManager)
+    })
+
+    // generate a .npmrc file for pnpm, to persist the `shamefully-flatten` flag
+    if (packageManager === 'pnpm') {
+      await writeFileTree(context, {
+        '.npmrc': 'shamefully-flatten=true\n'
+      })
+    }
+
+    // commit initial state
+    let gitCommitFailed = false
+    if (shouldInitGit) {
+      await run('git add -A')
+      if (isTestOrDebug) {
+        await run('git', ['config', 'user.name', 'test'])
+        await run('git', ['config', 'user.email', 'test@test.com'])
+      }
+      const msg = typeof cliOptions.git === 'string' ? cliOptions.git : 'init'
+      try {
+        await run('git', ['commit', '-m', msg])
+      } catch (e) {
+        gitCommitFailed = true
+      }
+    }
+
+    // log instructions
+    stopSpinner()
+    log()
+    log(`🎉  Successfully created project ${chalk.yellow(name)}.`)
+    if (!cliOptions.skipGetStarted) {
+      log(
+        `👉  Get started with the following commands:\n\n` +
+        (this.context === process.cwd() ? `` : chalk.cyan(` ${chalk.gray('$')} cd ${name}\n`)) +
+        chalk.cyan(` ${chalk.gray('$')} ${packageManager === 'yarn' ? 'yarn dev:wechat' : packageManager === 'pnpm' ? 'pnpm run dev:wechat' : 'npm run dev:wechat'}`)
+      )
+    }
+    log()
+    this.emit('creation', { event: 'done' })
+
+    if (gitCommitFailed) {
+      warn(
+        `Skipped git commit due to missing username and email in git config.\n` +
+        `You will need to perform the initial commit yourself.\n`
+      )
+    }
+
+    generator.printExitLogs()
+  }
+
+  run(command, args) {
+    if (!args) { [command, ...args] = command.split(/\s+/) }
+    return execa(command, args, { cwd: this.context })
+  }
+
+  async promptAndResolvePreset (answers = null) {
+    // prompt
+    if (!answers) {
+      await clearConsole(true)
+      answers = await inquirer.prompt(this.resolveFinalPrompts())
+    }
+    debug('megalo-cli:answers')(answers)
+
+    if (answers.packageManager) {
+      saveOptions({
+        packageManager: answers.packageManager
+      })
+    }
+
+    let preset
+    if (answers.preset && answers.preset !== '__manual__') {
+      preset = await this.resolvePreset(answers.preset)
+    } else {
+      // manual
+      preset = {
+        useConfigFiles: answers.useConfigFiles === 'files',
+        plugins: {}
+      }
+      answers.features = answers.features || []
+      // run cb registered by prompt modules to finalize the preset
+      this.promptCompleteCbs.forEach(cb => cb(answers, preset))
+    }
+
+    // validate
+    validatePreset(preset)
+
+    // save preset
+    if (answers.save && answers.saveName) {
+      savePreset(answers.saveName, preset)
+    }
+
+    debug('megalo-cli:preset')(preset)
+    return preset
+  }
+
+  async resolvePreset (name, clone) {
+    let preset
+    const savedPresets = loadOptions().presets || {}
+
+    if (name in savedPresets) {
+      preset = savedPresets[name]
+    } else if (name.endsWith('.json') || /^\./.test(name) || path.isAbsolute(name)) {
+      preset = await loadLocalPreset(path.resolve(name))
+    } else if (name.includes('/')) {
+      logWithSpinner(`Fetching remote preset ${chalk.cyan(name)}...`)
+      this.emit('creation', { event: 'fetch-remote-preset' })
+      try {
+        preset = await loadRemotePreset(name, clone)
+        stopSpinner()
+      } catch (e) {
+        stopSpinner()
+        error(`Failed fetching remote preset ${chalk.cyan(name)}:`)
+        throw e
+      }
+    }
+
+    // use default preset if user has not overwritten it
+    if (name === 'Default' && !preset) {
+      preset = defaults.presets.Default
+    }
+    if (!preset) {
+      error(`preset "${name}" not found.`)
+      const presets = Object.keys(savedPresets)
+      if (presets.length) {
+        log()
+        log(`available presets:\n${presets.join(`\n`)}`)
+      } else {
+        log(`you don't seem to have any saved preset.`)
+        log(`run megalo-cli in manual mode to create a preset.`)
+      }
+      exit(1)
+    }
+    return preset
+  }
+
+  // { id: options } => [{ id, apply, options }]
+  async resolvePlugins (rawPlugins) {
+    // ensure cli-service is invoked first
+    rawPlugins = sortObject(rawPlugins, ['@megalo/cli-service'], true)
+    const plugins = []
+    for (const id of Object.keys(rawPlugins)) {
+      const apply = loadModule(`${id}/generator`, this.context) || (() => {})
+      let options = rawPlugins[id] || {}
+      if (options.prompts) {
+        const prompts = loadModule(`${id}/prompts`, this.context)
+        if (prompts) {
+          log()
+          log(`${chalk.cyan(options._isPreset ? `Preset options:` : id)}`)
+          options = await inquirer.prompt(prompts)
+        }
+      }
+      plugins.push({ id, apply, options })
+    }
+    return plugins
+  }
+
+  getPresets() {
+    const savedOptions = loadOptions()
+    return Object.assign({}, savedOptions.presets, defaults.presets)
+  }
+
+  resolveIntroPrompts() {
+    const presets = this.getPresets()
+    const presetChoices = Object.keys(presets).map(name => {
+      return {
+        name: `${name} (${formatFeatures(presets[name])})`,
+        value: name
+      }
+    })
+    const presetPrompt = {
+      name: 'preset',
+      type: 'list',
+      message: 'Please pick a preset:',
+      choices: [
+        ...presetChoices,
+        {
+          name: 'Manually select features',
+          value: '__manual__'
+        }
+      ]
+    }
+
+    const featurePrompt = {
+      name: 'features',
+      when: isManualMode,
+      type: 'checkbox',
+      message: 'Check the features needed for your project:',
+      choices: [],
+      pageSize: 10
+    }
+
+    return {
+      presetPrompt,
+      featurePrompt
+    }
+  }
+
+  resolveOutroPrompts() {
+    const outroPrompts = [
+      {
+        name: 'useConfigFiles',
+        when: isManualMode,
+        type: 'list',
+        message: 'Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?',
+        choices: [
+          {
+            name: 'In dedicated config files',
+            value: 'files'
+          },
+          {
+            name: 'In package.json',
+            value: 'pkg'
+          }
+        ]
+      },
+      {
+        name: 'save',
+        when: isManualMode,
+        type: 'confirm',
+        message: 'Save this as a preset for future projects?',
+        default: false
+      },
+      {
+        name: 'saveName',
+        when: answers => answers.save,
+        type: 'input',
+        message: 'Save preset as:'
+      }
+    ]
+
+    // ask for packageManager once
+    const savedOptions = loadOptions()
+    if (!savedOptions.packageManager && (hasYarn() || hasPnpm3OrLater())) {
+      const packageManagerChoices = []
+
+      if (hasYarn()) {
+        packageManagerChoices.push({
+          name: 'Use Yarn',
+          value: 'yarn',
+          short: 'yarn'
+        })
+      }
+
+      if (hasPnpm3OrLater()) {
+        packageManagerChoices.push({
+          name: 'Use PNPM',
+          value: 'pnpm',
+          short: 'PNPM'
+        })
+      }
+
+      packageManagerChoices.push({
+        name: 'Use NPM',
+        value: 'npm',
+        short: 'NPM'
+      })
+
+      outroPrompts.push({
+        name: 'packageManager',
+        type: 'list',
+        message: 'Pick the package manager to use when installing dependencies:',
+        choices: packageManagerChoices
+      })
+    }
+
+    return outroPrompts
+  }
+
+  resolveFinalPrompts () {
+    // patch generator-injected prompts to only show in manual mode
+    this.injectedPrompts.forEach(prompt => {
+      const originalWhen = prompt.when || (() => true)
+      prompt.when = answers => {
+        return isManualMode(answers) && originalWhen(answers)
+      }
+    })
+    const prompts = [
+      this.presetPrompt,
+      this.featurePrompt,
+      ...this.injectedPrompts,
+      ...this.outroPrompts
+    ]
+    debug('megalo-cli:prompts')(prompts)
+    return prompts
+  }
+
+  shouldInitGit (cliOptions) {
+    if (!hasGit()) {
+      return false
+    }
+    // --git
+    if (cliOptions.forceGit) {
+      return true
+    }
+    // --no-git
+    if (cliOptions.git === false || cliOptions.git === 'false') {
+      return false
+    }
+    // default: true unless already in a git repo
+    return !hasProjectGit(this.context)
+  }
+}
\ No newline at end of file
diff --git a/packages/@megalo/cli/lib/Generator.js b/packages/@megalo/cli/lib/Generator.js
new file mode 100644
index 0000000..b3a1938
--- /dev/null
+++ b/packages/@megalo/cli/lib/Generator.js
@@ -0,0 +1,274 @@
+const ejs = require('ejs')
+const debug = require('debug')
+const GeneratorAPI = require('./GeneratorAPI')
+const sortObject = require('./utils/sortObject')
+const writeFileTree = require('./utils/writeFileTree')
+const inferRootOptions = require('./utils/inferRootOptions')
+const normalizeFilePaths = require('./utils/normalizeFilePaths')
+const runCodemod = require('./utils/runCodemod')
+const { toShortPluginId, matchesPluginId } = require('@megalo/cli-share-utils')
+const ConfigTransform = require('./ConfigTransform')
+
+const logger = require('@megalo/cli-share-utils/lib/logger')
+const logTypes = {
+  log: logger.log,
+  info: logger.info,
+  done: logger.done,
+  warn: logger.warn,
+  error: logger.error
+}
+
+const defaultConfigTransforms = {
+  babel: new ConfigTransform({
+    file: {
+      js: ['babel.config.js']
+    }
+  }),
+  postcss: new ConfigTransform({
+    file: {
+      js: ['postcss.config.js'],
+      json: ['.postcssrc.json', '.postcssrc'],
+      yaml: ['.postcssrc.yaml', '.postcssrc.yml']
+    }
+  }),
+  eslintConfig: new ConfigTransform({
+    file: {
+      js: ['.eslintrc.js'],
+      json: ['.eslintrc', '.eslintrc.json'],
+      yaml: ['.eslintrc.yaml', '.eslintrc.yml']
+    }
+  }),
+  jest: new ConfigTransform({
+    file: {
+      js: ['jest.config.js']
+    }
+  }),
+  browserslist: new ConfigTransform({
+    file: {
+      lines: ['.browserslistrc']
+    }
+  })
+}
+
+const reservedConfigTransforms = {
+  megalo: new ConfigTransform({
+    file: {
+      js: ['megalo.config.js']
+    }
+  })
+}
+
+const ensureEOL = str => {
+  if (str.charAt(str.length - 1) !== '\n') {
+    return str + '\n'
+  }
+  return str
+}
+
+module.exports = class Generator {
+  constructor (context, {
+    pkg = {},
+    plugins = [],
+    scopedPkgVersions = {},
+    completeCbs = [],
+    files = {},
+    invoking = false
+  } = {}) {
+    this.context = context
+    this.plugins = plugins
+    this.originalPkg = pkg
+    this.scopedPkgVersions = scopedPkgVersions
+    this.pkg = Object.assign({}, pkg)
+    this.imports = {}
+    this.rootOptions = {}
+    this.completeCbs = completeCbs
+    this.configTransforms = {}
+    this.defaultConfigTransforms = defaultConfigTransforms
+    this.reservedConfigTransforms = reservedConfigTransforms
+    this.invoking = invoking
+    // for conflict resolution
+    this.depSources = {}
+    // virtual file tree
+    this.files = files
+    this.fileMiddlewares = []
+    this.postProcessFilesCbs = []
+    // exit messages
+    this.exitLogs = []
+
+    const cliService = plugins.find(p => p.id === '@megalo/cli-service')
+    const rootOptions = cliService
+      ? cliService.options
+      : inferRootOptions(pkg)
+    // apply generators from plugins
+    plugins.forEach(({ id, apply, options }) => {
+      const api = new GeneratorAPI(id, this, options, rootOptions)
+      apply(api, options, rootOptions, invoking)
+    })
+  }
+
+  async generate ({
+    extractConfigFiles = false,
+    checkExisting = false
+  } = {}) {
+    // save the file system before applying plugin for comparison
+    const initialFiles = Object.assign({}, this.files)
+    // extract configs from package.json into dedicated files.
+    this.extractConfigFiles(extractConfigFiles, checkExisting)
+    // wait for file resolve
+    await this.resolveFiles()
+    // set package.json
+    this.sortPkg()
+    this.files['package.json'] = JSON.stringify(this.pkg, null, 2) + '\n'
+    // write/update file tree to disk
+    await writeFileTree(this.context, this.files, initialFiles)
+  }
+
+  extractConfigFiles (extractAll, checkExisting) {
+    const configTransforms = Object.assign({},
+      defaultConfigTransforms,
+      this.configTransforms,
+      reservedConfigTransforms
+    )
+    const extract = key => {
+      if (
+        configTransforms[key] &&
+        this.pkg[key] &&
+        // do not extract if the field exists in original package.json
+        !this.originalPkg[key]
+      ) {
+        const value = this.pkg[key]
+        const configTransform = configTransforms[key]
+        const res = configTransform.transform(
+          value,
+          checkExisting,
+          this.files,
+          this.context
+        )
+        const { content, filename } = res
+        this.files[filename] = ensureEOL(content)
+        delete this.pkg[key]
+      }
+    }
+    if (extractAll) {
+      for (const key in this.pkg) {
+        extract(key)
+      }
+    } else {
+      if (!process.env.MEGALO_CLI_TEST) {
+        // by default, always extract megalo.config.js
+        extract('megalo')
+      }
+      // always extract babel.config.js as this is the only way to apply
+      // project-wide configuration even to dependencies.
+      // TODO: this can be removed when Babel supports root: true in package.json
+      extract('babel')
+    }
+  }
+
+  sortPkg () {
+    // ensure package.json keys has readable order
+    this.pkg.dependencies = sortObject(this.pkg.dependencies)
+    this.pkg.devDependencies = sortObject(this.pkg.devDependencies)
+    this.pkg.scripts = sortObject(this.pkg.scripts, [
+      'serve',
+      'build',
+      'test',
+      'e2e',
+      'lint',
+      'deploy'
+    ])
+    this.pkg = sortObject(this.pkg, [
+      'name',
+      'version',
+      'private',
+      'description',
+      'author',
+      'scripts',
+      'main',
+      'module',
+      'browser',
+      'jsDelivr',
+      'unpkg',
+      'files',
+      'dependencies',
+      'devDependencies',
+      'peerDependencies',
+      'megalo',
+      'babel',
+      'eslintConfig',
+      'prettier',
+      'postcss',
+      'browserslist',
+      'jest'
+    ])
+
+    debug('megalo:cli-pkg')(this.pkg)
+  }
+
+  async resolveFiles () {
+    const files = this.files
+    for (const middleware of this.fileMiddlewares) {
+      await middleware(files, ejs.render)
+    }
+
+    // normalize file paths on windows
+    // all paths are converted to use / instead of \
+    normalizeFilePaths(files)
+
+    // handle imports and root option injections
+    Object.keys(files).forEach(file => {
+      let imports = this.imports[file]
+      imports = imports instanceof Set ? Array.from(imports) : imports
+      if (imports && imports.length > 0) {
+        files[file] = runCodemod(
+          require('./utils/codemods/injectImports'),
+          { path: file, source: files[file] },
+          { imports }
+        )
+      }
+
+      // let injections = this.rootOptions[file]
+      // injections = injections instanceof Set ? Array.from(injections) : injections
+      // if (injections && injections.length > 0) {
+      //   files[file] = runCodemod(
+      //     require('./utils/codemods/injectOptions'),
+      //     { path: file, source: files[file] },
+      //     { injections }
+      //   )
+      // }
+    })
+
+    for (const postProcess of this.postProcessFilesCbs) {
+      await postProcess(files)
+    }
+    debug('megalo:cli-files')(this.files)
+  }
+
+  hasPlugin (_id) {
+    if (_id === 'router') _id = 'vue-router'
+    if (['vue-router', 'vuex'].includes(_id)) {
+      const pkg = this.pkg
+      return ((pkg.dependencies && pkg.dependencies[_id]) || (pkg.devDependencies && pkg.devDependencies[_id]))
+    }
+    return [
+      ...this.plugins.map(p => p.id),
+      ...Object.keys(this.pkg.devDependencies || {}),
+      ...Object.keys(this.pkg.dependencies || {})
+    ].some(id => matchesPluginId(_id, id))
+  }
+
+  printExitLogs () {
+    if (this.exitLogs.length) {
+      this.exitLogs.forEach(({ id, msg, type }) => {
+        const shortId = toShortPluginId(id)
+        const logFn = logTypes[type]
+        if (!logFn) {
+          logger.error(`Invalid api.exitLog type '${type}'.`, shortId)
+        } else {
+          logFn(msg, msg && shortId)
+        }
+      })
+      logger.log()
+    }
+  }
+}
diff --git a/packages/@megalo/cli/lib/GeneratorAPI.js b/packages/@megalo/cli/lib/GeneratorAPI.js
new file mode 100644
index 0000000..9b1f508
--- /dev/null
+++ b/packages/@megalo/cli/lib/GeneratorAPI.js
@@ -0,0 +1,449 @@
+const fs = require('fs')
+const ejs = require('ejs')
+const path = require('path')
+const merge = require('deepmerge')
+const resolve = require('resolve')
+const { isBinaryFileSync } = require('isbinaryfile')
+const semver = require('semver')
+const mergeDeps = require('./utils/mergeDeps')
+const runCodemod = require('./utils/runCodemod')
+const stringifyJS = require('./utils/stringifyJS')
+const ConfigTransform = require('./ConfigTransform')
+const { getPluginLink, toShortPluginId, loadModule } = require('@megalo/cli-share-utils')
+
+const isString = val => typeof val === 'string'
+const isFunction = val => typeof val === 'function'
+const isObject = val => val && typeof val === 'object'
+const mergeArrayWithDedupe = (a, b) => Array.from(new Set([...a, ...b]))
+
+class GeneratorAPI {
+  /**
+   * @param {string} id - Id of the owner plugin
+   * @param {Generator} generator - The invoking Generator instance
+   * @param {object} options - generator options passed to this plugin
+   * @param {object} rootOptions - root options (the entire preset)
+   */
+  constructor (id, generator, options, rootOptions) {
+    this.id = id
+    this.generator = generator
+    this.options = options
+    this.rootOptions = rootOptions
+
+    this.pluginsData = generator.plugins
+      .filter(({ id }) => id !== `@megalo/cli-service`)
+      .map(({ id }) => ({
+        name: toShortPluginId(id),
+        link: getPluginLink(id)
+      }))
+
+    this._entryFile = undefined
+  }
+
+  /**
+   * Resolves the data when rendering templates.
+   *
+   * @private
+   */
+  _resolveData (additionalData) {
+    return Object.assign({
+      options: this.options,
+      rootOptions: this.rootOptions,
+      plugins: this.pluginsData
+    }, additionalData)
+  }
+
+  /**
+   * Inject a file processing middleware.
+   *
+   * @private
+   * @param {FileMiddleware} middleware - A middleware function that receives the
+   *   virtual files tree object, and an ejs render function. Can be async.
+   */
+  _injectFileMiddleware (middleware) {
+    this.generator.fileMiddlewares.push(middleware)
+  }
+
+  /**
+   * Resolve path for a project.
+   *
+   * @param {string} _path - Relative path from project root
+   * @return {string} The resolved absolute path.
+   */
+  resolve (_path) {
+    return path.resolve(this.generator.context, _path)
+  }
+
+  get cliVersion () {
+    return require('../package.json').version
+  }
+
+  assertCliVersion (range) {
+    if (typeof range === 'number') {
+      if (!Number.isInteger(range)) {
+        throw new Error('Expected string or integer value.')
+      }
+      range = `^${range}.0.0-0`
+    }
+    if (typeof range !== 'string') {
+      throw new Error('Expected string or integer value.')
+    }
+
+    if (semver.satisfies(this.cliVersion, range)) return
+
+    throw new Error(
+      `Require global @megalo/cli "${range}", but was invoked by "${this.cliVersion}".`
+    )
+  }
+
+  get cliServiceVersion () {
+    // In generator unit tests, we don't write the actual file back to the disk.
+    // So there is no cli-service module to load.
+    // In that case, just return the cli version.
+    if (process.env.MEGALO_CLI_TEST && process.env.MEGALO_CLI_SKIP_WRITE) {
+      return this.cliVersion
+    }
+
+    const servicePkg = loadModule(
+      '@megalo/cli-service/package.json',
+      this.generator.context
+    )
+
+    return servicePkg.version
+  }
+
+  assertCliServiceVersion (range) {
+    if (typeof range === 'number') {
+      if (!Number.isInteger(range)) {
+        throw new Error('Expected string or integer value.')
+      }
+      range = `^${range}.0.0-0`
+    }
+    if (typeof range !== 'string') {
+      throw new Error('Expected string or integer value.')
+    }
+
+    if (semver.satisfies(this.cliServiceVersion, range)) return
+
+    throw new Error(
+      `Require @megalo/cli-service "${range}", but was loaded with "${this.cliServiceVersion}".`
+    )
+  }
+
+  /**
+   * Check if the project has a given plugin.
+   *
+   * @param {string} id - Plugin id, can omit the (@megalo/|megalo-|@scope/megalo)-cli-plugin- prefix
+   * @return {boolean}
+   */
+  hasPlugin (id) {
+    return this.generator.hasPlugin(id)
+  }
+
+  /**
+   * Configure how config files are extracted.
+   *
+   * @param {string} key - Config key in package.json
+   * @param {object} options - Options
+   * @param {object} options.file - File descriptor
+   * Used to search for existing file.
+   * Each key is a file type (possible values: ['js', 'json', 'yaml', 'lines']).
+   * The value is a list of filenames.
+   * Example:
+   * {
+   *   js: ['.eslintrc.js'],
+   *   json: ['.eslintrc.json', '.eslintrc']
+   * }
+   * By default, the first filename will be used to create the config file.
+   */
+  addConfigTransform (key, options) {
+    const hasReserved = Object.keys(this.generator.reservedConfigTransforms).includes(key)
+    if (
+      hasReserved ||
+      !options ||
+      !options.file
+    ) {
+      if (hasReserved) {
+        const { warn } = require('@megalo/cli-share-utils')
+        warn(`Reserved config transform '${key}'`)
+      }
+      return
+    }
+
+    this.generator.configTransforms[key] = new ConfigTransform(options)
+  }
+
+  /**
+   * Extend the package.json of the project.
+   * Nested fields are deep-merged unless `{ merge: false }` is passed.
+   * Also resolves dependency conflicts between plugins.
+   * Tool configuration fields may be extracted into standalone files before
+   * files are written to disk.
+   *
+   * @param {object | () => object} fields - Fields to merge.
+   */
+  extendPackage (fields) {
+    const pkg = this.generator.pkg
+    const toMerge = isFunction(fields) ? fields(pkg) : fields
+    for (const key in toMerge) {
+      const value = toMerge[key]
+      const existing = pkg[key]
+      if (isObject(value) && (key === 'dependencies' || key === 'devDependencies')) {
+        // use special version resolution merge
+        pkg[key] = mergeDeps(
+          this.id,
+          existing || {},
+          value,
+          this.generator.depSources
+        )
+      } else if (!(key in pkg)) {
+        pkg[key] = value
+      } else if (Array.isArray(value) && Array.isArray(existing)) {
+        pkg[key] = mergeArrayWithDedupe(existing, value)
+      } else if (isObject(value) && isObject(existing)) {
+        pkg[key] = merge(existing, value, { arrayMerge: mergeArrayWithDedupe })
+      } else {
+        pkg[key] = value
+      }
+    }
+  }
+
+  /**
+   * Render template files into the virtual files tree object.
+   *
+   * @param {string | object | FileMiddleware} source -
+   *   Can be one of:
+   *   - relative path to a directory;
+   *   - Object hash of { sourceTemplate: targetFile } mappings;
+   *   - a custom file middleware function.
+   * @param {object} [additionalData] - additional data available to templates.
+   * @param {object} [ejsOptions] - options for ejs.
+   */
+  render (source, additionalData = {}, ejsOptions = {}) {
+    const baseDir = extractCallDir()
+    if (isString(source)) {
+      source = path.resolve(baseDir, source)
+      this._injectFileMiddleware(async (files) => {
+        const data = this._resolveData(additionalData)
+        const globby = require('globby')
+        const _files = await globby(['**/*'], { cwd: source })
+        for (const rawPath of _files) {
+          const targetPath = rawPath.split('/').map(filename => {
+            // dotfiles are ignored when published to npm, therefore in templates
+            // we need to use underscore instead (e.g. "_gitignore")
+            if (filename.charAt(0) === '_' && filename.charAt(1) !== '_') {
+              return `.${filename.slice(1)}`
+            }
+            if (filename.charAt(0) === '_' && filename.charAt(1) === '_') {
+              return `${filename.slice(1)}`
+            }
+            return filename
+          }).join('/')
+          const sourcePath = path.resolve(source, rawPath)
+          const content = renderFile(sourcePath, data, ejsOptions)
+          // only set file if it's not all whitespace, or is a Buffer (binary files)
+          if (Buffer.isBuffer(content) || /[^\s]/.test(content)) {
+            files[targetPath] = content
+          }
+        }
+      })
+    } else if (isObject(source)) {
+      this._injectFileMiddleware(files => {
+        const data = this._resolveData(additionalData)
+        for (const targetPath in source) {
+          const sourcePath = path.resolve(baseDir, source[targetPath])
+          const content = renderFile(sourcePath, data, ejsOptions)
+          if (Buffer.isBuffer(content) || content.trim()) {
+            files[targetPath] = content
+          }
+        }
+      })
+    } else if (isFunction(source)) {
+      this._injectFileMiddleware(source)
+    }
+  }
+
+  /**
+   * Push a file middleware that will be applied after all normal file
+   * middelwares have been applied.
+   *
+   * @param {FileMiddleware} cb
+   */
+  postProcessFiles (cb) {
+    this.generator.postProcessFilesCbs.push(cb)
+  }
+
+  /**
+   * Push a callback to be called when the files have been written to disk.
+   *
+   * @param {function} cb
+   */
+  onCreateComplete (cb) {
+    this.generator.completeCbs.push(cb)
+  }
+
+  /**
+   * Add a message to be printed when the generator exits (after any other standard messages).
+   *
+   * @param {} msg String or value to print after the generation is completed
+   * @param {('log'|'info'|'done'|'warn'|'error')} [type='log'] Type of message
+   */
+  exitLog (msg, type = 'log') {
+    this.generator.exitLogs.push({ id: this.id, msg, type })
+  }
+
+  /**
+   * convenience method for generating a js config file from json
+   */
+  genJSConfig (value) {
+    return `module.exports = ${stringifyJS(value, null, 2)}`
+  }
+
+  /**
+   * Turns a string expression into executable JS for JS configs.
+   * @param {*} str JS expression as a string
+   */
+  makeJSOnlyValue (str) {
+    const fn = () => {}
+    fn.__expression = str
+    return fn
+  }
+
+  /**
+   * Run codemod on a script file or the script part of a .vue file
+   * @param {string} file the path to the file to transform
+   * @param {Codemod} codemod the codemod module to run
+   * @param {object} options additional options for the codemod
+   */
+  transformScript (file, codemod, options) {
+    this._injectFileMiddleware(files => {
+      files[file] = runCodemod(
+        codemod,
+        { path: this.resolve(file), source: files[file] },
+        options
+      )
+    })
+  }
+
+  /**
+   * Add import statements to a file.
+   */
+  injectImports (file, imports) {
+    const _imports = (
+      this.generator.imports[file] ||
+      (this.generator.imports[file] = new Set())
+    )
+    ;(Array.isArray(imports) ? imports : [imports]).forEach(imp => {
+      _imports.add(imp)
+    })
+  }
+
+  /**
+   * Add options to the root Vue instance (detected by `new Vue`).
+   */
+  injectRootOptions (file, options) {
+    const _options = (
+      this.generator.rootOptions[file] ||
+      (this.generator.rootOptions[file] = new Set())
+    )
+    ;(Array.isArray(options) ? options : [options]).forEach(opt => {
+      _options.add(opt)
+    })
+  }
+
+  /**
+   * Get the entry file taking into account typescript.
+   *
+   * @readonly
+   */
+  get entryFile () {
+    if (this._entryFile) return this._entryFile
+    if (this.hasPlugin('typescript')) {
+      this._entryFile = 'src/main.ts'
+    } else {
+      this._entryFile = 'src/main.js'
+    }
+    return this._entryFile
+  }
+
+  /**
+   * Is the plugin being invoked?
+   *
+   * @readonly
+   */
+  get invoking () {
+    return this.generator.invoking
+  }
+}
+
+function extractCallDir () {
+  // extract api.render() callsite file location using error stack
+  const obj = {}
+  Error.captureStackTrace(obj)
+  const callSite = obj.stack.split('\n')[3]
+  const fileName = callSite.match(/\s\((.*):\d+:\d+\)$/)[1]
+  return path.dirname(fileName)
+}
+
+const replaceBlockRE = /<%# REPLACE %>([^]*?)<%# END_REPLACE %>/g
+
+function renderFile (name, data, ejsOptions) {
+  if (isBinaryFileSync(name)) {
+    return fs.readFileSync(name) // return buffer
+  }
+  const template = fs.readFileSync(name, 'utf-8')
+
+  // custom template inheritance via yaml front matter.
+  // ---
+  // extend: 'source-file'
+  // replace: !!js/regexp /some-regex/
+  // OR
+  // replace:
+  //   - !!js/regexp /foo/
+  //   - !!js/regexp /bar/
+  // ---
+  const yaml = require('yaml-front-matter')
+  const parsed = yaml.loadFront(template)
+  const content = parsed.__content
+  let finalTemplate = content.trim() + `\n`
+
+  if (parsed.when) {
+    finalTemplate = (
+      `<%_ if (${parsed.when}) { _%>` +
+        finalTemplate +
+      `<%_ } _%>`
+    )
+
+    // use ejs.render to test the conditional expression
+    // if evaluated to falsy value, return early to avoid extra cost for extend expression
+    const result = ejs.render(finalTemplate, data, ejsOptions)
+    if (!result) {
+      return ''
+    }
+  }
+
+  if (parsed.extend) {
+    const extendPath = path.isAbsolute(parsed.extend)
+      ? parsed.extend
+      : resolve.sync(parsed.extend, { basedir: path.dirname(name) })
+    finalTemplate = fs.readFileSync(extendPath, 'utf-8')
+    if (parsed.replace) {
+      if (Array.isArray(parsed.replace)) {
+        const replaceMatch = content.match(replaceBlockRE)
+        if (replaceMatch) {
+          const replaces = replaceMatch.map(m => {
+            return m.replace(replaceBlockRE, '$1').trim()
+          })
+          parsed.replace.forEach((r, i) => {
+            finalTemplate = finalTemplate.replace(r, replaces[i])
+          })
+        }
+      } else {
+        finalTemplate = finalTemplate.replace(parsed.replace, content.trim())
+      }
+    }
+  }
+
+  return ejs.render(finalTemplate, data, ejsOptions)
+}
+
+module.exports = GeneratorAPI
diff --git a/packages/@megalo/cli/lib/PromptModuleAPI.js b/packages/@megalo/cli/lib/PromptModuleAPI.js
new file mode 100644
index 0000000..dc82558
--- /dev/null
+++ b/packages/@megalo/cli/lib/PromptModuleAPI.js
@@ -0,0 +1,23 @@
+module.exports = class PromptModuleAPI {
+  constructor (creator) {
+    this.creator = creator
+  }
+
+  injectFeature (feature) {
+    this.creator.featurePrompt.choices.push(feature)
+  }
+
+  injectPrompt (prompt) {
+    this.creator.injectedPrompts.push(prompt)
+  }
+
+  injectOptionForPrompt (name, option) {
+    this.creator.injectedPrompts.find(f => {
+      return f.name === name
+    }).choices.push(option)
+  }
+
+  onPromptComplete (cb) {
+    this.creator.promptCompleteCbs.push(cb)
+  }
+}
diff --git a/packages/@megalo/cli/lib/create.js b/packages/@megalo/cli/lib/create.js
new file mode 100644
index 0000000..a131e7a
--- /dev/null
+++ b/packages/@megalo/cli/lib/create.js
@@ -0,0 +1,67 @@
+const fs = require('fs-extra')
+const path = require('path')
+const chalk = require('chalk')
+const inquirer = require('inquirer')
+const Creator = require('./Creator')
+const { getPromptModules } = require('./utils/createTools')
+const { error, stopSpinner, exit } = require('@megalo/cli-share-utils')
+const validateProjectName = require('validate-npm-package-name')
+
+async function create(projectName, options) {
+  const cwd = options.cwd || process.cwd()
+  const inCurrent = projectName === '.'
+  const name = inCurrent ? path.relative('../', cwd) : projectName
+  const targetDir = path.resolve(cwd, projectName)
+
+  if (fs.existsSync(targetDir)) {
+    if (options.force) {
+      await fs.remove(targetDir)
+    } else {
+      // await;
+      if (inCurrent) {
+        const { ok } = await inquirer.prompt([
+          {
+            name: 'ok',
+            type: 'confirm',
+            message: `Generate project in current directory?`
+          }
+        ]); 
+        if (!ok) {
+          return
+        }
+      } else {
+        const { action } = await inquirer.prompt([
+          {
+            name: 'action',
+            type: 'list',
+            message: `Target directory ${chalk.cyan(targetDir)} already exists. Pick and action:`,
+            choices: [
+              { name: 'Overwrite', value: 'overwrite' },
+              { name: 'Merge', value: 'merge' },
+              { name: 'Cancel', value: false }
+            ]
+          }
+        ])
+        if (!action) {
+          return
+        } else if (action === 'overwrite') {
+          console.log(`\nRemoving ${chalk.cyan(targetDir)}...`)
+          await fs.remove(targetDir)
+        }
+      }
+    }
+  }
+
+  const creator = new Creator(name, targetDir, getPromptModules())
+  await creator.create(options)
+}
+
+module.exports = (...args) => {
+  return create(...args).catch(err => {
+    stopSpinner(false) // do not persist
+    error(err)
+    if (!process.env.MEGALO_CLI_TEST) {
+      process.exit(1)
+    }
+  })
+} 
\ No newline at end of file
diff --git a/packages/@megalo/cli/lib/options.js b/packages/@megalo/cli/lib/options.js
new file mode 100644
index 0000000..360cce7
--- /dev/null
+++ b/packages/@megalo/cli/lib/options.js
@@ -0,0 +1,118 @@
+const fs = require('fs')
+const cloneDeep = require('lodash.clonedeep')
+const { getRcPath } = require('./utils/rcPath')
+const { exit } = require('@megalo/cli-share-utils/lib/exit')
+const { error } = require('@megalo/cli-share-utils/lib/logger')
+const { createSchema, validate } = require('@megalo/cli-share-utils/lib/validate')
+
+const rcPath = exports.rcPath = getRcPath('.megalorc')
+
+const presetSchema = createSchema(joi => joi.object().keys({
+  bare: joi.boolean(),
+  useConfigFiles: joi.boolean(),
+  router: joi.boolean(),
+  routerHistoryMode: joi.boolean(),
+  vuex: joi.boolean(),
+  px2rpx: joi.boolean(),
+  megaloapi: joi.boolean(),
+  // TODO: remove 'sass' or make it equivalent to 'dart-sass' in v4
+  cssPreprocessor: joi.string().only(['sass', 'dart-sass', 'node-sass', 'less', 'stylus']),
+  plugins: joi.object().required(),
+  configs: joi.object()
+}))
+
+const schema = createSchema(joi => joi.object().keys({
+  // latestVersion: joi.string().regex(/^\d+\.\d+\.\d+$/),
+  latestVersion: joi.object().keys(null),
+  lastChecked: joi.date().timestamp(),
+  packageManager: joi.string().only(['yarn', 'npm', 'pnpm']),
+  useTaobaoRegistry: joi.boolean(),
+  presets: joi.object().pattern(/^/, presetSchema)
+}))
+
+exports.validatePreset = preset => validate(preset, presetSchema, msg => {
+  error(`invalid preset options: ${msg}`)
+})
+
+exports.defaultPreset = {
+  router: false,
+  vuex: false,
+  px2rpx: false,
+  megaloapi: false,
+  useConfigFiles: false,
+  cssPreprocessor: undefined,
+  plugins: {
+    // '@megalo/cli-plugin-babel': {},
+    '@megalo/cli-plugin-eslint': {
+      config: 'base',
+      lintOn: [ 'Save' ]
+    }
+  }
+}
+
+exports.defaults = {
+  lastChecked: undefined,
+  // latestVersion: undefined,
+  latestVersion: {},
+
+  packageManager: undefined,
+  useTaobaoRegistry: undefined,
+  presets: {
+    Default: exports.defaultPreset
+  }
+}
+
+let cachedOptions
+
+exports.loadOptions = () => {
+  if (cachedOptions) {
+    return cachedOptions
+  }
+  if (fs.existsSync(rcPath)) {
+    try {
+      cachedOptions = JSON.parse(fs.readFileSync(rcPath, 'utf-8'))
+    } catch(e) {
+      error(
+        `Error loading saved preferences: ` +
+        `~/.megalorc may be corrupted or have syntax errors. ` +
+        `Please fix/delete it and re-run megalo-cli in manual mode.\n` +
+        `(${e.message})`
+      )
+      exit(1)
+    }
+    validate(cachedOptions, schema, () => {
+      error(
+        `~/.megalorc may be outdated. ` +
+        `Please delete it and re-run vue-cli in manual mode.`
+      )
+    })
+    return cachedOptions
+  } else {
+    return {}
+  }
+}
+
+exports.saveOptions = toSave => {
+  const options = Object.assign(cloneDeep(exports.loadOptions()), toSave)
+  for (const key in options) {
+    if (!(key in exports.defaults)) {
+      delete options[key]
+    }
+  }
+  cachedOptions = options
+  try {
+    fs.writeFileSync(rcPath, JSON.stringify(options, null, 2))
+  } catch(e) {
+    error(
+      `Error saving preferences: ` +
+      `make sure you have write access to ${rcPath}.\n` +
+      `(${e.message})`
+    )
+  }
+}
+
+exports.savePreset = (name, preset) => {
+  const presets = cloneDeep(exports.loadOptions().presets || {})
+  presets[name] = preset
+  exports.saveOptions({ presets })
+}
\ No newline at end of file
diff --git a/packages/@megalo/cli/lib/promptModules/babel.js b/packages/@megalo/cli/lib/promptModules/babel.js
new file mode 100644
index 0000000..28c101c
--- /dev/null
+++ b/packages/@megalo/cli/lib/promptModules/babel.js
@@ -0,0 +1,21 @@
+module.exports = cli => {
+  cli.injectFeature({
+    name: 'Babel',
+    value: 'babel',
+    short: 'Babel',
+    description: 'Transpile modern JavaScript to older versions (for compatibility)',
+    link: 'https://babeljs.io',
+    checked: true
+  })
+
+  cli.onPromptComplete((answers, options) => {
+    if (answers.features.includes('ts')) {
+      if (!answers.useTsWithBabel) {
+        return
+      }
+    } else if (!answers.features.includes('babel')) {
+      return
+    }
+    options.plugins['@megalo/cli-plugin-babel'] = {}
+  })
+}
\ No newline at end of file
diff --git a/packages/@megalo/cli/lib/promptModules/cssPreprocessors.js b/packages/@megalo/cli/lib/promptModules/cssPreprocessors.js
new file mode 100644
index 0000000..29b7139
--- /dev/null
+++ b/packages/@megalo/cli/lib/promptModules/cssPreprocessors.js
@@ -0,0 +1,46 @@
+module.exports = cli => {
+  cli.injectFeature({
+    name: 'CSS Pre-processors',
+    value: 'css-preprocessor',
+    description: 'Add support for CSS pre-processors like Sass, Less or Stylus',
+    link: 'https://cli.megalojs.org/guide/css.html'
+  })
+
+  const notice = 'PostCSS, Autoprefixer and CSS Modules are supported by default'
+
+  cli.injectPrompt({
+    name: 'cssPreprocessor',
+    when: answers => answers.features.includes('css-preprocessor'),
+    type: 'list',
+    message: `Pick a CSS pre-processor${process.env.MEGALO_CLI_API_MODE ? '' : ` (${notice})`}:`,
+    description: `${notice}.`,
+    choices: [
+      // In Vue CLI <= 3.3, the value of Sass option in 'sass' an means 'node-sass'.
+      // Considering the 'sass' package on NPM is actually for Dart Sass, we renamed it to 'node-sass'.
+      // In @megalo/cli-service there're still codes that accepts 'sass' as an option value, for compatibility reasons,
+      // and they're meant to be removed in v4.
+      // {
+      //   name: 'Sass/SCSS (with dart-sass)',
+      //   value: 'dart-sass'
+      // },
+      {
+        name: 'Sass/SCSS (with node-sass)',
+        value: 'node-sass'
+      },
+      {
+        name: 'Less',
+        value: 'less'
+      },
+      {
+        name: 'Stylus',
+        value: 'stylus'
+      }
+    ]
+  })
+
+  cli.onPromptComplete((answers, options) => {
+    if (answers.cssPreprocessor) {
+      options.cssPreprocessor = answers.cssPreprocessor
+    }
+  })
+}
diff --git a/packages/@megalo/cli/lib/promptModules/linter.js b/packages/@megalo/cli/lib/promptModules/linter.js
new file mode 100644
index 0000000..5eab46f
--- /dev/null
+++ b/packages/@megalo/cli/lib/promptModules/linter.js
@@ -0,0 +1,119 @@
+module.exports = cli => {
+  const chalk = require('chalk')
+  const { hasGit } = require('@megalo/cli-share-utils')
+
+  cli.injectFeature({
+    name: 'Linter / Formatter',
+    value: 'linter',
+    short: 'Linter',
+    description: 'Check and enforce code quality with ESLint or Prettier',
+    link: 'https://github.com/megalojs/megalo-cli/tree/dev/packages/%40megalo/cli-plugin-eslint',
+    plugins: ['eslint'],
+    checked: true
+  })
+
+  // cli.injectPrompt({
+  //   name: 'eslintConfig',
+  //   when: answers => answers.features.includes('linter'),
+  //   type: 'list',
+  //   message: 'Pick a linter / formatter config:',
+  //   description: 'Checking code errors and enforcing an homogeoneous code style is recommended.',
+  //   choices: answers => [
+  //     ...(
+  //       answers.features.includes('ts')
+  //         ? [{
+  //           name: `TSLint`,
+  //           value: 'tslint',
+  //           short: 'TSLint'
+  //         }]
+  //         : []
+  //     ),
+  //     {
+  //       name: 'ESLint with error prevention only',
+  //       value: 'base',
+  //       short: 'Basic'
+  //     },
+  //     {
+  //       name: 'ESLint + Airbnb config',
+  //       value: 'airbnb',
+  //       short: 'Airbnb'
+  //     },
+  //     {
+  //       name: 'ESLint + Standard config',
+  //       value: 'standard',
+  //       short: 'Standard'
+  //     },
+  //     {
+  //       name: 'ESLint + Prettier',
+  //       value: 'prettier',
+  //       short: 'Prettier'
+  //     }
+  //   ]
+  // })
+  // cli.injectPrompt({
+  //   name: 'eslintConfig',
+  //   when: answers => answers.features.includes('linter'),
+  //   type: 'list',
+  //   message: 'Pick a linter / formatter config:',
+  //   description: 'Checking code errors and enforcing an homogeoneous code style is recommended.',
+  //   choices: answers => [
+  //     ...(
+  //       answers.features.includes('ts')
+  //         ? [{
+  //           name: `TSLint`,
+  //           value: 'tslint',
+  //           short: 'TSLint'
+  //         }]
+  //         : []
+  //     ),
+  //     {
+  //       name: 'ESLint with error prevention only',
+  //       value: 'base',
+  //       short: 'Basic'
+  //     },
+  //     {
+  //       name: 'ESLint + Airbnb config',
+  //       value: 'airbnb',
+  //       short: 'Airbnb'
+  //     },
+  //     {
+  //       name: 'ESLint + Standard config',
+  //       value: 'standard',
+  //       short: 'Standard'
+  //     },
+  //     {
+  //       name: 'ESLint + Prettier',
+  //       value: 'prettier',
+  //       short: 'Prettier'
+  //     }
+  //   ]
+  // })
+
+  cli.injectPrompt({
+    name: 'lintOn',
+    message: 'Pick additional lint features:',
+    when: answers => answers.features.includes('linter'),
+    type: 'checkbox',
+    choices: [
+      {
+        name: 'Lint on save',
+        value: 'save',
+        checked: true
+      },
+      {
+        name: 'Lint and fix on commit' + (hasGit() ? '' : chalk.red(' (requires Git)')),
+        value: 'commit'
+      }
+    ]
+  })
+
+  cli.onPromptComplete((answers, options) => {
+    // if (answers.features.includes('linter') && answers.eslintConfig !== 'tslint') {
+    if (answers.features.includes('linter')) {
+      options.plugins['@megalo/cli-plugin-eslint'] = {
+        config: answers.eslintConfig,
+        lintOn: answers.lintOn
+      }
+    }
+  })
+}
diff --git a/packages/@megalo/cli/lib/promptModules/megaloapi.js b/packages/@megalo/cli/lib/promptModules/megaloapi.js
new file mode 100644
index 0000000..785c37b
--- /dev/null
+++ b/packages/@megalo/cli/lib/promptModules/megaloapi.js
@@ -0,0 +1,33 @@
+module.exports = cli => {
+  // cli.injectFeature({
+  //   name: 'needMegaloAPI',
+  //   value: 'megaloapi',
+  //   description: 'Need Megalo API support',
+  //   link: 'https://megalojs.org/'
+  // })
+
+  cli.injectPrompt({
+    name: 'needMegaloAPI',
+    // when: answers => answers.features.includes('megaloapi'),
+    type: 'list',
+    message: `Does project need Megalo API support?`,
+    description: `By using Megalo API, you do not need to care MiniProgram api support variations.`,
+    choices: [
+      {
+        name: 'No',
+        value: true
+      },
+      {
+        name: 'Yes',
+        value: false
+      }
+    ]
+  })
+
+  cli.onPromptComplete((answers, options) => {
+    // if (answers.features.includes('megaloapi') && answers.needMegaliAPI !== undefined) {
+    if (answers.needMegaliAPI !== undefined) {
+      options.megaloapi = answers.needMegaloAPI
+    }
+  })
+}
\ No newline at end of file
diff --git a/packages/@megalo/cli/lib/promptModules/px2rpx.js b/packages/@megalo/cli/lib/promptModules/px2rpx.js
new file mode 100644
index 0000000..6dc5b88
--- /dev/null
+++ b/packages/@megalo/cli/lib/promptModules/px2rpx.js
@@ -0,0 +1,33 @@
+module.exports = cli => {
+  // cli.injectFeature({
+  //   name: 'needPx2Rpx',
+  //   value: 'px2rpx',
+  //   description: 'Need px2rpx loader',
+  //   link: 'https://megalojs.org/'
+  // })
+
+  cli.injectPrompt({
+    name: 'needPx2Rpx',
+    // when: answers => answers.features.includes('px2rpx'),
+    type: 'list',
+    message: `Does project need Px2Rpx loader?`,
+    description: `By using Px2Rpx loader, you can use px in project.`,
+    choices: [
+      {
+        name: 'Yes',
+        value: true
+      },
+      {
+        name: 'No',
+        value: false
+      }
+    ]
+  })
+
+  cli.onPromptComplete((answers, options) => {
+    // if (answers.features.includes('px2rpx') && answers.needPx2Rpx !== undefined) {
+    if (answers.needPx2Rpx !== undefined) {
+      options.px2rpx = answers.needPx2Rpx
+    }
+  })
+}
\ No newline at end of file
diff --git a/packages/@megalo/cli/lib/promptModules/router.js b/packages/@megalo/cli/lib/promptModules/router.js
new file mode 100644
index 0000000..f64b6ec
--- /dev/null
+++ b/packages/@megalo/cli/lib/promptModules/router.js
@@ -0,0 +1,26 @@
+const chalk = require('chalk')
+
+module.exports = cli => {
+  cli.injectFeature({
+    name: 'Router',
+    value: 'router',
+    description: 'Structure the app with dynamic pages',
+    link: 'https://router.vuejs.org/'
+  })
+
+  cli.injectPrompt({
+    name: 'routerHistoryMode',
+    when: answers => answers.features.includes('router'),
+    type: 'confirm',
+    message: `Use history mode for router? ${chalk.yellow(`(Requires proper server setup for index fallback in production)`)}`,
+    description: `By using the HTML5 History API, the URLs don't need the '#' character anymore.`,
+    link: 'https://router.vuejs.org/guide/essentials/history-mode.html'
+  })
+
+  cli.onPromptComplete((answers, options) => {
+    if (answers.features.includes('router')) {
+      options.router = true
+      options.routerHistoryMode = answers.routerHistoryMode
+    }
+  })
+}
diff --git a/packages/@megalo/cli/lib/promptModules/typescript.js b/packages/@megalo/cli/lib/promptModules/typescript.js
new file mode 100644
index 0000000..b0231ef
--- /dev/null
+++ b/packages/@megalo/cli/lib/promptModules/typescript.js
@@ -0,0 +1,45 @@
+module.exports = cli => {
+  cli.injectFeature({
+    name: 'TypeScript',
+    value: 'ts',
+    short: 'TS',
+    description: 'Add support for the TypeScript language',
+    link: 'https://github.com/megalojs/megalo-cli/tree/dev/packages/%40megalo/cli-plugin-typescript',
+    plugins: ['typescript']
+  })
+
+  // cli.injectPrompt({
+  //   name: 'tsClassComponent',
+  //   when: answers => answers.features.includes('ts'),
+  //   type: 'confirm',
+  //   message: 'Use class-style component syntax?',
+  //   description: 'Use the @Component decorator on classes.',
+  //   link: 'https://megalojs.org/v2/guide/typescript.html#Class-Style-Megalo-Components',
+  //   default: true
+  // })
+
+  // cli.injectPrompt({
+  //   name: 'useTsWithBabel',
+  //   when: answers => answers.features.includes('ts'),
+  //   type: 'confirm',
+  //   message: 'Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)?',
+  //   description: 'It will output ES2015 and delegate the rest to Babel for auto polyfill based on browser targets.',
+  //   default: answers => answers.features.includes('babel')
+  // })
+
+  cli.onPromptComplete((answers, options) => {
+    if (answers.features.includes('ts')) {
+      const tsOptions = {
+        classComponent: answers.tsClassComponent
+      }
+      if (answers.eslintConfig === 'tslint') {
+        tsOptions.tsLint = true
+        tsOptions.lintOn = answers.lintOn
+      }
+      if (answers.useTsWithBabel) {
+        tsOptions.useTsWithBabel = true
+      }
+      options.plugins['@megalo/cli-plugin-typescript'] = tsOptions
+    }
+  })
+}
diff --git a/packages/@megalo/cli/lib/promptModules/vuex.js b/packages/@megalo/cli/lib/promptModules/vuex.js
new file mode 100644
index 0000000..0cad42e
--- /dev/null
+++ b/packages/@megalo/cli/lib/promptModules/vuex.js
@@ -0,0 +1,14 @@
+module.exports = cli => {
+  cli.injectFeature({
+    name: 'Vuex',
+    value: 'vuex',
+    description: 'Manage the app state with a centralized store',
+    link: 'https://vuex.vuejs.org/'
+  })
+
+  cli.onPromptComplete((answers, options) => {
+    if (answers.features.includes('vuex')) {
+      options.vuex = true
+    }
+  })
+}
diff --git a/packages/@megalo/cli/lib/utils/clearConsole.js b/packages/@megalo/cli/lib/utils/clearConsole.js
new file mode 100644
index 0000000..6c799ed
--- /dev/null
+++ b/packages/@megalo/cli/lib/utils/clearConsole.js
@@ -0,0 +1,34 @@
+const chalk = require('chalk')
+const semver = require('semver')
+const getVersions = require('./getVersions')
+const { clearConsole } = require('@megalo/cli-share-utils')
+
+exports.generateTitle = async function (checkUpdate) {
+  const { current, latest } = await getVersions()
+
+  let title = chalk.bold.blue(`Megalo CLI v${current}`)
+
+  if (process.env.MEGALO_CLI_TEST) {
+    title += ' ' + chalk.blue.bold('TEST')
+  }
+  if (process.env.MEGALO_CLI_DEBUG) {
+    title += ' ' + chalk.magenta.bold('DEBUG')
+  }
+//  if (checkUpdate && semver.gt(latest, current)) {
+//    if (process.env.MEGALO_CLI_API_MODE) {
+//      title += chalk.green(` 🌟️ Update available: ${latest}`)
+//    } else {
+//      title += chalk.green(`
+//┌────────────────────${`─`.repeat(latest.length)}──┐
+//│  Update available: ${latest}  │
+//└────────────────────${`─`.repeat(latest.length)}──┘`)
+//    }
+//  }
+
+  return title
+}
+
+exports.clearConsole = async function clearConsoleWithTitle (checkUpdate) {
+  const title = await exports.generateTitle(checkUpdate)
+  clearConsole(title)
+}
diff --git a/packages/@megalo/cli/lib/utils/codemods/injectImports.js b/packages/@megalo/cli/lib/utils/codemods/injectImports.js
new file mode 100644
index 0000000..fe95bd7
--- /dev/null
+++ b/packages/@megalo/cli/lib/utils/codemods/injectImports.js
@@ -0,0 +1,29 @@
+module.exports = function injectImports (fileInfo, api, { imports }) {
+  const j = api.jscodeshift
+  const root = j(fileInfo.source)
+
+  const toImportAST = i => j(`${i}\n`).nodes()[0].program.body[0]
+  const toImportHash = node => JSON.stringify({
+    specifiers: node.specifiers.map(s => s.local.name),
+    source: node.source.raw
+  })
+
+  const declarations = root.find(j.ImportDeclaration)
+  const importSet = new Set(declarations.nodes().map(toImportHash))
+  const nonDuplicates = node => !importSet.has(toImportHash(node))
+
+  const importASTNodes = imports.map(toImportAST).filter(nonDuplicates)
+
+  if (declarations.length) {
+    declarations
+      .at(-1)
+      // a tricky way to avoid blank line after the previous import
+      .forEach(({ node }) => delete node.loc)
+      .insertAfter(importASTNodes)
+  } else {
+    // no pre-existing import declarations
+    root.get().node.program.body.unshift(...importASTNodes)
+  }
+
+  return root.toSource()
+}
diff --git a/packages/@megalo/cli/lib/utils/codemods/injectOptions.js b/packages/@megalo/cli/lib/utils/codemods/injectOptions.js
new file mode 100644
index 0000000..2462442
--- /dev/null
+++ b/packages/@megalo/cli/lib/utils/codemods/injectOptions.js
@@ -0,0 +1,27 @@
+module.exports = function injectOptions (fileInfo, api, { injections }) {
+  const j = api.jscodeshift
+  const root = j(fileInfo.source)
+
+  const toPropertyAST = i => {
+    return j(`({${i}})`).nodes()[0].program.body[0].expression.properties[0]
+  }
+
+  const properties = root
+    .find(j.NewExpression, {
+      callee: { name: 'Vue' },
+      arguments: [{ type: 'ObjectExpression' }]
+    })
+    .map(path => path.get('arguments', 0))
+    .get()
+    .node
+    .properties
+
+  const toPropertyHash = p => `${p.key.name}: ${j(p.value).toSource()}`
+  const propertySet = new Set(properties.map(toPropertyHash))
+  const nonDuplicates = p => !propertySet.has(toPropertyHash(p))
+
+  // inject at index length - 1 as it's usually the render fn
+  properties.splice(-1, 0, ...injections.map(toPropertyAST).filter(nonDuplicates))
+
+  return root.toSource()
+}
diff --git a/packages/@megalo/cli/lib/utils/configTransforms.js b/packages/@megalo/cli/lib/utils/configTransforms.js
new file mode 100644
index 0000000..b4292f3
--- /dev/null
+++ b/packages/@megalo/cli/lib/utils/configTransforms.js
@@ -0,0 +1,76 @@
+const extendJSConfig = require('./extendJSConfig')
+const stringifyJS = require('./stringifyJS')
+const { loadModule } = require('@megalo/cli-share-utils')
+const merge = require('deepmerge')
+
+const mergeArrayWithDedupe = (a, b) => Array.from(new Set([...a, ...b]))
+const mergeOptions = {
+  arrayMerge: mergeArrayWithDedupe
+}
+
+const isObject = val => val && typeof val === 'object'
+
+const transformJS = {
+  read: ({ filename, context }) => {
+    try {
+      return loadModule(`./${filename}`, context, true)
+    } catch (e) {
+      return null
+    }
+  },
+  write: ({ value, existing, source }) => {
+    if (existing) {
+      // We merge only the modified keys
+      const changedData = {}
+      Object.keys(value).forEach(key => {
+        const originalValue = existing[key]
+        const newValue = value[key]
+        if (Array.isArray(originalValue) && Array.isArray(newValue)) {
+          changedData[key] = mergeArrayWithDedupe(originalValue, newValue)
+        } else if (isObject(originalValue) && isObject(newValue)) {
+          changedData[key] = merge(originalValue, newValue, mergeOptions)
+        } else {
+          changedData[key] = newValue
+        }
+      })
+      return extendJSConfig(changedData, source)
+    } else {
+      return `module.exports = ${stringifyJS(value, null, 2)}`
+    }
+  }
+}
+
+const transformJSON = {
+  read: ({ source }) => JSON.parse(source),
+  write: ({ value, existing }) => {
+    return JSON.stringify(merge(existing, value, mergeOptions), null, 2)
+  }
+}
+
+const transformYAML = {
+  read: ({ source }) => require('js-yaml').safeLoad(source),
+  write: ({ value, existing }) => {
+    return require('js-yaml').safeDump(merge(existing, value, mergeOptions), {
+      skipInvalid: true
+    })
+  }
+}
+
+const transformLines = {
+  read: ({ source }) => source.split('\n'),
+  write: ({ value, existing }) => {
+    if (existing) {
+      value = existing.concat(value)
+      // Dedupe
+      value = value.filter((item, index) => value.indexOf(item) === index)
+    }
+    return value.join('\n')
+  }
+}
+
+module.exports = {
+  js: transformJS,
+  json: transformJSON,
+  yaml: transformYAML,
+  lines: transformLines
+}
diff --git a/packages/@megalo/cli/lib/utils/createTools.js b/packages/@megalo/cli/lib/utils/createTools.js
new file mode 100644
index 0000000..ee3978d
--- /dev/null
+++ b/packages/@megalo/cli/lib/utils/createTools.js
@@ -0,0 +1,12 @@
+exports.getPromptModules = () => {
+  return [
+    // 'babel',
+    'typescript',
+    'cssPreprocessors',
+    // 'router',
+    'linter',
+    'vuex',
+    'px2rpx',
+    'megaloapi',
+  ].map(file => require(`../promptModules/${file}`))
+}
\ No newline at end of file
diff --git a/packages/@megalo/cli/lib/utils/enhanceErrorMessages.js b/packages/@megalo/cli/lib/utils/enhanceErrorMessages.js
new file mode 100644
index 0000000..60952f7
--- /dev/null
+++ b/packages/@megalo/cli/lib/utils/enhanceErrorMessages.js
@@ -0,0 +1,14 @@
+const program = require('commander')
+const chalk = require('chalk')
+
+module.exports = (methodName, log) => {
+  program.Command.prototype[methodName] = function (...args) {
+    if (methodName === 'unknownOption' && this._allowUnknownOption) {
+      return
+    }
+    this.outputHelp()
+    console.log(`  ` + chalk.red(log(...args)))
+    console.log()
+    process.exit(1)
+  }
+}
diff --git a/packages/@megalo/cli/lib/utils/extendJSConfig.js b/packages/@megalo/cli/lib/utils/extendJSConfig.js
new file mode 100644
index 0000000..3f14bc2
--- /dev/null
+++ b/packages/@megalo/cli/lib/utils/extendJSConfig.js
@@ -0,0 +1,70 @@
+module.exports = function extendJSConfig (value, source) {
+  const recast = require('recast')
+  const stringifyJS = require('./stringifyJS')
+
+  let exportsIdentifier = null
+
+  const ast = recast.parse(source)
+
+  recast.types.visit(ast, {
+    visitAssignmentExpression (path) {
+      const { node } = path
+      if (
+        node.left.type === 'MemberExpression' &&
+        node.left.object.name === 'module' &&
+        node.left.property.name === 'exports'
+      ) {
+        if (node.right.type === 'ObjectExpression') {
+          augmentExports(node.right)
+        } else if (node.right.type === 'Identifier') {
+          // do a second pass
+          exportsIdentifier = node.right.name
+        }
+        return false
+      }
+      this.traverse(path)
+    }
+  })
+
+  if (exportsIdentifier) {
+    recast.types.visit(ast, {
+      visitVariableDeclarator ({ node }) {
+        if (
+          node.id.name === exportsIdentifier &&
+          node.init.type === 'ObjectExpression'
+        ) {
+          augmentExports(node.init)
+        }
+        return false
+      }
+    })
+  }
+
+  function augmentExports (node) {
+    const valueAST = recast.parse(`(${stringifyJS(value, null, 2)})`)
+    const props = valueAST.program.body[0].expression.properties
+    const existingProps = node.properties
+    for (const prop of props) {
+      const isUndefinedProp =
+        prop.value.type === 'Identifier' && prop.value.name === 'undefined'
+
+      const existing = existingProps.findIndex(p => {
+        return !p.computed && p.key.name === prop.key.name
+      })
+      if (existing > -1) {
+        // replace
+        existingProps[existing].value = prop.value
+
+        // remove `undefined` props
+        if (isUndefinedProp) {
+          existingProps.splice(existing, 1)
+        }
+      } else if (!isUndefinedProp) {
+        // append
+        existingProps.push(prop)
+      }
+    }
+  }
+
+  return recast.print(ast).code
+}
diff --git a/packages/@megalo/cli/lib/utils/features.js b/packages/@megalo/cli/lib/utils/features.js
new file mode 100644
index 0000000..7642fc2
--- /dev/null
+++ b/packages/@megalo/cli/lib/utils/features.js
@@ -0,0 +1,28 @@
+const chalk = require('chalk')
+const { toShortPluginId } = require('@megalo/cli-share-utils')
+
+exports.getFeatures = (preset) => {
+  const features = []
+  if (preset.router) {
+    features.push('vue-router')
+  }
+  if (preset.vuex) {
+    features.push('vuex')
+  }
+  if (preset.cssPreprocessor) {
+    features.push(preset.cssPreprocessor)
+  }
+  const plugins = Object.keys(preset.plugins).filter(dep => {
+    return dep !== '@vue/cli-service'
+  })
+  features.push.apply(features, plugins)
+  return features
+}
+
+exports.formatFeatures = (preset, lead, joiner) => {
+  const features = exports.getFeatures(preset)
+  return features.map(dep => {
+    dep = toShortPluginId(dep)
+    return `${lead || ''}${chalk.yellow(dep)}`
+  }).join(joiner || ', ')
+}
diff --git a/packages/@megalo/cli/lib/utils/generateReadme.js b/packages/@megalo/cli/lib/utils/generateReadme.js
new file mode 100644
index 0000000..2f6240b
--- /dev/null
+++ b/packages/@megalo/cli/lib/utils/generateReadme.js
@@ -0,0 +1,35 @@
+const descriptions = {
+  build: 'Compiles and minifies for production',
+  serve: 'Compiles and hot-reloads for development',
+  lint: 'Lints and fixes files',
+  test: 'Run your tests',
+  'test:e2e': 'Run your end-to-end tests',
+  'test:unit': 'Run your unit tests'
+}
+
+function printScripts (pkg, packageManager) {
+  return Object.keys(pkg.scripts || {}).map(key => {
+    if (!descriptions[key]) return ''
+    return [
+      `\n### ${descriptions[key]}`,
+      '```',
+      `${packageManager} run ${key}`,
+      '```',
+      ''
+    ].join('\n')
+  }).join('')
+}
+
+module.exports = function generateReadme (pkg, packageManager) {
+  return [
+    `# ${pkg.name}\n`,
+    '## Project setup',
+    '```',
+    `${packageManager} install`,
+    '```',
+    printScripts(pkg, packageManager),
+    '### Customize configuration',
+    'See [Configuration Reference](https://cli.megalojs.org/config/).',
+    ''
+  ].join('\n')
+}
diff --git a/packages/@megalo/cli/lib/utils/getPackageVersion.js b/packages/@megalo/cli/lib/utils/getPackageVersion.js
new file mode 100644
index 0000000..de2963a
--- /dev/null
+++ b/packages/@megalo/cli/lib/utils/getPackageVersion.js
@@ -0,0 +1,26 @@
+const { request } = require('@megalo/cli-share-utils')
+
+module.exports = async function getPackageVersion (id, range = '') {
+  // const registry = (await require('./shouldUseTaobao')())
+  //   ? `https://registry.npm.taobao.org`
+  //   : `https://registry.npmjs.org`
+  // use registry api to fetch all packages under @megalo scope and return their latest versions
+  // https://registry.npmjs.org/-/v1/search?text=scope:megalo
+  // taobao registry does not support this api
+  // all packages' latest versions under @megalo are different
+  // and will update to vue-cli-version-marker in future
+  const registry = `https://registry.npmjs.org`
+
+  let result
+  try {
+    // result = await request.get(`${registry}/${encodeURIComponent(id).replace(/^%40/, '@')}/${range}`)
+    result = await request.get(`${registry}/-/v1/search?text=scope:${id}`)
+  } catch (e) {
+    return e
+  }
+  return result;
+  // fetch('https://registry.npmjs.com/vue-cli-version-marker/latest')
+  //   .then(resp => resp.json())
+  //   .then(res => console.log(res.version))
+  // 3.11.0
+}
diff --git a/packages/@megalo/cli/lib/utils/getVersions.js b/packages/@megalo/cli/lib/utils/getVersions.js
new file mode 100644
index 0000000..ecacd2f
--- /dev/null
+++ b/packages/@megalo/cli/lib/utils/getVersions.js
@@ -0,0 +1,70 @@
+const semver = require('semver')
+const { loadOptions, saveOptions } = require('../options')
+
+let sessionCached
+
+module.exports = async function getVersions () {
+  if (sessionCached) {
+    return sessionCached
+  }
+
+  let latest
+  const local = require(`../../package.json`).version
+  if (process.env.MEGALO_CLI_TEST || process.env.MEGALO_CLI_DEBUG) {
+    return (sessionCached = {
+      current: local,
+      latest: local
+    })
+  }
+
+  const { latestVersion = local, lastChecked = 0 } = loadOptions()
+  const cached = latestVersion
+  const daysPassed = (Date.now() - lastChecked) / (60 * 60 * 1000 * 24)
+
+  if (daysPassed > 1) {
+    // if we haven't check for a new version in a day, wait for the check
+    // before proceeding
+    latest = await getAndCacheLatestVersion(cached)
+  } else {
+    // Otherwise, do a check in the background. If the result was updated,
+    // it will be used for the next 24 hours.
+    getAndCacheLatestVersion(cached)
+    latest = cached
+  }
+
+  return (sessionCached = {
+    current: local,
+    latest
+  })
+}
+
+// fetch the latest version and save it on disk
+// so that it is available immediately next time
+async function getAndCacheLatestVersion (cached) {
+  const getPackageVersion = require('./getPackageVersion')
+  // const res = await getPackageVersion('vue-cli-version-marker', 'latest')
+  const res = await getPackageVersion('megalo')
+  if (res.statusCode === 200) {
+    // const { version } = res.body
+    const { objects: subpackages } = res.body
+    const subpackageVersions = subpackages.reduce((subpackageVersions, info) => {
+      const { name, version } = info.package
+      subpackageVersions[name] = version
+      // subpackageVersions[name.slice(8)] = version // skip @megalo prefix
+      return subpackageVersions
+    }, {})
+    // if (semver.valid(version) && version !== cached) {
+    //   saveOptions({ latestVersion: version, lastChecked: Date.now() })
+    //   return version
+    // }
+    if (allVersionsValid(subpackageVersions) && subpackageVersions !== cached) {
+      saveOptions({ latestVersion: subpackageVersions, lastChecked: Date.now() })
+      return subpackageVersions
+    }
+  }
+  return cached
+}
+
+function allVersionsValid(versions) {
+  return Object.keys(versions).every(name => semver.valid(versions[name]))
+}
diff --git a/packages/@megalo/cli/lib/utils/inferRootOptions.js b/packages/@megalo/cli/lib/utils/inferRootOptions.js
new file mode 100644
index 0000000..133f3f9
--- /dev/null
+++ b/packages/@megalo/cli/lib/utils/inferRootOptions.js
@@ -0,0 +1,34 @@
+// Infer rootOptions for individual generators being invoked
+// in an existing project.
+
+module.exports = function inferRootOptions (pkg) {
+  const rootOptions = {}
+  const deps = Object.assign({}, pkg.dependencies, pkg.devDependencies)
+
+  // projectName
+  rootOptions.projectName = pkg.name
+
+  // router
+  if ('vue-router' in deps) {
+    rootOptions.router = true
+  }
+
+  // vuex
+  if ('vuex' in deps) {
+    rootOptions.vuex = true
+  }
+
+  // cssPreprocessors
+  if ('sass' in deps) {
+    rootOptions.cssPreprocessor = 'dart-sass'
+  } else if ('node-sass' in deps) {
+    // TODO: change to 'node-sass' in v4
+    rootOptions.cssPreprocessor = 'sass'
+  } else if ('less-loader' in deps) {
+    rootOptions.cssPreprocessor = 'less'
+  } else if ('stylus-loader' in deps) {
+    rootOptions.cssPreprocessor = 'stylus'
+  }
+
+  return rootOptions
+}
diff --git a/packages/@megalo/cli/lib/utils/installDeps.js b/packages/@megalo/cli/lib/utils/installDeps.js
new file mode 100644
index 0000000..e1dfe5c
--- /dev/null
+++ b/packages/@megalo/cli/lib/utils/installDeps.js
@@ -0,0 +1,255 @@
+const EventEmitter = require('events')
+const chalk = require('chalk')
+const execa = require('execa')
+const readline = require('readline')
+const registries = require('./registries')
+const shouldUseTaobao = require('./shouldUseTaobao')
+
+const debug = require('debug')('megalo-cli:install')
+
+const taobaoDistURL = 'https://npm.taobao.org/dist'
+
+const supportPackageManagerList = ['npm', 'yarn', 'pnpm']
+
+const packageManagerConfig = {
+  npm: {
+    installDeps: ['install', '--loglevel', 'error'],
+    installPackage: ['install', '--loglevel', 'error'],
+    uninstallPackage: ['uninstall', '--loglevel', 'error'],
+    updatePackage: ['update', '--loglevel', 'error']
+  },
+
+  pnpm: {
+    installDeps: ['install', '--loglevel', 'error', '--shamefully-flatten'],
+    installPackage: ['install', '--loglevel', 'error'],
+    uninstallPackage: ['uninstall', '--loglevel', 'error'],
+    updatePackage: ['update', '--loglevel', 'error']
+  },
+
+  yarn: {
+    installDeps: [],
+    installPackage: ['add'],
+    uninstallPackage: ['remove'],
+    updatePackage: ['upgrade']
+  }
+}
+
+class InstallProgress extends EventEmitter {
+  constructor () {
+    super()
+
+    this._progress = -1
+  }
+
+  get progress () {
+    return this._progress
+  }
+
+  set progress (value) {
+    this._progress = value
+    this.emit('progress', value)
+  }
+
+  get enabled () {
+    return this._progress !== -1
+  }
+
+  set enabled (value) {
+    this.progress = value ? 0 : -1
+  }
+
+  log (value) {
+    this.emit('log', value)
+  }
+}
+
+const progress = exports.progress = new InstallProgress()
+
+function toStartOfLine (stream) {
+  if (!chalk.supportsColor) {
+    stream.write('\r')
+    return
+  }
+  readline.cursorTo(stream, 0)
+}
+
+function checkPackageManagerIsSupported (command) {
+  if (supportPackageManagerList.indexOf(command) === -1) {
+    throw new Error(`Unknown package manager: ${command}`)
+  }
+}
+
+function renderProgressBar (curr, total) {
+  const ratio = Math.min(Math.max(curr / total, 0), 1)
+  const bar = ` ${curr}/${total}`
+  const availableSpace = Math.max(0, process.stderr.columns - bar.length - 3)
+  const width = Math.min(total, availableSpace)
+  const completeLength = Math.round(width * ratio)
+  const complete = `#`.repeat(completeLength)
+  const incomplete = `-`.repeat(width - completeLength)
+  toStartOfLine(process.stderr)
+  process.stderr.write(`[${complete}${incomplete}]${bar}`)
+}
+
+async function addRegistryToArgs (command, args, cliRegistry) {
+  const altRegistry = (
+    cliRegistry || (
+      (await shouldUseTaobao(command))
+        ? registries.taobao
+        : null
+    )
+  )
+
+  if (altRegistry) {
+    args.push(`--registry=${altRegistry}`)
+    if (altRegistry === registries.taobao) {
+      args.push(`--disturl=${taobaoDistURL}`)
+    }
+  }
+}
+
+function executeCommand (command, args, targetDir) {
+  return new Promise((resolve, reject) => {
+    const apiMode = process.env.MEGALO_CLI_API_MODE
+
+    progress.enabled = false
+
+    if (apiMode) {
+      if (command === 'npm') {
+        // TODO when this is supported
+      } else if (command === 'yarn') {
+        args.push('--json')
+      }
+    }
+
+    const child = execa(command, args, {
+      cwd: targetDir,
+      stdio: ['inherit', apiMode ? 'pipe' : 'inherit', !apiMode && command === 'yarn' ? 'pipe' : 'inherit']
+    })
+
+    if (apiMode) {
+      let progressTotal = 0
+      let progressTime = Date.now()
+      child.stdout.on('data', buffer => {
+        let str = buffer.toString().trim()
+        if (str && command === 'yarn' && str.indexOf('"type":') !== -1) {
+          const newLineIndex = str.lastIndexOf('\n')
+          if (newLineIndex !== -1) {
+            str = str.substr(newLineIndex)
+          }
+          try {
+            const data = JSON.parse(str)
+            if (data.type === 'step') {
+              progress.enabled = false
+              progress.log(data.data.message)
+            } else if (data.type === 'progressStart') {
+              progressTotal = data.data.total
+            } else if (data.type === 'progressTick') {
+              const time = Date.now()
+              if (time - progressTime > 20) {
+                progressTime = time
+                progress.progress = data.data.current / progressTotal
+              }
+            } else {
+              progress.enabled = false
+            }
+          } catch (e) {
+            console.error(e)
+            console.log(str)
+          }
+        } else {
+          process.stdout.write(buffer)
+        }
+      })
+    } else {
+      // filter out unwanted yarn output
+      if (command === 'yarn') {
+        child.stderr.on('data', buf => {
+          const str = buf.toString()
+          if (/warning/.test(str)) {
+            return
+          }
+
+          // progress bar
+          const progressBarMatch = str.match(/\[.*\] (\d+)\/(\d+)/)
+          if (progressBarMatch) {
+            // since yarn is in a child process, it's unable to get the width of
+            // the terminal. reimplement the progress bar ourselves!
+            renderProgressBar(progressBarMatch[1], progressBarMatch[2])
+            return
+          }
+
+          process.stderr.write(buf)
+        })
+      }
+    }
+
+    child.on('close', code => {
+      if (code !== 0) {
+        reject(`command failed: ${command} ${args.join(' ')}`)
+        return
+      }
+      resolve()
+    })
+  })
+}
+
+exports.installDeps = async function installDeps (targetDir, command, cliRegistry) {
+  checkPackageManagerIsSupported(command)
+
+  const args = packageManagerConfig[command].installDeps
+
+  await addRegistryToArgs(command, args, cliRegistry)
+
+  debug(`command: `, command)
+  debug(`args: `, args)
+
+  await executeCommand(command, args, targetDir)
+}
+
+exports.installPackage = async function (targetDir, command, cliRegistry, packageName, dev = true) {
+  checkPackageManagerIsSupported(command)
+
+  const args = packageManagerConfig[command].installPackage
+
+  if (dev) args.push('-D')
+
+  await addRegistryToArgs(command, args, cliRegistry)
+
+  args.push(packageName)
+
+  debug(`command: `, command)
+  debug(`args: `, args)
+
+  await executeCommand(command, args, targetDir)
+}
+
+exports.uninstallPackage = async function (targetDir, command, cliRegistry, packageName) {
+  checkPackageManagerIsSupported(command)
+
+  const args = packageManagerConfig[command].uninstallPackage
+
+  await addRegistryToArgs(command, args, cliRegistry)
+
+  args.push(packageName)
+
+  debug(`command: `, command)
+  debug(`args: `, args)
+
+  await executeCommand(command, args, targetDir)
+}
+
+exports.updatePackage = async function (targetDir, command, cliRegistry, packageName) {
+  checkPackageManagerIsSupported(command)
+
+  const args = packageManagerConfig[command].updatePackage
+
+  await addRegistryToArgs(command, args, cliRegistry)
+
+  packageName.split(' ').forEach(name => args.push(name))
+
+  debug(`command: `, command)
+  debug(`args: `, args)
+
+  await executeCommand(command, args, targetDir)
+}
diff --git a/packages/@megalo/cli/lib/utils/linkBin.js b/packages/@megalo/cli/lib/utils/linkBin.js
new file mode 100644
index 0000000..4903cd9
--- /dev/null
+++ b/packages/@megalo/cli/lib/utils/linkBin.js
@@ -0,0 +1,21 @@
+// cross-platform executable link, mostly for Windows
+// this file is dev-only.
+
+const fs = require('fs-extra')
+const path = require('path')
+const cmdShim = require('util').promisify(require('cmd-shim'))
+
+exports.linkBin = async (src, dest) => {
+  if (!process.env.MEGALO_CLI_TEST && !process.env.MEGALO_CLI_DEBUG) {
+    throw new Error(`linkBin should only be used during tests or debugging.`)
+  }
+  if (process.platform === 'win32' && !process.env.CI) {
+    // not doing mutex lock because this is only used in dev and the
+    // src will not be modified
+    await cmdShim(src, dest)
+  } else {
+    await fs.ensureDir(path.dirname(dest))
+    await fs.symlink(src, dest)
+    await fs.chmod(dest, '755')
+  }
+}
diff --git a/packages/@megalo/cli/lib/utils/loadCommand.js b/packages/@megalo/cli/lib/utils/loadCommand.js
new file mode 100644
index 0000000..8c26f7f
--- /dev/null
+++ b/packages/@megalo/cli/lib/utils/loadCommand.js
@@ -0,0 +1,36 @@
+module.exports = function loadCommand (commandName, moduleName) {
+  const isNotFoundError = err => {
+    return err.message.match(/Cannot find module/)
+  }
+  try {
+    return require(moduleName)
+  } catch (err) {
+    if (isNotFoundError(err)) {
+      try {
+        return require('import-global')(moduleName)
+      } catch (err2) {
+        if (isNotFoundError(err2)) {
+          const chalk = require('chalk')
+          const { hasYarn, hasPnpm3OrLater } = require('@megalo/cli-shared-utils')
+          let installCommand = `npm install -g`
+          if (hasYarn()) {
+            installCommand = `yarn global add`
+          } else if (hasPnpm3OrLater()) {
+            installCommand = `pnpm install -g`
+          }
+          console.log()
+          console.log(
+            `  Command ${chalk.cyan(`vue ${commandName}`)} requires a global addon to be installed.\n` +
+            `  Please run ${chalk.cyan(`${installCommand} ${moduleName}`)} and try again.`
+          )
+          console.log()
+          process.exit(1)
+        } else {
+          throw err2
+        }
+      }
+    } else {
+      throw err
+    }
+  }
+}
diff --git a/packages/@megalo/cli/lib/utils/loadLocalPreset.js b/packages/@megalo/cli/lib/utils/loadLocalPreset.js
new file mode 100644
index 0000000..14b3cb7
--- /dev/null
+++ b/packages/@megalo/cli/lib/utils/loadLocalPreset.js
@@ -0,0 +1,13 @@
+const fs = require('fs-extra')
+const loadPresetFromDir = require('./loadPresetFromDir')
+
+module.exports = async function loadLocalPreset (path) {
+  const stats = fs.statSync(path)
+  if (stats.isFile()) {
+    return await fs.readJson(path)
+  } else if (stats.isDirectory()) {
+    return await loadPresetFromDir(path)
+  } else {
+    throw new Error(`Invalid local preset path: ${path}`)
+  }
+}
diff --git a/packages/@megalo/cli/lib/utils/loadPresetFromDir.js b/packages/@megalo/cli/lib/utils/loadPresetFromDir.js
new file mode 100644
index 0000000..096368b
--- /dev/null
+++ b/packages/@megalo/cli/lib/utils/loadPresetFromDir.js
@@ -0,0 +1,22 @@
+const path = require('path')
+const fs = require('fs-extra')
+
+module.exports = async function loadPresetFromDir (dir) {
+  const presetPath = path.join(dir, 'preset.json')
+  if (!fs.existsSync(presetPath)) {
+    throw new Error('remote / local preset does not contain preset.json!')
+  }
+  const preset = await fs.readJson(presetPath)
+
+  // if the preset dir contains generator.js or generator/index.js, we will inject it as a hidden
+  // plugin so it will be invoked by the generator.
+  const hasGenerator = fs.existsSync(path.join(dir, 'generator.js')) || fs.existsSync(path.join(dir, 'generator/index.js'))
+  if (hasGenerator) {
+    (preset.plugins || (preset.plugins = {}))[dir.replace(/[\/]$/, '')] = {
+      _isPreset: true,
+      prompts: true
+    }
+  }
+
+  return preset
+}
diff --git a/packages/@megalo/cli/lib/utils/loadRemotePreset.js b/packages/@megalo/cli/lib/utils/loadRemotePreset.js
new file mode 100644
index 0000000..3fb8ed8
--- /dev/null
+++ b/packages/@megalo/cli/lib/utils/loadRemotePreset.js
@@ -0,0 +1,24 @@
+const fs = require('fs-extra')
+const loadPresetFromDir = require('./loadPresetFromDir')
+
+module.exports = async function fetchRemotePreset (name, clone) {
+  const os = require('os')
+  const path = require('path')
+  const download = require('download-git-repo')
+  const tmpdir = path.join(os.tmpdir(), 'megalo-cli')
+
+  // clone will fail if tmpdir already exists
+  // https://github.com/flipxfx/download-git-repo/issues/41
+  if (clone) {
+    await fs.remove(tmpdir)
+  }
+
+  await new Promise((resolve, reject) => {
+    download(name, tmpdir, { clone }, err => {
+      if (err) return reject(err)
+      resolve()
+    })
+  })
+
+  return await loadPresetFromDir(tmpdir)
+}
diff --git a/packages/@megalo/cli/lib/utils/mergeDeps.js b/packages/@megalo/cli/lib/utils/mergeDeps.js
new file mode 100644
index 0000000..473a4d3
--- /dev/null
+++ b/packages/@megalo/cli/lib/utils/mergeDeps.js
@@ -0,0 +1,64 @@
+const semver = require('semver')
+const { warn } = require('@megalo/cli-share-utils')
+
+module.exports = function resolveDeps (generatorId, to, from, sources) {
+  const res = Object.assign({}, to)
+  for (const name in from) {
+    const r1 = to[name]
+    const r2 = from[name]
+    const sourceGeneratorId = sources[name]
+    const isValidURI = r2.match(/^(?:file|git|git\+ssh|git\+http|git\+https|git\+file|https?):/) != null
+    const isValidGitHub = r2.match(/^[^/]+\/[^/]+/) != null
+
+    // if they are the same, do nothing. Helps when non semver type deps are used
+    if (r1 === r2) continue
+
+    if (!isValidGitHub && !isValidURI && !semver.validRange(r2)) {
+      warn(
+        `invalid version range for dependency "${name}":\n\n` +
+        `- ${r2} injected by generator "${generatorId}"`
+      )
+      continue
+    }
+
+    if (!r1) {
+      res[name] = r2
+      sources[name] = generatorId
+    } else {
+      const r1semver = extractSemver(r1)
+      const r2semver = extractSemver(r2)
+      const r = tryGetNewerRange(r1semver, r2semver)
+      const didGetNewer = !!r
+      // if failed to infer newer version, use existing one because it's likely
+      // built-in
+      res[name] = didGetNewer ? injectSemver(r2, r) : r1
+      // if changed, update source
+      if (res[name] === r2) {
+        sources[name] = generatorId
+      }
+      // warn incompatible version requirements
+      if (!semver.validRange(r1semver) || !semver.validRange(r2semver) || !semver.intersects(r1semver, r2semver)) {
+        warn(
+          `conflicting versions for project dependency "${name}":\n\n` +
+          `- ${r1} injected by generator "${sourceGeneratorId}"\n` +
+          `- ${r2} injected by generator "${generatorId}"\n\n` +
+          `Using ${didGetNewer ? `newer ` : ``}version (${res[name]}), but this may cause build errors.`
+        )
+      }
+    }
+  }
+  return res
+}
+
+const leadRE = /^(~|\^|>=?)/
+const rangeToVersion = r => r.replace(leadRE, '').replace(/x/g, '0')
+const extractSemver = r => r.replace(/^.+#semver:/, '')
+const injectSemver = (r, v) => semver.validRange(r) ? v : r.replace(/#semver:.+$/, `#semver:${v}`)
+
+function tryGetNewerRange (r1, r2) {
+  const v1 = rangeToVersion(r1)
+  const v2 = rangeToVersion(r2)
+  if (semver.valid(v1) && semver.valid(v2)) {
+    return semver.gt(v1, v2) ? r1 : r2
+  }
+}
diff --git a/packages/@megalo/cli/lib/utils/normalizeFilePaths.js b/packages/@megalo/cli/lib/utils/normalizeFilePaths.js
new file mode 100644
index 0000000..afd770d
--- /dev/null
+++ b/packages/@megalo/cli/lib/utils/normalizeFilePaths.js
@@ -0,0 +1,12 @@
+const slash = require('slash')
+
+module.exports = function normalizeFilePaths (files) {
+  Object.keys(files).forEach(file => {
+    const normalized = slash(file)
+    if (file !== normalized) {
+      files[normalized] = files[file]
+      delete files[file]
+    }
+  })
+  return files
+}
diff --git a/packages/@megalo/cli/lib/utils/rcPath.js b/packages/@megalo/cli/lib/utils/rcPath.js
new file mode 100644
index 0000000..60bd867
--- /dev/null
+++ b/packages/@megalo/cli/lib/utils/rcPath.js
@@ -0,0 +1,47 @@
+const fs = require('fs-extra')
+const os = require('os')
+const path = require('path')
+
+const xdgConfigPath = file => {
+  const xdgConfigHome = process.env.XDG_CONFIG_HOME
+  if (xdgConfigHome) {
+    const rcDir = path.join(xdgConfigHome, 'megalo')
+    if (!fs.existsSync(rcDir)) {
+      fs.ensureDirSync(rcDir, 0o700)
+    }
+    return path.join(rcDir, file)
+  }
+}
+
+// migration for 3.0.0-rc.7
+// we introduced a change storing .megalorc in AppData, but the benefit isn't
+// really obvious so we are reverting it to keep consistency across OSes
+const migrateWindowsConfigPath = file => {
+  if (process.platform !== 'win32') {
+    return
+  }
+  const appData = process.env.APPDATA
+  if (appData) {
+    const rcDir = path.join(appData, 'megalo')
+    const rcFile = path.join(rcDir, file)
+    const properRcFile = path.join(os.homedir(), file)
+    if (fs.existsSync(rcFile)) {
+      try {
+        if (fs.existsSync(properRcFile)) {
+          fs.removeSync(rcFile)
+        } else {
+          fs.moveSync(rcFile, properRcFile)
+        }
+      } catch (e) {}
+    }
+  }
+}
+
+exports.getRcPath = file => {
+  migrateWindowsConfigPath(file)
+  return (
+    process.env.MEGALO_CLI_CONFIG_PATH ||
+    xdgConfigPath(file) ||
+    path.join(os.homedir(), file)
+  )
+}
diff --git a/packages/@megalo/cli/lib/utils/registries.js b/packages/@megalo/cli/lib/utils/registries.js
new file mode 100644
index 0000000..70352aa
--- /dev/null
+++ b/packages/@megalo/cli/lib/utils/registries.js
@@ -0,0 +1,8 @@
+const registries = {
+  npm: 'https://registry.npmjs.org',
+  yarn: 'https://registry.yarnpkg.com',
+  taobao: 'https://registry.npm.taobao.org',
+  pnpm: 'https://registry.npmjs.org'
+}
+
+module.exports = registries
diff --git a/packages/@megalo/cli/lib/utils/runCodemod.js b/packages/@megalo/cli/lib/utils/runCodemod.js
new file mode 100644
index 0000000..22fbc82
--- /dev/null
+++ b/packages/@megalo/cli/lib/utils/runCodemod.js
@@ -0,0 +1,6 @@
+const jscodeshift = require('jscodeshift')
+const adapt = require('vue-jscodeshift-adapter')
+
+module.exports = function runCodemod (transform, fileInfo, options) {
+  return adapt(transform)(fileInfo, { jscodeshift }, options || {})
+}
diff --git a/packages/@megalo/cli/lib/utils/setupDevProject.js b/packages/@megalo/cli/lib/utils/setupDevProject.js
new file mode 100644
index 0000000..71bf414
--- /dev/null
+++ b/packages/@megalo/cli/lib/utils/setupDevProject.js
@@ -0,0 +1,11 @@
+// dev only
+
+const path = require('path')
+const { linkBin } = require('./linkBin')
+
+module.exports = function setupDevProject (targetDir) {
+  return linkBin(
+    require.resolve('@megalo/cli-service/bin/megalo-cli-service'),
+    path.join(targetDir, 'node_modules', '.bin', 'megalo-cli-service')
+  )
+}
diff --git a/packages/@megalo/cli/lib/utils/shouldUseTaobao.js b/packages/@megalo/cli/lib/utils/shouldUseTaobao.js
new file mode 100644
index 0000000..3d842f0
--- /dev/null
+++ b/packages/@megalo/cli/lib/utils/shouldUseTaobao.js
@@ -0,0 +1,80 @@
+const chalk = require('chalk')
+const execa = require('execa')
+const { hasYarn, request } = require('@megalo/cli-share-utils')
+const inquirer = require('inquirer')
+const registries = require('./registries')
+const { loadOptions, saveOptions } = require('../options')
+
+async function ping (registry) {
+  await request.get(`${registry}/vue-cli-version-marker/latest`)
+  return registry
+}
+
+function removeSlash (url) {
+  return url.replace(/\/$/, '')
+}
+
+let checked
+let result
+
+module.exports = async function shouldUseTaobao (command) {
+  if (!command) {
+    command = hasYarn() ? 'yarn' : 'npm'
+  }
+
+  // ensure this only gets called once.
+  if (checked) return result
+  checked = true
+
+  // previously saved preference
+  const saved = loadOptions().useTaobaoRegistry
+  if (typeof saved === 'boolean') {
+    return (result = saved)
+  }
+
+  const save = val => {
+    result = val
+    saveOptions({ useTaobaoRegistry: val })
+    return val
+  }
+
+  const userCurrent = (await execa(command, ['config', 'get', 'registry'])).stdout
+  const defaultRegistry = registries[command]
+
+  if (removeSlash(userCurrent) !== removeSlash(defaultRegistry)) {
+    // user has configured custom registry, respect that
+    return save(false)
+  }
+
+  let faster
+  try {
+    faster = await Promise.race([
+      ping(defaultRegistry),
+      ping(registries.taobao)
+    ])
+  } catch (e) {
+    return save(false)
+  }
+
+  if (faster !== registries.taobao) {
+    // default is already faster
+    return save(false)
+  }
+
+  if (process.env.MEGALO_CLI_API_MODE) {
+    return save(true)
+  }
+
+  // ask and save preference
+  const { useTaobaoRegistry } = await inquirer.prompt([
+    {
+      name: 'useTaobaoRegistry',
+      type: 'confirm',
+      message: chalk.yellow(
+        ` Your connection to the default ${command} registry seems to be slow.\n` +
+          `   Use ${chalk.cyan(registries.taobao)} for faster installation?`
+      )
+    }
+  ])
+  return save(useTaobaoRegistry)
+}
diff --git a/packages/@megalo/cli/lib/utils/sortObject.js b/packages/@megalo/cli/lib/utils/sortObject.js
new file mode 100644
index 0000000..7b4dd1a
--- /dev/null
+++ b/packages/@megalo/cli/lib/utils/sortObject.js
@@ -0,0 +1,20 @@
+module.exports = function sortObject (obj, keyOrder, dontSortByUnicode) {
+  if (!obj) return
+  const res = {}
+
+  if (keyOrder) {
+    keyOrder.forEach(key => {
+      res[key] = obj[key]
+      delete obj[key]
+    })
+  }
+
+  const keys = Object.keys(obj)
+
+  !dontSortByUnicode && keys.sort()
+  keys.forEach(key => {
+    res[key] = obj[key]
+  })
+
+  return res
+}
diff --git a/packages/@megalo/cli/lib/utils/stringifyJS.js b/packages/@megalo/cli/lib/utils/stringifyJS.js
new file mode 100644
index 0000000..9f90c0f
--- /dev/null
+++ b/packages/@megalo/cli/lib/utils/stringifyJS.js
@@ -0,0 +1,9 @@
+module.exports = function stringifyJS (value) {
+  const stringify = require('javascript-stringify')
+  return stringify(value, (val, indent, stringify) => {
+    if (val && val.__expression) {
+      return val.__expression
+    }
+    return stringify(val)
+  }, 2)
+}
diff --git a/packages/@megalo/cli/lib/utils/writeFileTree.js b/packages/@megalo/cli/lib/utils/writeFileTree.js
new file mode 100644
index 0000000..6c757f2
--- /dev/null
+++ b/packages/@megalo/cli/lib/utils/writeFileTree.js
@@ -0,0 +1,27 @@
+const fs = require('fs-extra')
+const path = require('path')
+
+function deleteRemovedFiles (directory, newFiles, previousFiles) {
+  // get all files that are not in the new filesystem and are still existing
+  const filesToDelete = Object.keys(previousFiles)
+    .filter(filename => !newFiles[filename])
+
+  // delete each of these files
+  return Promise.all(filesToDelete.map(filename => {
+    return fs.unlink(path.join(directory, filename))
+  }))
+}
+
+module.exports = async function writeFileTree (dir, files, previousFiles) {
+  if (process.env.MEGALO_CLI_SKIP_WRITE) {
+    return
+  }
+  if (previousFiles) {
+    await deleteRemovedFiles(dir, files, previousFiles)
+  }
+  Object.keys(files).forEach((name) => {
+    const filePath = path.join(dir, name)
+    fs.ensureDirSync(path.dirname(filePath))
+    fs.writeFileSync(filePath, files[name])
+  })
+}
diff --git a/packages/@megalo/cli/package.json b/packages/@megalo/cli/package.json
index 18312e3..ff0f42c 100644
--- a/packages/@megalo/cli/package.json
+++ b/packages/@megalo/cli/package.json
@@ -8,7 +8,7 @@
     "megalo-cli"
   ],
   "bin": {
-    "megalo": "./cli.js"
+    "megalo": "./bin/megalo.js"
   },
   "repository": {
     "type": "git",
@@ -22,9 +22,7 @@
   "author": "zwwill <zwwill7@163.com> (github.com/zwwill)",
   "license": "MIT",
   "files": [
-    "saofile.js",
-    "cli.js",
-    "templates",
+    "lib",
     "util"
   ],
   "scripts": {
@@ -32,9 +30,28 @@
   },
   "dependencies": {
     "chalk": "^2.4.1",
-    "compare-versions": "^3.4.0",
     "execa": "^1.0.0",
-    "latest-version": "^4.0.0",
-    "sao": "^1.6.1"
+    "commander": "^2.20.0",
+    "compare-versions": "^3.4.0",
+    "@megalo/cli-service": "^1.0.0-beta.2",
+    "@megalo/cli-share-utils": "^1.0.0-beta.2",
+    "deepmerge": "^4.0.0",
+    "didyoumean": "^1.2.1",
+    "globby": "^10.0.1",
+    "inquirer": "^7.0.0",
+    "isbinaryfile": "^4.0.2",
+    "javascript-stringify": "^1.6.0",
+    "js-yaml": "^3.13.1",
+    "jscodeshift": "^0.6.4",
+    "lodash.clonedeep": "^4.5.0",
+    "resolve": "^1.12.0",
+    "semver": "^6.3.0",
+    "slash": "^3.0.0",
+    "validate-npm-package-name": "^3.0.0",
+    "vue-jscodeshift-adapter": "^2.0.2",
+    "yaml-front-matter": "^4.0.0"
+  },
+  "engines": {
+    "node": ">=8.9"
   }
 }
diff --git a/packages/@megalo/cli/saofile.js b/packages/@megalo/cli/saofile.js
deleted file mode 100644
index 93d8000..0000000
--- a/packages/@megalo/cli/saofile.js
+++ /dev/null
@@ -1,183 +0,0 @@
-const path = require('path')
-const execa = require('execa')
-const when = (condition, value, fallback) => (condition ? value : fallback)
-
-module.exports = {
-  prompts () {
-    return [
-      {
-        name: 'features',
-        message: 'Check the features needed for your project:',
-        type: 'checkbox',
-        default: ['css-pre-processors', 'eslint'],
-        choices: [
-          {
-            name: 'Typescript',
-            value: 'typescript'
-          },
-          {
-            name: 'CSS Pre-processors',
-            value: 'css-pre-processors'
-          },
-          {
-            name: 'Eslint (check and format code)',
-            value: 'eslint'
-          },
-          {
-            name: 'Vuex',
-            value: 'vuex'
-          }
-        ]
-      },
-      {
-        name: 'cssPreset',
-        message: 'Choose CSS Pre-processors',
-        type: 'list',
-        choices: [
-          {
-            name: 'Sass/SCSS',
-            value: 'scss'
-          },
-          {
-            name: 'Less',
-            value: 'less'
-          },
-          {
-            name: 'Stylus',
-            value: 'stylus'
-          }
-        ],
-        when: ({ features }) => features.includes('css-pre-processors')
-      },
-      {
-        name: 'needPx2Rpx',
-        message: 'Need px2rpx loader',
-        type: 'list',
-        choices: ['Yes', 'No']
-      },
-      {
-        name: 'needMegaloAPI',
-        message: 'Need megalo api',
-        type: 'list',
-        choices: ['No', 'Yes']
-      }
-    ]
-  },
-  templateData () {
-    return {
-      projectName: this.outFolder
-    }
-  },
-  actions () {
-    const { features } = this.answers
-    return [
-      {
-        type: 'add',
-        templateDir: `templates/${features.includes('typescript') ? 'typescript' : 'main'}`,
-        files: '**',
-        filters: {
-          'eslint*': features.includes('eslint'),
-          'src/store/**/*': features.includes('vuex'),
-          'src/pages/vuex/**/*': features.includes('vuex')
-        }
-      },
-      {
-        type: 'move',
-        patterns: {
-          'gitignore': '.gitignore',
-          'README': 'README.md',
-          'package': 'package.json',
-          'eslintignore': '.eslintignore',
-          'eslintrc': '.eslintrc.js'
-        }
-      },
-      {
-        type: 'modify',
-        files: 'package.json',
-        handler: () => {
-          const { features, cssPreset, needMegaloAPI } = this.answers
-          return {
-            'name': this.outFolder,
-            'version': '1.0.0',
-            'private': true,
-            'scripts': {
-              'build:wechat': 'megalo-cli-service build',
-              'build:alipay': 'megalo-cli-service build --platform alipay',
-              'build:swan': 'megalo-cli-service build --platform swan',
-              'build:toutiao': 'megalo-cli-service build --platform toutiao',
-              'dev:alipay': 'megalo-cli-service serve --platform alipay',
-              'dev:swan': 'megalo-cli-service serve --platform swan',
-              'dev:wechat': 'megalo-cli-service serve',
-              'dev:toutiao': 'megalo-cli-service serve --platform toutiao',
-              'lint': when(features.includes('eslint'), 'megalo-cli-service lint')
-            },
-            'license': 'ISC',
-            'babel': {
-              'presets': [
-                '@megalo/app'
-              ]
-            },
-            'devDependencies': {
-              '@megalo/babel-preset-app': 'latest',
-              '@megalo/cli-plugin-eslint': when(features.includes('eslint'), 'latest'),
-              '@megalo/cli-plugin-typescript': when(features.includes('typescript'), 'latest'),
-              '@megalo/cli-service': 'latest',
-              '@megalo/eslint-config-standard': when(features.includes('eslint'), 'latest'),
-              '@megalo/eslint-config-typescript': when(features.includes('typescript') && features.includes('eslint'), 'latest'),
-              '@megalo/target': 'latest',
-              '@megalo/template-compiler': 'latest',
-              '@types/node': when(features.includes('typescript'), '^11.11.4'),
-              'miniprogram-api-typings': when(features.includes('typescript'), 'latest'),
-              'eslint': when(features.includes('eslint'), '^5.15.3'),
-              'less': when(cssPreset === 'less', '^3.8.1'),
-              'less-loader': when(cssPreset === 'less', '^4.1.0'),
-              'stylus': when(cssPreset === 'stylus', '^0.54.5'),
-              'stylus-loader': when(cssPreset === 'stylus', '^3.0.2'),
-              'node-sass': when(cssPreset === 'scss', '^4.10.0'),
-              'sass-loader': when(cssPreset === 'scss', '^7.1.0'),
-              'typescript': when(features.includes('typescript'), '^3.4.4')
-            },
-            'dependencies': {
-              '@megalo/api': when(needMegaloAPI === 'Yes', 'latest'),
-              '@megalo/vhtml-plugin': 'latest',
-              'megalo': 'latest',
-              'octoparse': '^0.4.2',
-              'vuex': when(features.includes('vuex'), '^3.1.0'),
-              'vuex-class': when(features.includes('vuex') && features.includes('typescript'), '^0.3.2'),
-              'vue-property-decorator': when(features.includes('typescript'), '8.1.1')
-            }
-          }
-        }
-      }
-    ]
-  },
-  async completed () {
-    const { features } = this.answers
-    await this.npmInstall()
-    if (features.includes('eslint')) {
-      execa.shell('npm run lint')
-    }
-    this.showProjectTips()
-    const logCd = () => {
-      if (this.outDir !== process.cwd()) {
-        console.log(
-          `${this.chalk.bold('cd')} ${this.chalk.cyan(
-            path.relative(process.cwd(), this.outDir)
-          )}`
-        )
-      }
-    }
-
-    this.logger.tip(`To start dev server, run following commands:`)
-    logCd()
-    console.log(
-      `${this.chalk.cyan('npm run dev:wechat')}`
-    )
-
-    this.logger.tip(`To build for production, run following commands:`)
-    logCd()
-    console.log(
-      `${this.chalk.cyan('npm run build:wechat')}`
-    )
-  }
-}
diff --git a/packages/@megalo/cli/templates/typescript/src/store/counter.ts b/packages/@megalo/cli/templates/typescript/src/store/counter.ts
deleted file mode 100644
index e194d6e..0000000
--- a/packages/@megalo/cli/templates/typescript/src/store/counter.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-// root state object.
-// each Vuex instance is just a single state tree.
-const state = {
-  count: 0
-}
-
-// mutations are operations that actually mutates the state.
-// each mutation handler gets the entire state tree as the
-// first argument, followed by additional payload arguments.
-// mutations must be synchronous and can be recorded by plugins
-// for debugging purposes.
-const mutations = {
-  increment (state) {
-    state.count++
-  },
-  decrement (state) {
-    state.count--
-  }
-}
-
-// actions are functions that cause side effects and can involve
-// asynchronous operations.
-const actions = {
-  increment: ({ commit }) => commit('increment'),
-  decrement: ({ commit }) => commit('decrement'),
-  incrementIfOdd ({ commit, state }) {
-    if ((state.count + 1) % 2 === 0) {
-      commit('increment')
-    }
-  },
-  incrementAsync ({ commit }) {
-    return new Promise((resolve, reject) => {
-      setTimeout(() => {
-        commit('increment')
-        resolve()
-      }, 1000)
-    })
-  }
-}
-
-// getters are functions
-const getters = {
-  evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
-}
-
-// A Vuex instance is created by combining the state, mutations, actions,
-// and getters.
-export default {
-  state,
-  getters,
-  actions,
-  mutations
-}
diff --git a/packages/@megalo/cli/templates/typescript/src/store/index.ts b/packages/@megalo/cli/templates/typescript/src/store/index.ts
deleted file mode 100644
index 88ef01e..0000000
--- a/packages/@megalo/cli/templates/typescript/src/store/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import Vuex from 'vuex'
-import counter from './counter'
-
-export default new Vuex.Store({
-  modules: {
-    counter
-  }
-})