cli3改版基本完成

Former-commit-id: 637e58a7d3aef389a4ea51c179aaee17f421f34c [formerly 637e58a7d3aef389a4ea51c179aaee17f421f34c [formerly 637e58a7d3aef389a4ea51c179aaee17f421f34c [formerly 637e58a7d3aef389a4ea51c179aaee17f421f34c [formerly fc66dcb2e437ff46b2c36ec1e3bcce71a6461250 [formerly b6451dc60d4c1e6006a9fcd380656d2023436e64]]]]]
Former-commit-id: c791410cda91e2df1b9808bfb032f0d3d68106ef
Former-commit-id: 0c5197800cfae6f27f7ab792c887fb25a73a23e0
Former-commit-id: 208a8e77c0fada6e9d191a7d495615ec2ef9704d [formerly af8c1367ed65b626196ac156c8521257cc804d60]
Former-commit-id: 1fdb571cea6ed9dba9ea02f4ba6ebfb5d89e1b2f
Former-commit-id: 774a145ae0694612edf988d9992ef797ddf4f21d
Former-commit-id: 03fc24d70365836d60360aa24e24dc7cb4520b91
Former-commit-id: bba4fd5552fa42da029fd6b310f5ee48558d5508
Former-commit-id: 2de81d34fb07248965677e8a3866c13089fa95e7

src/views/demo/components/highlight/code/css.js

@@ -0,0 +1,8 @@
+export default `body {
+  background-color: aliceblue;
+  height: 100%;
+}
+.my-card {
+  height: 300px;
+  width: 300px;
+}`

src/views/demo/components/highlight/code/html.js

@@ -0,0 +1,8 @@
+export default `<ul>
+  <li class="li-1"><p>Hello</p></li>
+  <li>
+    <span style="color: red;">
+      Hello
+    </span>
+  </li>
+</ul>`

src/views/demo/components/highlight/code/javascript.js

@@ -0,0 +1,3 @@
+export default `[].forEach.call($$("*"), a => {
+  a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)
+})`

src/views/demo/components/highlight/code/scss.js

@@ -0,0 +1,8 @@
+export default `body {
+  background-color: aliceblue;
+  height: 100%;
+  .my-card {
+    height: 300px;
+    width: 300px;
+  }
+}`

src/views/demo/components/highlight/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <d2-container>
+    <template slot="header">代码高亮组件</template>
+    <el-card shadow="never" class="d2-mb">
+      <p slot="title">javascript</p>
+      <d2-highlight :code="codeJavascript"/>
+    </el-card>
+    <el-row :gutter="20">
+      <el-col :span="8">
+        <el-card shadow="never">
+          <p slot="title">css</p>
+          <d2-highlight :code="codeCSS"/>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card shadow="never">
+          <p slot="title">scss</p>
+          <d2-highlight :code="codeSCSS"/>
+        </el-card>
+      </el-col>
+      <el-col :span="8">
+        <el-card shadow="never">
+          <p slot="title">html</p>
+          <d2-highlight :code="codeHTML"/>
+        </el-card>
+      </el-col>
+    </el-row>
+  </d2-container>
+</template>
+
+<script>
+import codeJavascript from './code/javascript'
+import codeCSS from './code/css'
+import codeSCSS from './code/scss'
+import codeHTML from './code/html'
+export default {
+  data () {
+    return {
+      codeJavascript,
+      codeCSS,
+      codeSCSS,
+      codeHTML
+    }
+  }
+}
+</script>