我们利用Hbuilder编写前端的时候，可以提前学习一下Vue2（和VUE差别挺大的，感兴趣的还可以学习一下Vue3.0）和Element-UI，这个是可以帮助我们更快的完成编写， 它可以提供给你一张图片，你的光标在哪里，他会显示信息，包括颜色，大小等，如图
在他的下方就会显示代码
1. <el-container style="height: 500px; border: 1px solid #eee"> 2. <el-aside width="200px" style="background-color: rgb(238, 241, 246)"> 3. <el-menu :default-openeds="['1', '3']"> 4. <el-submenu index="1"> 5. <template slot="title"><i class="el-icon-message"></i>导航一</template> 6. <el-menu-item-group> 7. <template slot="title">分组一</template> 8. <el-menu-item index="1-1">选项1</el-menu-item> 9. <el-menu-item index="1-2">选项2</el-menu-item> 10. </el-menu-item-group> 11. <el-menu-item-group title="分组2"> 12. <el-menu-item index="1-3">选项3</el-menu-item> 13. </el-menu-item-group> 14. <el-submenu index="1-4"> 15. <template slot="title">选项4</template> 16. <el-menu-item index="1-4-1">选项4-1</el-menu-item> 17. </el-submenu> 18. </el-submenu> 19. <el-submenu index="2"> 20. <template slot="title"><i class="el-icon-menu"></i>导航二</template> 21. <el-menu-item-group> 22. <template slot="title">分组一</template> 23. <el-menu-item index="2-1">选项1</el-menu-item> 24. <el-menu-item index="2-2">选项2</el-menu-item> 25. </el-menu-item-group> 26. <el-menu-item-group title="分组2"> 27. <el-menu-item index="2-3">选项3</el-menu-item> 28. </el-menu-item-group> 29. <el-submenu index="2-4"> 30. <template slot="title">选项4</template> 31. <el-menu-item index="2-4-1">选项4-1</el-menu-item> 32. </el-submenu> 33. </el-submenu> 34. <el-submenu index="3"> 35. <template slot="title"><i class="el-icon-setting"></i>导航三</template> 36. <el-menu-item-group> 37. <template slot="title">分组一</template> 38. <el-menu-item index="3-1">选项1</el-menu-item> 39. <el-menu-item index="3-2">选项2</el-menu-item> 40. </el-menu-item-group> 41. <el-menu-item-group title="分组2"> 42. <el-menu-item index="3-3">选项3</el-menu-item> 43. </el-menu-item-group> 44. <el-submenu index="3-4"> 45. <template slot="title">选项4</template> 46. <el-menu-item index="3-4-1">选项4-1</el-menu-item> 47. </el-submenu> 48. </el-submenu> 49. </el-menu> 50. </el-aside> 51. 52. <el-container> 53. <el-header style="text-align: right; font-size: 12px"> 54. <el-dropdown> 55. <i class="el-icon-setting" style="margin-right: 15px"></i> 56. <el-dropdown-menu slot="dropdown"> 57. <el-dropdown-item>查看</el-dropdown-item> 58. <el-dropdown-item>新增</el-dropdown-item> 59. <el-dropdown-item>删除</el-dropdown-item> 60. </el-dropdown-menu> 61. </el-dropdown> 62. <span>王小虎</span> 63. </el-header> 64. 65. <el-main> 66. <el-table :data="tableData"> 67. <el-table-column prop="date" label="日期" width="140"> 68. </el-table-column> 69. <el-table-column prop="name" label="姓名" width="120"> 70. </el-table-column> 71. <el-table-column prop="address" label="地址"> 72. </el-table-column> 73. </el-table> 74. </el-main> 75. </el-container> 76. </el-container> 77. 78. <style> 79. .el-header { 80. background-color: #B3C0D1; 81. color: #333; 82. line-height: 60px; 83. } 84. 85. .el-aside { 86. color: #333; 87. } 88. </style> 89. 90. <script> 91. export default { 92. data() { 93. const item = { 94. date: '2016-05-02', 95. name: '王小虎', 96. address: '上海市普陀区金沙江路 1518 弄' 97. }; 98. return { 99. tableData: Array(20).fill(item) 100. } 101. } 102. }; 103. </script>
后续会更新学习笔记
