diff --git a/src/comment/ArticleComment.vue b/src/components/comment/ArticleComment.vue
similarity index 100%
rename from src/comment/ArticleComment.vue
rename to src/components/comment/ArticleComment.vue
diff --git a/src/components/markdown/DesignMarkdown.vue b/src/components/markdown/DesignMarkdown.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fbc284e78c800188a3f56d68b82a1ed0e0f78742
--- /dev/null
+++ b/src/components/markdown/DesignMarkdown.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <VueMarkdown
+      :source="content"
+      v-highlight
+      style="width: 100%; text-align: left"
+    ></VueMarkdown>
+  </div>
+</template>
+<script>
+import VueMarkdown from 'vue-markdown'
+export default {
+    components: {VueMarkdown},
+    name: 'DesignMarkdown',
+    props: {
+        contentSource: undefined
+    },
+    data () {
+        return {
+            content: ''
+        }
+    },
+    computed: {
+        propsContent () {
+            console.log('this')
+            return this.contentSource
+        }
+    },
+    watch: {
+        contentSource: {
+            handler (newVal, oldVal) {
+                this.content = newVal || ''
+            },
+            deep: true,
+            immediate: true
+        }
+    },
+    mounted () {
+        console.log('design vuemarkdown')
+    },
+    methods: {
+
+    }
+}
+</script>
diff --git a/src/components/Login.vue b/src/components/user/Login.vue
similarity index 100%
rename from src/components/Login.vue
rename to src/components/user/Login.vue
diff --git a/src/components/Register.vue b/src/components/user/Register.vue
similarity index 98%
rename from src/components/Register.vue
rename to src/components/user/Register.vue
index 46a35e25c24bcf250b36649d9100ea422de1e44b..413286accdef085016110e58846d0bf9f2cd8ebb 100644
--- a/src/components/Register.vue
+++ b/src/components/user/Register.vue
@@ -26,7 +26,7 @@
           </el-alert>
           <p style="font-size: 30px">注册</p>
           <el-avatar
-            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
+            src="https://yongma16.xyz/staticFile/common/img/logo.png"
           ></el-avatar>
           <!-- <svg
           class="icon"
diff --git a/src/weather/EchartWeather.vue b/src/components/weather/EchartWeather.vue
similarity index 99%
rename from src/weather/EchartWeather.vue
rename to src/components/weather/EchartWeather.vue
index 1dfd283e6e513d75aaf3ef580af032e1222e5739..804d1a463835567cb908285b0fe4939ddea257ba 100644
--- a/src/weather/EchartWeather.vue
+++ b/src/components/weather/EchartWeather.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import * as echarts from 'echarts'
+import * as echarts from 'echarts/index'
 export default {
     name: 'EchartWeather',
     data () {
diff --git a/src/components/Onlinewebsocket.vue b/src/components/websocket/Onlinewebsocket.vue
similarity index 100%
rename from src/components/Onlinewebsocket.vue
rename to src/components/websocket/Onlinewebsocket.vue
diff --git a/src/router/index.js b/src/router/index.js
index b24978ff56a18b0e5615598060c9e6b6b180dee8..b94a705680cc4ad58eb662818ad6c281f7b0b156 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,14 +1,17 @@
 import { isEmpty } from '@/utils'
 import store from '@/store'
-const Article = () => import('@/components/Article')
-const Login = () => import('@/components/Login')
-const Register = () => import('@/components/Register')
-const Onlinewebsocket = () => import('@/components/Onlinewebsocket')
+
+const Login = () => import('@/components/user/Login')
+const Register = () => import('@/components/user/Register')
+const Onlinewebsocket = () => import('@/components/websocket/Onlinewebsocket')
+
 const Home = () => import('@/components/Home')
 const Bilicom = () => import('@/components/Bilicom')
 const Mavoneditor = () => import('@/components/Mavoneditor')
 const GrilShow = () => import('@/components/GrilShow')
-const Csslearn = () => import('@/components/Csslearn')
+
+const Csslearn = () => import('@/views/cssView/Csslearn')
+const Article = () => import('@/views/article/Article')
 const defaultRoutes = [
     {
         path: '/',
diff --git a/src/components/Article.vue b/src/views/article/Article.vue
similarity index 98%
rename from src/components/Article.vue
rename to src/views/article/Article.vue
index e341dc634486195853b522f2a2feb35c164f4554..d06d1da056743436006e2b9fd9a8e8e0a5c83338 100644
--- a/src/components/Article.vue
+++ b/src/views/article/Article.vue
@@ -127,11 +127,11 @@
         <div class="block" style="line-height: 20px">
           <h1>{{ the_title }}</h1>
           <div class="markdown-body" style="text-align: left">
-            <VueMarkdown
-              :source="md_data[index_page]"
+            <DesignMarkdown
+              :contentSource="md_data[index_page]"
               v-highlight
               style="width: 100%; text-align: left"
-            ></VueMarkdown>
+            ></DesignMarkdown>
           </div>
         </div>
       </el-card>
@@ -248,12 +248,12 @@
 
 <script>
 import Email from '@/components/email/Email'
-import VueMarkdown from 'vue-markdown'
-import ArticleComment from '@/comment/ArticleComment'
-import EchartWeather from '@/weather/EchartWeather'
+import DesignMarkdown from '@/components/markdown/DesignMarkdown'
+import ArticleComment from '@/components/comment/ArticleComment'
+import EchartWeather from '@/components/weather/EchartWeather'
 export default {
     components: {
-        VueMarkdown, // 显示markdown的组件
+        DesignMarkdown, // 显示markdown的组件
         ArticleComment, // 子组件评论
         EchartWeather, // 天气
         Email
diff --git a/src/components/Csslearn.vue b/src/views/cssView/Csslearn.vue
similarity index 100%
rename from src/components/Csslearn.vue
rename to src/views/cssView/Csslearn.vue