前端 - 开发工具 - 收集

た入场券 2022-12-08 05:16 178阅读 0赞

1.应用场景

<table> 
 <tbody> 
 <tr> 
 <td> 主要用于前端项目开发，比如编写HTMl+CSS网页布局的工具， 以及JS相关工具. &nbsp; 简单说: 就是为了追求高效率 </td> 
 </tr> 
 </tbody> 
</table>

2.学习/操作

<table> 
 <tbody> 
 <tr> 
 <td> 补充： 前端开发的编辑器，个人推荐使用vscode 如果进行ui布局实现，安装插件，信息如下： HTML CSS Support <img alt="" height="233" src="https://img-blog.csdnimg.cn/20200918162135313.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="342"> &nbsp; Beautify css/sass/scss/less&nbsp; //美化css... Easy LESS&nbsp; //自动编译less为css <img alt="" height="360" src="https://img-blog.csdnimg.cn/20200918171229988.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="345"> 自动编译less为css，相同目录生成, 相同文件名的css文件 <img alt="" height="685" src="https://img-blog.csdnimg.cn/20200918172052278.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1200"> &nbsp; &nbsp; view-in-browser&nbsp; //用于在vscode中快速打开浏览器进行html的效果预览 --- 特使用于CSS布局 <img alt="" height="392" src="https://img-blog.csdnimg.cn/2020091915033853.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="882"> <img alt="" height="667" src="https://img-blog.csdnimg.cn/20200919150658410.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="938"> &nbsp; &nbsp; <img alt="" height="230" src="https://img-blog.csdnimg.cn/20200919150859493.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="415"> &nbsp; 格式化代码 安装插件 -- 格式化插件&nbsp; //这里暂不作推荐 不过这里使用的是 然后选择点击 格式化文档 <img alt="" height="836" src="https://img-blog.csdnimg.cn/20200919154020282.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="770"> &nbsp; Note: 因为可能同时安装多个格式化插件, 可以自定选择用哪个 <img alt="" height="469" src="https://img-blog.csdnimg.cn/20200919154539622.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="337"> <img alt="" height="148" src="https://img-blog.csdnimg.cn/20200919154509163.png" width="710"> &nbsp; 如果想按下CTRL+S保存, 自动格式化代码 <img alt="" height="568" src="https://img-blog.csdnimg.cn/20200919154146420.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1052"> 然后按下ctrl+S即可出现效果. 更多配置, 后续补充... &nbsp; &nbsp; Note: <h3>下载插件时, 建议先看看下载量以及星际好评~~~</h3> &nbsp; ---------------------------------------------------------------------------------我是分割线------------------------------------------------------------------------------------------ &nbsp; &nbsp; &nbsp; 1.HTML+CSS&nbsp; --- 网页布局 
 <table> 
 <tbody> 
 <tr> 
 <td> 1.标尺 FSCapture.exe&nbsp; &nbsp;//需要购买，至于解决办法， 可执行解决或后续补充. 百度云盘：&nbsp; //链接: <a href="https://pan.baidu.com/s/1qRyjVU6JTyQddMGqqorLGA" rel="nofollow">https://pan.baidu.com/s/1qRyjVU6JTyQddMGqqorLGA </a>提取码: q9ud1.6MB 直接下载安装即可 <img alt="" height="58" src="https://img-blog.csdnimg.cn/2020091811202362.png" width="347"> &nbsp; 2.吸色器 picpick&nbsp; &nbsp;//<a href="https://en.softonic.com/download/picpick/windows/post-download" rel="nofollow">https://en.softonic.com/download/picpick/windows/post-download</a> 百度云盘： 链接: <a href="https://pan.baidu.com/s/1beI0pq6IB2cUhQF5rB8sDQ" rel="nofollow">https://pan.baidu.com/s/1beI0pq6IB2cUhQF5rB8sDQ</a> 提取码: 3eau <img alt="" height="492" src="https://img-blog.csdnimg.cn/20200918112030338.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="765"> &nbsp; 补充： <a href="https://flatuicolors.com/" rel="nofollow">https://flatuicolors.com/</a>&nbsp; //复制颜色面板 网站，可用于设计网页ui&nbsp;-- 推荐&nbsp; //这里使用了Google 翻译 <img alt="" height="479" src="https://img-blog.csdnimg.cn/20200918155300407.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="779"> 任选一个Flat UI Palette, 如下：&nbsp; <img alt="" height="487" src="https://img-blog.csdnimg.cn/20200918155320157.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="837"> 点击想要得颜色块，即会自动复制该颜色的十六进制.&nbsp; <img alt="" height="799" src="https://img-blog.csdnimg.cn/20200918155507535.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1082"> ctrl+v 出现如下：&nbsp;#1abc9c &nbsp; .... </td> 
 </tr> 
 </tbody> 
 </table>2.JS 
 <table> 
 <tbody> 
 <tr> 
 <td>TBD</td> 
 </tr> 
 </tbody> 
 </table>3.UI 框架 
 <table> 
 <tbody> 
 <tr> 
 <td> Bootstrap Ant Design /Pro </td> 
 </tr> 
 </tbody> 
 </table>&nbsp; 后续补充 ... </td> 
 </tr> 
 </tbody> 
</table>

3.问题/补充

4.参考

<table> 
 <tbody> 
 <tr> 
 <td> <a href="https://search.bilibili.com/all?keyword=bootstrap%20&amp;from_source=nav_search_new" rel="nofollow">https://search.bilibili.com/all?keyword=bootstrap%20&amp;from_source=nav_search_new</a> <a href="https://www.bilibili.com/video/BV1YW411T7yy?p=11" rel="nofollow">https://www.bilibili.com/video/BV1YW411T7yy?p=11</a>&nbsp; //推荐 - 可以了解学习掌握bootstap 栅格系统的精妙之处. </td> 
 </tr> 
 </tbody> 
</table>

后续补充

...