Vue页面骨架—— 组件拆分

朱雀 2021-07-25 15:48 410阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70]

--------------------

QQ 1285575001  
Wechat M010527  
技术交流 QQ群599020441  
纪年科技aming

--------------------

页面整体设计—>根据切图 组件拆分（组件化开发）

![在这里插入图片描述][20200111102105737.png]  
![在这里插入图片描述][2020011110191541.png]整体组件  
header组件  
导航组件  
![在这里插入图片描述][20200111102114196.png]

*  并 添加自定义 样式  
    ![在这里插入图片描述][20200111102215985.png]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 1]![在这里插入图片描述][20200111102330605.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 2]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 3]  
eslink 不能用分号 强加分号  
![在这里插入图片描述][20200111103104636.png]![在这里插入图片描述][20200111103324673.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 4]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 5]![在这里插入图片描述][20200111103407908.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 6]![在这里插入图片描述][2020011110360248.png]![在这里插入图片描述][20200111103616275.png]![在这里插入图片描述][20200111103643751.png] ![在这里插入图片描述][20200111103734485.png]![在这里插入图片描述][20200111103707134.png]![在这里插入图片描述][20200111103759780.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 7]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 8]![在这里插入图片描述][20200111103957461.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 9]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 10]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 11]![在这里插入图片描述][20200111104310376.png]![在这里插入图片描述][20200111104336800.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 12]

*  先注册  
    ![在这里插入图片描述][20200111104448916.png]![在这里插入图片描述][20200111104504223.png]  
    ![在这里插入图片描述][20200111104518864.png]![在这里插入图片描述][20200111104721575.png]  
    ![在这里插入图片描述][20200111104741101.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 13]![在这里插入图片描述][20200111104908894.png]![在这里插入图片描述][20200111104927295.png]![在这里插入图片描述][20200111104949975.png]![在这里插入图片描述][20200111105012326.png]![在这里插入图片描述][20200111105044369.png]![在这里插入图片描述][20200111105056269.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 14]![在这里插入图片描述][20200111105150153.png]![在这里插入图片描述][2020011110523592.png]![在这里插入图片描述][20200111105239583.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 15]
 *  冲突  
    ![在这里插入图片描述][20200111105421888.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 16]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 17]![在这里插入图片描述][20200111105552122.png]![在这里插入图片描述][20200111105609768.png]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 18]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 19]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 20]![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 21]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70]: /images/20210725/e2f7767e18204d2bad60757092a5fdcb.png
[20200111102105737.png]: /images/20210725/4b75a49a1d6e4676bb75cd5fde09a878.png
[2020011110191541.png]: /images/20210725/878ae869bc2d4db398ac51b416b49cc4.png
[20200111102114196.png]: /images/20210725/dd97e1db368e4a52ac35fe2731dedee2.png
[20200111102215985.png]: /images/20210725/42fc554c2709424c94f76137a6c54b2b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200111102242130.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw,size_16,color_FFFFFF,t_70
[20200111102330605.png]: /images/20210725/0e4ba55975da4515b314e605e3695b5d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200111102736325.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 3]: /images/20210725/8b2009a9bc9e4a4792da078eed695453.png
[20200111103104636.png]: https://img-blog.csdnimg.cn/20200111103104636.png
[20200111103324673.png]: https://img-blog.csdnimg.cn/20200111103324673.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200111103335138.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200111103350780.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw,size_16,color_FFFFFF,t_70
[20200111103407908.png]: https://img-blog.csdnimg.cn/20200111103407908.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200111103440414.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw,size_16,color_FFFFFF,t_70
[2020011110360248.png]: https://img-blog.csdnimg.cn/2020011110360248.png
[20200111103616275.png]: https://img-blog.csdnimg.cn/20200111103616275.png
[20200111103643751.png]: https://img-blog.csdnimg.cn/20200111103643751.png
[20200111103734485.png]: https://img-blog.csdnimg.cn/20200111103734485.png
[20200111103707134.png]: https://img-blog.csdnimg.cn/20200111103707134.png
[20200111103759780.png]: https://img-blog.csdnimg.cn/20200111103759780.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 7]: /images/20210725/fc52a3d3ec2043529e6ddeaabb97f71e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/2020011110395638.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw,size_16,color_FFFFFF,t_70
[20200111103957461.png]: https://img-blog.csdnimg.cn/20200111103957461.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 9]: /images/20210725/09a428cdf21b45799dfeee0b5f7fcead.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200111104208116.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20200111104229685.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw,size_16,color_FFFFFF,t_70
[20200111104310376.png]: https://img-blog.csdnimg.cn/20200111104310376.png
[20200111104336800.png]: https://img-blog.csdnimg.cn/20200111104336800.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 12]: /images/20210725/b90454253bf441c199f5f2af81137dc1.png
[20200111104448916.png]: https://img-blog.csdnimg.cn/20200111104448916.png
[20200111104504223.png]: /images/20210725/d3e5b323c456435d90397cb013c355a4.png
[20200111104518864.png]: https://img-blog.csdnimg.cn/20200111104518864.png
[20200111104721575.png]: /images/20210725/2cf5d92b8e7c42fb991f80da75f3c0dd.png
[20200111104741101.png]: https://img-blog.csdnimg.cn/20200111104741101.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20200111104857316.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw,size_16,color_FFFFFF,t_70
[20200111104908894.png]: https://img-blog.csdnimg.cn/20200111104908894.png
[20200111104927295.png]: https://img-blog.csdnimg.cn/20200111104927295.png
[20200111104949975.png]: https://img-blog.csdnimg.cn/20200111104949975.png
[20200111105012326.png]: https://img-blog.csdnimg.cn/20200111105012326.png
[20200111105044369.png]: https://img-blog.csdnimg.cn/20200111105044369.png
[20200111105056269.png]: https://img-blog.csdnimg.cn/20200111105056269.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20200111105135367.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw,size_16,color_FFFFFF,t_70
[20200111105150153.png]: https://img-blog.csdnimg.cn/20200111105150153.png
[2020011110523592.png]: https://img-blog.csdnimg.cn/2020011110523592.png
[20200111105239583.png]: https://img-blog.csdnimg.cn/20200111105239583.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 15]: /images/20210725/1b9bf5453d6a471689b5e74fbaf84de5.png
[20200111105421888.png]: https://img-blog.csdnimg.cn/20200111105421888.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/20200111105446583.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 17]: https://img-blog.csdnimg.cn/20200111105544888.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw,size_16,color_FFFFFF,t_70
[20200111105552122.png]: https://img-blog.csdnimg.cn/20200111105552122.png
[20200111105609768.png]: https://img-blog.csdnimg.cn/20200111105609768.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 18]: https://img-blog.csdnimg.cn/20200111105948439.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 19]: https://img-blog.csdnimg.cn/20200111110108917.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 20]: https://img-blog.csdnimg.cn/20200111110116800.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzNjA4MDAw_size_16_color_FFFFFF_t_70 21]: /images/20210725/fae6a3a8ba6c4ec28f6e8c1ebfdefe31.png