diff --git a/components/index.js b/components/index.js
deleted file mode 100644
index 5d11af8..0000000
--- a/components/index.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import fullScreenContainer from './fullScreenContainer'
-import loading from './loading/index.vue'
-
-// border box
-import borderBox1 from './borderBox1/index'
-import borderBox2 from './borderBox2/index'
-import borderBox3 from './borderBox3/index'
-import borderBox4 from './borderBox4/index'
-import borderBox5 from './borderBox5/index'
-import borderBox6 from './borderBox6/index'
-import borderBox7 from './borderBox7/index'
-import borderBox8 from './borderBox8/index'
-import borderBox9 from './borderBox9/index'
-
-// decoration
-import decoration1 from './decoration1/index'
-import decoration2 from './decoration2/index'
-import decoration3 from './decoration3/index'
-import decoration4 from './decoration4/index'
-import decoration5 from './decoration5/index'
-import decoration6 from './decoration6/index'
-import decoration7 from './decoration7/index'
-import decoration8 from './decoration8/index'
-import decoration9 from './decoration9/index'
-import decoration10 from './decoration10/index'
-
-// charts
-import charts from './charts/index.vue'
-
-import activeRingChart from './activeRingChart'
-import waterLevelPond from './waterLevelPond/index.vue'
-import percentPond from './percentPond/index.vue'
-import flylineChart from './flylineChart'
-import conicalColumnChart from './conicalColumnChart'
-import digitalFlop from './digitalFlop'
-import scrollBoard from './scrollBoard/index.vue'
-import scrollRankingBoard from './scrollRankingBoard/index.vue'
-
-export default function (Vue) {
-  Vue.component('dvFullScreenContainer', fullScreenContainer)
-
-  Vue.component('dvLoading', loading)
-
-  // border box
-  Vue.component('dvBorderBox1', borderBox1)
-  Vue.component('dvBorderBox2', borderBox2)
-  Vue.component('dvBorderBox3', borderBox3)
-  Vue.component('dvBorderBox4', borderBox4)
-  Vue.component('dvBorderBox5', borderBox5)
-  Vue.component('dvBorderBox6', borderBox6)
-  Vue.component('dvBorderBox7', borderBox7)
-  Vue.component('dvBorderBox8', borderBox8)
-  Vue.component('dvBorderBox9', borderBox9)
-
-  // decoration
-  Vue.component('dvDecoration1', decoration1)
-  Vue.component('dvDecoration2', decoration2)
-  Vue.component('dvDecoration3', decoration3)
-  Vue.component('dvDecoration4', decoration4)
-  Vue.component('dvDecoration5', decoration5)
-  Vue.component('dvDecoration6', decoration6)
-  Vue.component('dvDecoration7', decoration7)
-  Vue.component('dvDecoration8', decoration8)
-  Vue.component('dvDecoration9', decoration9)
-  Vue.component('dvDecoration10', decoration10)
-
-  // charts
-  Vue.component('dvCharts', charts)
-
-  Vue.component('dvActiveRingChart', activeRingChart)
-  Vue.component('dvWaterLevelPond', waterLevelPond)
-  Vue.component('dvPercentPond', percentPond)
-  Vue.component('dvFlylineChart', flylineChart)
-  Vue.component('dvConicalColumnChart', conicalColumnChart)
-  Vue.component('dvDigitalFlop', digitalFlop)
-  Vue.component('dvScrollBoard', scrollBoard)
-  Vue.component('dvScrollRankingBoard', scrollRankingBoard)
-}
diff --git a/publish/copyAndAbstractLess.js b/publish/copyAndAbstractLess.js
new file mode 100644
index 0000000..9a1192d
--- /dev/null
+++ b/publish/copyAndAbstractLess.js
@@ -0,0 +1,25 @@
+const { copyDir, fileForEach } = require('./plugin/fs')
+const { print } = require('./plugin/print')
+
+const PACKAGE_SRC = './src'
+const COMPILE_SRC = './lib'
+
+async function start () {
+  const copyPackage = await copyDir(PACKAGE_SRC, COMPILE_SRC)
+
+  if (!copyPackage) {
+    print.error('Exception in copyPackage!')
+
+    return false
+  }
+
+  fileForEach(COMPILE_SRC, src => {
+    print.tip(src)
+  })
+}
+
+module.exports = {
+  start
+}
+
+
diff --git a/src/components/activeRingChart/index.js b/src/components/activeRingChart/index.js
new file mode 100644
index 0000000..5c11b2c
--- /dev/null
+++ b/src/components/activeRingChart/index.js
@@ -0,0 +1,5 @@
+import ActiveRingChart from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(ActiveRingChart.name, ActiveRingChart)
+}
diff --git a/components/activeRingChart/index.vue b/src/components/activeRingChart/src/main.vue
similarity index 98%
rename from components/activeRingChart/index.vue
rename to src/components/activeRingChart/src/main.vue
index 8d84d9b..56a53bc 100644
--- a/components/activeRingChart/index.vue
+++ b/src/components/activeRingChart/src/main.vue
@@ -11,14 +11,14 @@
 <script>
 import Charts from '@jiaminghi/charts'
 
-import dvDigitalFlop from '../digitalFlop'
+import dvDigitalFlop from '../../digitalFlop/src/main'
 
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
 export default {
-  name: 'ActiveRingChart',
+  name: 'DvActiveRingChart',
   components: {
     dvDigitalFlop
   },
diff --git a/src/components/borderBox1/index.js b/src/components/borderBox1/index.js
new file mode 100644
index 0000000..b0141d8
--- /dev/null
+++ b/src/components/borderBox1/index.js
@@ -0,0 +1,5 @@
+import BorderBox1 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox1.name, BorderBox1)
+}
diff --git a/components/borderBox1/index.vue b/src/components/borderBox1/src/main.vue
similarity index 95%
rename from components/borderBox1/index.vue
rename to src/components/borderBox1/src/main.vue
index 39fee34..1edabf5 100644
--- a/components/borderBox1/index.vue
+++ b/src/components/borderBox1/src/main.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="dv-border-box-1" :ref="ref">
+  <div class="dv-border-box-1">
     <svg
       width="150px"
       height="150px"
@@ -53,11 +53,9 @@
 
 <script>
 export default {
-  name: 'BorderBox1',
+  name: 'DvBorderBox1',
   data () {
     return {
-      ref: 'border-box-1',
-
       border: ['left-top', 'right-top', 'left-bottom', 'right-bottom']
     }
   }
diff --git a/src/components/borderBox2/index.js b/src/components/borderBox2/index.js
new file mode 100644
index 0000000..3ecbb7d
--- /dev/null
+++ b/src/components/borderBox2/index.js
@@ -0,0 +1,5 @@
+import BorderBox2 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox2.name, BorderBox2)
+}
diff --git a/components/borderBox2/index.vue b/src/components/borderBox2/src/main.vue
similarity index 94%
rename from components/borderBox2/index.vue
rename to src/components/borderBox2/src/main.vue
index e2b65a4..fb2b81b 100644
--- a/components/borderBox2/index.vue
+++ b/src/components/borderBox2/src/main.vue
@@ -18,10 +18,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'BorderBox2',
+  name: 'DvBorderBox2',
   mixins: [autoResize],
   data () {
     return {
diff --git a/src/components/borderBox3/index.js b/src/components/borderBox3/index.js
new file mode 100644
index 0000000..0174b6e
--- /dev/null
+++ b/src/components/borderBox3/index.js
@@ -0,0 +1,5 @@
+import BorderBox3 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox3.name, BorderBox3)
+}
diff --git a/components/borderBox3/index.vue b/src/components/borderBox3/src/main.vue
similarity index 94%
rename from components/borderBox3/index.vue
rename to src/components/borderBox3/src/main.vue
index eb65886..69a394a 100644
--- a/components/borderBox3/index.vue
+++ b/src/components/borderBox3/src/main.vue
@@ -18,10 +18,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'BorderBox3',
+  name: 'DvBorderBox3',
   mixins: [autoResize],
   data () {
     return {
diff --git a/src/components/borderBox4/index.js b/src/components/borderBox4/index.js
new file mode 100644
index 0000000..74f7feb
--- /dev/null
+++ b/src/components/borderBox4/index.js
@@ -0,0 +1,5 @@
+import BorderBox4 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox4.name, BorderBox4)
+}
diff --git a/components/borderBox4/index.vue b/src/components/borderBox4/src/main.vue
similarity index 97%
rename from components/borderBox4/index.vue
rename to src/components/borderBox4/src/main.vue
index 35b5689..25ca6b6 100644
--- a/components/borderBox4/index.vue
+++ b/src/components/borderBox4/src/main.vue
@@ -22,10 +22,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'BorderBox4',
+  name: 'DvBorderBox4',
   mixins: [autoResize],
   data () {
     return {
diff --git a/src/components/borderBox5/index.js b/src/components/borderBox5/index.js
new file mode 100644
index 0000000..7c2b559
--- /dev/null
+++ b/src/components/borderBox5/index.js
@@ -0,0 +1,5 @@
+import BorderBox5 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox5.name, BorderBox5)
+}
diff --git a/components/borderBox5/index.vue b/src/components/borderBox5/src/main.vue
similarity index 96%
rename from components/borderBox5/index.vue
rename to src/components/borderBox5/src/main.vue
index 4474034..b6df39b 100644
--- a/components/borderBox5/index.vue
+++ b/src/components/borderBox5/src/main.vue
@@ -18,10 +18,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'BorderBox5',
+  name: 'DvBorderBox5',
   mixins: [autoResize],
   data () {
     return {
diff --git a/src/components/borderBox6/index.js b/src/components/borderBox6/index.js
new file mode 100644
index 0000000..8384382
--- /dev/null
+++ b/src/components/borderBox6/index.js
@@ -0,0 +1,5 @@
+import BorderBox6 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox6.name, BorderBox6)
+}
diff --git a/components/borderBox6/index.vue b/src/components/borderBox6/src/main.vue
similarity index 95%
rename from components/borderBox6/index.vue
rename to src/components/borderBox6/src/main.vue
index 753f1c7..949cf44 100644
--- a/components/borderBox6/index.vue
+++ b/src/components/borderBox6/src/main.vue
@@ -26,10 +26,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize.js'
 
 export default {
-  name: 'BorderBox6',
+  name: 'DvBorderBox6',
   mixins: [autoResize],
   data () {
     return {
diff --git a/src/components/borderBox7/index.js b/src/components/borderBox7/index.js
new file mode 100644
index 0000000..58dea93
--- /dev/null
+++ b/src/components/borderBox7/index.js
@@ -0,0 +1,5 @@
+import BorderBox7 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox7.name, BorderBox7)
+}
diff --git a/components/borderBox7/index.vue b/src/components/borderBox7/src/main.vue
similarity index 95%
rename from components/borderBox7/index.vue
rename to src/components/borderBox7/src/main.vue
index a267295..2bc0ec4 100644
--- a/components/borderBox7/index.vue
+++ b/src/components/borderBox7/src/main.vue
@@ -19,10 +19,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'BorderBox7',
+  name: 'DvBorderBox7',
   mixins: [autoResize],
   data () {
     return {
diff --git a/src/components/borderBox8/index.js b/src/components/borderBox8/index.js
new file mode 100644
index 0000000..b4538c5
--- /dev/null
+++ b/src/components/borderBox8/index.js
@@ -0,0 +1,5 @@
+import BorderBox8 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox8.name, BorderBox8)
+}
diff --git a/components/borderBox8/index.vue b/src/components/borderBox8/src/main.vue
similarity index 96%
rename from components/borderBox8/index.vue
rename to src/components/borderBox8/src/main.vue
index 1006565..8811d2f 100644
--- a/components/borderBox8/index.vue
+++ b/src/components/borderBox8/src/main.vue
@@ -62,10 +62,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'BorderBox8',
+  name: 'DvBorderBox8',
   mixins: [autoResize],
   data () {
     return {
diff --git a/src/components/borderBox9/index.js b/src/components/borderBox9/index.js
new file mode 100644
index 0000000..69d09d1
--- /dev/null
+++ b/src/components/borderBox9/index.js
@@ -0,0 +1,5 @@
+import BorderBox9 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(BorderBox9.name, BorderBox9)
+}
diff --git a/components/borderBox9/index.vue b/src/components/borderBox9/src/main.vue
similarity index 97%
rename from components/borderBox9/index.vue
rename to src/components/borderBox9/src/main.vue
index 71cbdc2..e288bd3 100644
--- a/components/borderBox9/index.vue
+++ b/src/components/borderBox9/src/main.vue
@@ -83,10 +83,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'BorderBox9',
+  name: 'DvBorderBox9',
   mixins: [autoResize],
   data () {
     return {
diff --git a/src/components/charts/index.js b/src/components/charts/index.js
new file mode 100644
index 0000000..c6ebf0a
--- /dev/null
+++ b/src/components/charts/index.js
@@ -0,0 +1,5 @@
+import Charts from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Charts.name, Charts)
+}
diff --git a/components/charts/index.vue b/src/components/charts/src/main.vue
similarity index 94%
rename from components/charts/index.vue
rename to src/components/charts/src/main.vue
index 9c8e5e5..a8349a8 100644
--- a/components/charts/index.vue
+++ b/src/components/charts/src/main.vue
@@ -5,12 +5,12 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 import Charts from '@jiaminghi/charts'
 
 export default {
-  name: 'Charts',
+  name: 'DvCharts',
   mixins: [autoResize],
   props: {
     option: {
diff --git a/src/components/conicalColumnChart/index.js b/src/components/conicalColumnChart/index.js
new file mode 100644
index 0000000..1c93e2f
--- /dev/null
+++ b/src/components/conicalColumnChart/index.js
@@ -0,0 +1,5 @@
+import ConicalColumnChart from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(ConicalColumnChart.name, ConicalColumnChart)
+}
diff --git a/components/conicalColumnChart/index.vue b/src/components/conicalColumnChart/src/main.vue
similarity index 98%
rename from components/conicalColumnChart/index.vue
rename to src/components/conicalColumnChart/src/main.vue
index 4baaeb6..2db4cb1 100644
--- a/components/conicalColumnChart/index.vue
+++ b/src/components/conicalColumnChart/src/main.vue
@@ -40,14 +40,14 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
 export default {
-  name: 'ConicalColumnChart',
+  name: 'DvConicalColumnChart',
   mixins: [autoResize],
   props: {
     config: {
diff --git a/src/components/decoration1/index.js b/src/components/decoration1/index.js
new file mode 100644
index 0000000..b75991f
--- /dev/null
+++ b/src/components/decoration1/index.js
@@ -0,0 +1,5 @@
+import Decoration1 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration1.name, Decoration1)
+}
diff --git a/components/decoration1/index.vue b/src/components/decoration1/src/main.vue
similarity index 98%
rename from components/decoration1/index.vue
rename to src/components/decoration1/src/main.vue
index c7ade73..d0c75ec 100644
--- a/components/decoration1/index.vue
+++ b/src/components/decoration1/src/main.vue
@@ -85,10 +85,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'Decoration1',
+  name: 'DvDecoration1',
   mixins: [autoResize],
   data () {
     const pointSideLength = 2.5
diff --git a/src/components/decoration10/index.js b/src/components/decoration10/index.js
new file mode 100644
index 0000000..db2f059
--- /dev/null
+++ b/src/components/decoration10/index.js
@@ -0,0 +1,5 @@
+import Decoration10 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration10.name, Decoration10)
+}
diff --git a/components/decoration10/index.vue b/src/components/decoration10/src/main.vue
similarity index 98%
rename from components/decoration10/index.vue
rename to src/components/decoration10/src/main.vue
index 673c33e..46b34a0 100644
--- a/components/decoration10/index.vue
+++ b/src/components/decoration10/src/main.vue
@@ -146,10 +146,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'Decoration9',
+  name: 'DvDecoration10',
   mixins: [autoResize],
   data () {
     return {
diff --git a/src/components/decoration2/index.js b/src/components/decoration2/index.js
new file mode 100644
index 0000000..24b109f
--- /dev/null
+++ b/src/components/decoration2/index.js
@@ -0,0 +1,5 @@
+import Decoration2 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration2.name, Decoration2)
+}
diff --git a/components/decoration2/index.vue b/src/components/decoration2/src/main.vue
similarity index 96%
rename from components/decoration2/index.vue
rename to src/components/decoration2/src/main.vue
index e689080..272968f 100644
--- a/components/decoration2/index.vue
+++ b/src/components/decoration2/src/main.vue
@@ -31,10 +31,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'Decoration2',
+  name: 'DvDecoration2',
   mixins: [autoResize],
   props: {
     reverse: {
diff --git a/src/components/decoration3/index.js b/src/components/decoration3/index.js
new file mode 100644
index 0000000..2f3e9f0
--- /dev/null
+++ b/src/components/decoration3/index.js
@@ -0,0 +1,5 @@
+import Decoration3 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration3.name, Decoration3)
+}
diff --git a/components/decoration3/index.vue b/src/components/decoration3/src/main.vue
similarity index 96%
rename from components/decoration3/index.vue
rename to src/components/decoration3/src/main.vue
index 06ca819..df68a6b 100644
--- a/components/decoration3/index.vue
+++ b/src/components/decoration3/src/main.vue
@@ -28,10 +28,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'Decoration3',
+  name: 'DvDecoration3',
   mixins: [autoResize],
   data () {
     const pointSideLength = 7
diff --git a/src/components/decoration4/index.js b/src/components/decoration4/index.js
new file mode 100644
index 0000000..2b66936
--- /dev/null
+++ b/src/components/decoration4/index.js
@@ -0,0 +1,5 @@
+import Decoration4 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration4.name, Decoration4)
+}
diff --git a/components/decoration4/index.vue b/src/components/decoration4/src/main.vue
similarity index 95%
rename from components/decoration4/index.vue
rename to src/components/decoration4/src/main.vue
index 67c1181..e27c578 100644
--- a/components/decoration4/index.vue
+++ b/src/components/decoration4/src/main.vue
@@ -23,10 +23,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'Decoration4',
+  name: 'DvDecoration4',
   mixins: [autoResize],
   props: ['reverse'],
   data () {
diff --git a/src/components/decoration5/index.js b/src/components/decoration5/index.js
new file mode 100644
index 0000000..187b004
--- /dev/null
+++ b/src/components/decoration5/index.js
@@ -0,0 +1,5 @@
+import Decoration5 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration5.name, Decoration5)
+}
diff --git a/components/decoration5/index.vue b/src/components/decoration5/src/main.vue
similarity index 97%
rename from components/decoration5/index.vue
rename to src/components/decoration5/src/main.vue
index 3bc2676..7e508f5 100644
--- a/components/decoration5/index.vue
+++ b/src/components/decoration5/src/main.vue
@@ -44,12 +44,12 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 import { getPolylineLength } from '@jiaminghi/charts/lib/util'
 
 export default {
-  name: 'Decoration5',
+  name: 'DvDecoration5',
   mixins: [autoResize],
   data () {
     return {
diff --git a/src/components/decoration6/index.js b/src/components/decoration6/index.js
new file mode 100644
index 0000000..bc33403
--- /dev/null
+++ b/src/components/decoration6/index.js
@@ -0,0 +1,5 @@
+import Decoration6 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration6.name, Decoration6)
+}
diff --git a/components/decoration6/index.vue b/src/components/decoration6/src/main.vue
similarity index 96%
rename from components/decoration6/index.vue
rename to src/components/decoration6/src/main.vue
index bd681cc..ecf4478 100644
--- a/components/decoration6/index.vue
+++ b/src/components/decoration6/src/main.vue
@@ -39,12 +39,12 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
-import { randomExtend } from '../../util'
+import { randomExtend } from '../../../util'
 
 export default {
-  name: 'Decoration6',
+  name: 'DvDecoration6',
   mixins: [autoResize],
   data () {
     const rectWidth = 7
diff --git a/src/components/decoration7/index.js b/src/components/decoration7/index.js
new file mode 100644
index 0000000..1da859d
--- /dev/null
+++ b/src/components/decoration7/index.js
@@ -0,0 +1,5 @@
+import Decoration7 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration7.name, Decoration7)
+}
diff --git a/components/decoration7/index.vue b/src/components/decoration7/src/main.vue
similarity index 97%
rename from components/decoration7/index.vue
rename to src/components/decoration7/src/main.vue
index 68264e1..c14ffd1 100644
--- a/components/decoration7/index.vue
+++ b/src/components/decoration7/src/main.vue
@@ -34,7 +34,7 @@
 
 <script>
 export default {
-  name: 'Decoration7'
+  name: 'DvDecoration7'
 }
 </script>
 
diff --git a/src/components/decoration8/index.js b/src/components/decoration8/index.js
new file mode 100644
index 0000000..779b57d
--- /dev/null
+++ b/src/components/decoration8/index.js
@@ -0,0 +1,5 @@
+import Decoration8 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration8.name, Decoration8)
+}
diff --git a/components/decoration8/index.vue b/src/components/decoration8/src/main.vue
similarity index 93%
rename from components/decoration8/index.vue
rename to src/components/decoration8/src/main.vue
index 16d7449..09c3a26 100644
--- a/components/decoration8/index.vue
+++ b/src/components/decoration8/src/main.vue
@@ -26,10 +26,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'Decoration8',
+  name: 'DvDecoration8',
   mixins: [autoResize],
   props: {
     reverse: {
diff --git a/src/components/decoration9/index.js b/src/components/decoration9/index.js
new file mode 100644
index 0000000..171f310
--- /dev/null
+++ b/src/components/decoration9/index.js
@@ -0,0 +1,5 @@
+import Decoration9 from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Decoration9.name, Decoration9)
+}
diff --git a/components/decoration9/index.vue b/src/components/decoration9/src/main.vue
similarity index 97%
rename from components/decoration9/index.vue
rename to src/components/decoration9/src/main.vue
index 894fac9..ad2b15d 100644
--- a/components/decoration9/index.vue
+++ b/src/components/decoration9/src/main.vue
@@ -84,10 +84,10 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'Decoration9',
+  name: 'DvDecoration9',
   mixins: [autoResize],
   data () {
     return {
diff --git a/src/components/digitalFlop/index.js b/src/components/digitalFlop/index.js
new file mode 100644
index 0000000..b3ef9fe
--- /dev/null
+++ b/src/components/digitalFlop/index.js
@@ -0,0 +1,5 @@
+import DigitalFlop from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(DigitalFlop.name, DigitalFlop)
+}
diff --git a/components/digitalFlop/index.vue b/src/components/digitalFlop/src/main.vue
similarity index 99%
rename from components/digitalFlop/index.vue
rename to src/components/digitalFlop/src/main.vue
index eae06f7..118a126 100644
--- a/components/digitalFlop/index.vue
+++ b/src/components/digitalFlop/src/main.vue
@@ -14,7 +14,7 @@ import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
 export default {
-  name: 'DigitalFlop',
+  name: 'DvDigitalFlop',
   props: {
     config: {
       type: Object,
diff --git a/src/components/flylineChart/index.js b/src/components/flylineChart/index.js
new file mode 100644
index 0000000..abf6579
--- /dev/null
+++ b/src/components/flylineChart/index.js
@@ -0,0 +1,5 @@
+import FlylineChart from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(FlylineChart.name, FlylineChart)
+}
diff --git a/components/flylineChart/index.vue b/src/components/flylineChart/src/main.vue
similarity index 98%
rename from components/flylineChart/index.vue
rename to src/components/flylineChart/src/main.vue
index 8b8a7b6..4e25574 100644
--- a/components/flylineChart/index.vue
+++ b/src/components/flylineChart/src/main.vue
@@ -153,12 +153,12 @@ import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
-import { randomExtend, getPointDistance } from '../../util/index'
+import { randomExtend, getPointDistance } from '../../../util/index'
 
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 export default {
-  name: 'PercentPond',
+  name: 'DvFlylineChart',
   mixins: [autoResize],
   props: {
     config: {
diff --git a/src/components/fullScreenContainer/index.js b/src/components/fullScreenContainer/index.js
new file mode 100644
index 0000000..f061b23
--- /dev/null
+++ b/src/components/fullScreenContainer/index.js
@@ -0,0 +1,5 @@
+import FullScreenContainer from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(FullScreenContainer.name, FullScreenContainer)
+}
diff --git a/components/fullScreenContainer/index.vue b/src/components/fullScreenContainer/src/main.vue
similarity index 97%
rename from components/fullScreenContainer/index.vue
rename to src/components/fullScreenContainer/src/main.vue
index a51a4d9..21c89b9 100644
--- a/components/fullScreenContainer/index.vue
+++ b/src/components/fullScreenContainer/src/main.vue
@@ -6,7 +6,7 @@
 
 <script>
 export default {
-  name: 'FullScreenContainer',
+  name: 'DvFullScreenContainer',
   data () {
     return {
       scale: 0,
diff --git a/src/components/index.js b/src/components/index.js
new file mode 100644
index 0000000..91036b0
--- /dev/null
+++ b/src/components/index.js
@@ -0,0 +1,77 @@
+import fullScreenContainer from './fullScreenContainer/index'
+import loading from './loading/index'
+
+// border box
+import borderBox1 from './borderBox1/index'
+import borderBox2 from './borderBox2/index'
+import borderBox3 from './borderBox3/index'
+import borderBox4 from './borderBox4/index'
+import borderBox5 from './borderBox5/index'
+import borderBox6 from './borderBox6/index'
+import borderBox7 from './borderBox7/index'
+import borderBox8 from './borderBox8/index'
+import borderBox9 from './borderBox9/index'
+
+// decoration
+import decoration1 from './decoration1/index'
+import decoration2 from './decoration2/index'
+import decoration3 from './decoration3/index'
+import decoration4 from './decoration4/index'
+import decoration5 from './decoration5/index'
+import decoration6 from './decoration6/index'
+import decoration7 from './decoration7/index'
+import decoration8 from './decoration8/index'
+import decoration9 from './decoration9/index'
+import decoration10 from './decoration10/index'
+
+// charts
+import charts from './charts/index'
+
+import activeRingChart from './activeRingChart'
+import waterLevelPond from './waterLevelPond/index'
+import percentPond from './percentPond/index'
+import flylineChart from './flylineChart'
+import conicalColumnChart from './conicalColumnChart'
+import digitalFlop from './digitalFlop'
+import scrollBoard from './scrollBoard/index'
+import scrollRankingBoard from './scrollRankingBoard/index'
+
+export default function (Vue) {
+  Vue.use(fullScreenContainer)
+  Vue.use(loading)
+
+  // border box
+  Vue.use(borderBox1)
+  Vue.use(borderBox2)
+  Vue.use(borderBox3)
+  Vue.use(borderBox4)
+  Vue.use(borderBox5)
+  Vue.use(borderBox6)
+  Vue.use(borderBox7)
+  Vue.use(borderBox8)
+  Vue.use(borderBox9)
+
+  // decoration
+  Vue.use(decoration1)
+  Vue.use(decoration2)
+  Vue.use(decoration3)
+  Vue.use(decoration4)
+  Vue.use(decoration5)
+  Vue.use(decoration6)
+  Vue.use(decoration7)
+  Vue.use(decoration8)
+  Vue.use(decoration9)
+  Vue.use(decoration10)
+
+  // charts
+  Vue.use(charts)
+
+  Vue.use(activeRingChart)
+  Vue.use(waterLevelPond)
+  Vue.use(percentPond)
+  Vue.use(flylineChart)
+  Vue.use(conicalColumnChart)
+  Vue.use(digitalFlop)
+  Vue.use(scrollBoard)
+  Vue.use(scrollRankingBoard)
+}
diff --git a/src/components/loading/index.js b/src/components/loading/index.js
new file mode 100644
index 0000000..154fd0e
--- /dev/null
+++ b/src/components/loading/index.js
@@ -0,0 +1,5 @@
+import Loading from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(Loading.name, Loading)
+}
diff --git a/components/loading/index.vue b/src/components/loading/src/main.vue
similarity index 98%
rename from components/loading/index.vue
rename to src/components/loading/src/main.vue
index 31b7664..991d20e 100644
--- a/components/loading/index.vue
+++ b/src/components/loading/src/main.vue
@@ -59,7 +59,7 @@
 
 <script>
 export default {
-  name: 'Loading'
+  name: 'DvLoading'
 }
 </script>
 
diff --git a/src/components/percentPond/index.js b/src/components/percentPond/index.js
new file mode 100644
index 0000000..d5edadb
--- /dev/null
+++ b/src/components/percentPond/index.js
@@ -0,0 +1,5 @@
+import PercentPond from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(PercentPond.name, PercentPond)
+}
diff --git a/components/percentPond/index.vue b/src/components/percentPond/src/main.vue
similarity index 99%
rename from components/percentPond/index.vue
rename to src/components/percentPond/src/main.vue
index a6cc9f8..f16d373 100644
--- a/components/percentPond/index.vue
+++ b/src/components/percentPond/src/main.vue
@@ -49,7 +49,7 @@ import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
 export default {
-  name: 'PercentPond',
+  name: 'DvPercentPond',
   props: {
     config: {
       type: Object,
diff --git a/src/components/scrollBoard/index.js b/src/components/scrollBoard/index.js
new file mode 100644
index 0000000..9ff20e1
--- /dev/null
+++ b/src/components/scrollBoard/index.js
@@ -0,0 +1,5 @@
+import ScrollBoard from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(ScrollBoard.name, ScrollBoard)
+}
diff --git a/components/scrollBoard/index.vue b/src/components/scrollBoard/src/main.vue
similarity index 99%
rename from components/scrollBoard/index.vue
rename to src/components/scrollBoard/src/main.vue
index 9a952ba..be6d0bb 100644
--- a/components/scrollBoard/index.vue
+++ b/src/components/scrollBoard/src/main.vue
@@ -47,14 +47,14 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
 export default {
-  name: 'ScrollBoard',
+  name: 'DvScrollBoard',
   mixins: [autoResize],
   props: {
     config: {
diff --git a/src/components/scrollRankingBoard/index.js b/src/components/scrollRankingBoard/index.js
new file mode 100644
index 0000000..7270ccb
--- /dev/null
+++ b/src/components/scrollRankingBoard/index.js
@@ -0,0 +1,5 @@
+import ScrollRankingBoard from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(ScrollRankingBoard.name, ScrollRankingBoard)
+}
diff --git a/components/scrollRankingBoard/index.vue b/src/components/scrollRankingBoard/src/main.vue
similarity index 97%
rename from components/scrollRankingBoard/index.vue
rename to src/components/scrollRankingBoard/src/main.vue
index 555406c..024d568 100644
--- a/components/scrollRankingBoard/index.vue
+++ b/src/components/scrollRankingBoard/src/main.vue
@@ -25,14 +25,14 @@
 </template>
 
 <script>
-import autoResize from '../../mixins/autoResize.js'
+import autoResize from '../../../mixin/autoResize'
 
 import { deepMerge } from '@jiaminghi/charts/lib/util/index'
 
 import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 
 export default {
-  name: 'ScrollRankingBoard',
+  name: 'DvScrollRankingBoard',
   mixins: [autoResize],
   props: {
     config: {
@@ -264,13 +264,13 @@ export default {
       width: 50px;
       transform: translateX(-100%);
       background: radial-gradient(rgb(40, 248, 255) 5%, transparent 80%);
-      animation: shine 3s ease-in-out infinite;
+      animation: shine 3s ease-in-out infinite alternate;
     }
   }
 }
 
 @keyframes shine {
-  85% {
+  80% {
     left: 0%;
     transform: translateX(-100%);
   }
diff --git a/src/components/waterLevelPond/index.js b/src/components/waterLevelPond/index.js
new file mode 100644
index 0000000..93c1931
--- /dev/null
+++ b/src/components/waterLevelPond/index.js
@@ -0,0 +1,5 @@
+import WaterLevelPond from './src/main.vue'
+
+export default function (Vue) {
+  Vue.component(WaterLevelPond.name, WaterLevelPond)
+}
diff --git a/components/waterLevelPond/index.vue b/src/components/waterLevelPond/src/main.vue
similarity index 99%
rename from components/waterLevelPond/index.vue
rename to src/components/waterLevelPond/src/main.vue
index 7b92d3f..a5b05a5 100644
--- a/components/waterLevelPond/index.vue
+++ b/src/components/waterLevelPond/src/main.vue
@@ -47,7 +47,7 @@ import { deepClone } from '@jiaminghi/c-render/lib/plugin/util'
 import CRender from '@jiaminghi/c-render'
 
 export default {
-  name: 'waterLevelPond',
+  name: 'DvWaterLevelPond',
   props: {
     config: Object,
     default: () => ({})
diff --git a/index.js b/src/index.js
similarity index 100%
rename from index.js
rename to src/index.js
diff --git a/mixins/autoResize.js b/src/mixin/autoResize.js
similarity index 100%
rename from mixins/autoResize.js
rename to src/mixin/autoResize.js
diff --git a/util/index.js b/src/util/index.js
similarity index 100%
rename from util/index.js
rename to src/util/index.js