support SFC

Now omi-cli can provide SFC by omil when you create template in the first time, but error warning tips have not perfect, user experience is not so good for the time being, I will follow up repairs.

packages/omi-cli/template/app/src/elements/app/index.js

@@ -1,6 +1,7 @@
 import { define, WeElement } from 'omi'
 import logo from './logo.svg'
 import '../app-intro'
+import '../omil/index.omi.js'
 import 'omiu/button'
 
 define('my-app', class extends WeElement {
@@ -27,6 +28,7 @@ define('my-app', class extends WeElement {
         </header>
         <app-intro />
         <o-button style='width:200px;'>I am omiu button.</o-button>
+        <app-omil />
       </div>
     )
   }

packages/omi-cli/template/app/src/elements/omil/_index.css

@@ -0,0 +1,18 @@
+.omil {
+	margin-top: 20px;
+}
+
+.weui-btn:after {
+    content: " ";
+    width: 200%;
+    height: 200%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    -webkit-transform: scale(0.5);
+    transform: scale(0.5);
+    -webkit-transform-origin: 0 0;
+    transform-origin: 0 0;
+    box-sizing: border-box;
+    border-radius: 10px;
+}

packages/omi-cli/template/app/src/elements/omil/index.omi

@@ -0,0 +1,49 @@
+<template name="app-omil">
+    <div class="omil">
+        <button onClick={this.testClick.bind(this)} class="weui-btn weui-btn_primary" style="width: 200px;">{this.data.title}</button>
+    </div>
+</template>
+<script>
+// Recommend install omi-snippets plugins in VSC
+// Omi-snippets: https://marketplace.visualstudio.com/items?itemName=Wscats.omi-snippets
+import style from './_index.css'
+export default {
+    static css = style + `
+        button{
+            background-color: #58bc58;
+        }
+    `
+    install() {
+        this.data = {
+            title: 'I am omil button.'
+        }
+    }
+    testClick() {
+        console.log('omil')
+    }
+}
+</script>
+<style>
+.weui-btn {
+    position: relative;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 14px;
+    padding-right: 14px;
+    box-sizing: border-box;
+    font-size: 18px;
+    text-align: center;
+    text-decoration: none;
+    color: #FFFFFF;
+    line-height: 2.55555556;
+    border-radius: 3px;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    overflow: hidden;
+    border-width: 0;
+    width: 100%;
+    border-width: 0;
+    outline: 0;
+    -webkit-appearance: none;
+}
+</style>

packages/omi-cli/template/app/src/elements/omil/index.omi.js

@@ -0,0 +1,67 @@
+import { WeElement, define, h } from "omi";
+
+// Recommend install omi-snippets plugins in VSC
+// Omi-snippets: https://marketplace.visualstudio.com/items?itemName=Wscats.omi-snippets
+import style from "./_index.css";
+
+const appOmil = class extends WeElement {
+  render() {
+    return h(
+      "div",
+      {
+        class: "omil"
+      },
+      h(
+        "button",
+        {
+          onClick: this.testClick.bind(this),
+          class: "weui-btn weui-btn_primary",
+          style: "width: 200px;"
+        },
+        this.data.title
+      )
+    );
+  }
+
+  static css =
+    `
+.weui-btn {
+    position: relative;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 14px;
+    padding-right: 14px;
+    box-sizing: border-box;
+    font-size: 18px;
+    text-align: center;
+    text-decoration: none;
+    color: #FFFFFF;
+    line-height: 2.55555556;
+    border-radius: 3px;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    overflow: hidden;
+    border-width: 0;
+    width: 100%;
+    border-width: 0;
+    outline: 0;
+    -webkit-appearance: none;
+}
+` +
+    style +
+    `
+        button{
+            background-color: #58bc58;
+        }
+    `;
+  install() {
+    this.data = {
+      title: "I am omil button."
+    };
+  }
+  testClick() {
+    console.log("omil");
+  }
+};
+
+define("app-omil", appOmil);