diff --git "a/3\350\241\214\344\273\243\347\240\201\346\220\236\345\256\232AI\346\212\240\345\233\276/Untitled Diagram.drawio" "b/3\350\241\214\344\273\243\347\240\201\346\220\236\345\256\232AI\346\212\240\345\233\276/Untitled Diagram.drawio"
new file mode 100644
index 0000000..93defb6
--- /dev/null
+++ "b/3\350\241\214\344\273\243\347\240\201\346\220\236\345\256\232AI\346\212\240\345\233\276/Untitled Diagram.drawio"	
@@ -0,0 +1,61 @@
+<mxfile host="app.diagrams.net" modified="2021-10-16T04:42:16.774Z" agent="5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36" etag="gRPk_ttacyTL8ZfaNNAU" version="15.5.4" type="github">
+  <diagram id="BGl8BFaHvvLllcXofhZC" name="Page-1">
+    <mxGraphModel dx="1823" dy="794" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="827" pageHeight="1169" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <mxCell id="1LAcV-oBZt9VrNZSHQMf-15" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fontSize=18;" edge="1" parent="1" source="1LAcV-oBZt9VrNZSHQMf-2" target="1LAcV-oBZt9VrNZSHQMf-3">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="1LAcV-oBZt9VrNZSHQMf-2" value="&lt;font style=&quot;font-size: 18px&quot;&gt;main.js&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="425" y="240" width="125" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="1LAcV-oBZt9VrNZSHQMf-3" value="&lt;font style=&quot;font-size: 18px&quot;&gt;App.vue&lt;br&gt;根组件&lt;br&gt;&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="910" y="240" width="125" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="1LAcV-oBZt9VrNZSHQMf-4" value="&lt;div&gt;&lt;font style=&quot;font-size: 18px&quot;&gt;&amp;lt;div id=&quot;app&quot;&amp;gt;&lt;/font&gt;&lt;/div&gt;&lt;div&gt;&lt;font size=&quot;3&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp;&amp;lt;!-- 路由占位符&amp;nbsp; --&amp;gt;&lt;/font&gt;&lt;/div&gt;&lt;pre&gt;&lt;font size=&quot;3&quot;&gt;&amp;nbsp; &amp;nbsp;&lt;span style=&quot;background-color: rgb(255 , 255 , 255)&quot;&gt; &lt;/span&gt;&lt;b&gt;&lt;span style=&quot;background-color: rgb(255 , 255 , 255)&quot;&gt;&amp;nbsp;&lt;/span&gt;&lt;span style=&quot;background-color: rgb(153 , 153 , 255)&quot;&gt;&amp;lt;router-view&amp;gt;&amp;lt;/router-view&amp;gt;&lt;/span&gt;&lt;/b&gt;&lt;/font&gt;&lt;/pre&gt;&lt;div&gt;&lt;font size=&quot;3&quot; style=&quot;background-color: rgb(255 , 255 , 255)&quot;&gt;&amp;nbsp;&amp;lt;/div&amp;gt;&lt;/font&gt;&lt;/div&gt;" style="text;html=1;align=left;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
+          <mxGeometry x="1040" y="225" width="260" height="90" as="geometry" />
+        </mxCell>
+        <mxCell id="1LAcV-oBZt9VrNZSHQMf-5" value="&lt;span&gt;&lt;font&gt;&lt;span style=&quot;font-size: 18px&quot;&gt;创建vue对象，&lt;/span&gt;&lt;br&gt;&lt;span style=&quot;font-size: 18px&quot;&gt;引入路由./route/index.js和App组件，&lt;/span&gt;&lt;br&gt;&lt;span style=&quot;font-size: 18px&quot;&gt;import App from &#39;./App.vue&#39;&lt;/span&gt;&lt;br&gt;&lt;span style=&quot;font-size: 18px&quot;&gt;渲染到#app的html元素&lt;/span&gt;&lt;/font&gt;&lt;/span&gt;" style="text;html=1;align=left;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
+          <mxGeometry x="330" y="150" width="330" height="70" as="geometry" />
+        </mxCell>
+        <mxCell id="1LAcV-oBZt9VrNZSHQMf-31" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;entryX=0.56;entryY=1.007;entryDx=0;entryDy=0;entryPerimeter=0;fontSize=18;" edge="1" parent="1" source="1LAcV-oBZt9VrNZSHQMf-6" target="1LAcV-oBZt9VrNZSHQMf-3">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="1LAcV-oBZt9VrNZSHQMf-32" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;fontSize=18;" edge="1" parent="1" source="1LAcV-oBZt9VrNZSHQMf-6" target="1LAcV-oBZt9VrNZSHQMf-20">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="1LAcV-oBZt9VrNZSHQMf-34" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=0;exitY=0.5;exitDx=0;exitDy=0;entryX=0.5;entryY=1;entryDx=0;entryDy=0;fontSize=18;" edge="1" parent="1" source="1LAcV-oBZt9VrNZSHQMf-6" target="1LAcV-oBZt9VrNZSHQMf-2">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="1LAcV-oBZt9VrNZSHQMf-6" value="&lt;font style=&quot;font-size: 18px&quot;&gt;route/index.js&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;align=left;" vertex="1" parent="1">
+          <mxGeometry x="675" y="400" width="125" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="1LAcV-oBZt9VrNZSHQMf-14" value="" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;exitX=1;exitY=0.5;exitDx=0;exitDy=0;entryX=0;entryY=0.5;entryDx=0;entryDy=0;fontSize=18;endArrow=none;" edge="1" parent="1" source="1LAcV-oBZt9VrNZSHQMf-2">
+          <mxGeometry relative="1" as="geometry">
+            <mxPoint x="550" y="270" as="sourcePoint" />
+            <mxPoint x="550" y="265" as="targetPoint" />
+          </mxGeometry>
+        </mxCell>
+        <mxCell id="1LAcV-oBZt9VrNZSHQMf-16" value="渲染到&lt;br&gt;&amp;lt;div id=&quot;app&quot;&amp;gt;&amp;nbsp;" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontSize=18;" vertex="1" parent="1">
+          <mxGeometry x="650" y="210" width="150" height="50" as="geometry" />
+        </mxCell>
+        <mxCell id="1LAcV-oBZt9VrNZSHQMf-20" value="&lt;font style=&quot;font-size: 18px&quot;&gt;Login.vue&lt;br&gt;子组件&lt;br&gt;&lt;/font&gt;" style="rounded=1;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+          <mxGeometry x="675" y="700" width="125" height="60" as="geometry" />
+        </mxCell>
+        <mxCell id="1LAcV-oBZt9VrNZSHQMf-29" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;fontSize=18;" edge="1" parent="1" source="1LAcV-oBZt9VrNZSHQMf-28" target="1LAcV-oBZt9VrNZSHQMf-4">
+          <mxGeometry relative="1" as="geometry" />
+        </mxCell>
+        <mxCell id="1LAcV-oBZt9VrNZSHQMf-28" value="&lt;div&gt;&amp;lt;div class=&quot;login_container&quot;&amp;gt;&lt;/div&gt;&lt;div&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; 登录组件&lt;/div&gt;&lt;div&gt;&amp;nbsp;&amp;lt;/div&amp;gt;&lt;/div&gt;" style="text;html=1;align=left;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontSize=18;" vertex="1" parent="1">
+          <mxGeometry x="650" y="760" width="270" height="70" as="geometry" />
+        </mxCell>
+        <mxCell id="1LAcV-oBZt9VrNZSHQMf-8" value="&lt;span style=&quot;font-size: 18px&quot;&gt;import VueRouter from &#39;vue-router&#39;&lt;br&gt;导入VueRoute模块，&lt;/span&gt;&lt;span style=&quot;font-size: 18px&quot;&gt;创建VueRoute对象，&lt;/span&gt;&lt;br&gt;&lt;span style=&quot;font-size: 18px&quot;&gt;导入编辑好的组件&lt;br&gt;&lt;/span&gt;&lt;div&gt;&lt;span style=&quot;font-size: 18px&quot;&gt;import Login from &#39;../components/Login.vue&#39;&lt;/span&gt;&lt;/div&gt;&lt;span style=&quot;font-size: 18px&quot;&gt;定义路由列表：&lt;br&gt;&lt;/span&gt;&lt;span style=&quot;font-size: 18px&quot;&gt;routes: [&lt;/span&gt;&lt;div&gt;&lt;span style=&quot;font-size: 18px&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; {path: &#39;/login&#39;, component: Login},&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;font-size: 18px&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; //访问根目录，重定向到Login页面&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;font-size: 18px&quot;&gt;&amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp; {path: &#39;/&#39;, redirect: &#39;/login&#39;}&lt;/span&gt;&lt;/div&gt;&lt;div&gt;&lt;span style=&quot;font-size: 18px&quot;&gt;&amp;nbsp; &amp;nbsp; ]&lt;/span&gt;&lt;/div&gt;" style="text;html=1;align=left;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;" vertex="1" parent="1">
+          <mxGeometry x="750" y="490" width="410" height="170" as="geometry" />
+        </mxCell>
+        <mxCell id="1LAcV-oBZt9VrNZSHQMf-33" value="&lt;span style=&quot;text-align: left&quot;&gt;login_container的div&lt;br&gt;是在 app div的包裹下的&lt;/span&gt;" style="text;html=1;align=center;verticalAlign=middle;resizable=0;points=[];autosize=1;strokeColor=none;fillColor=none;fontSize=18;" vertex="1" parent="1">
+          <mxGeometry x="960" y="740" width="210" height="50" as="geometry" />
+        </mxCell>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>