Chrome插件 - 前端代码编辑插件Web Maker使用详解（代替CodePen、JSRun）
但使用这些工具必须要连网，而连网加载这些应用时就总会有些延迟。下面介绍一款专门为前端开发者而制作的浏览器扩展插件：Web Maker。
一、基本介绍
1，什么是 Web Maker?
Web Maker 是一款 Chrome 扩展插件，它可以将我们浏览器的选项卡（可选） 转换成 web 编译器，我们可以在其中编写 HTML、CSS 和 JavaScript，同时还可以实时预览页面效果。
2，功能特点
（1）速度极快，可离线工作
- 作为一款 chrome 扩展插件，Web Maker 完全寄生在浏览器中。它没有涉及到网络需求（除非使用一个第三方的 JavaScript 和 CSS 库）。所以它初始启动迅速。并且对代码所做的每次变动都能在预览中即时自动刷新。
- 我们还可以选择保存或者加载编辑好的项目以便以后再次编辑，它们会被保存在浏览器的本地存储中。
（2）预处理器支持
- Web Maker 为我们提供了 HTML、CSS 以及 JavaScript 三种语言中所有最常用的预处理器，包括 Markdown、Jade、SCSS、Less、JSX 以及 TypeScript。
- 如果需要在项目中使用外部的 JavaScript 或 CSS 库 （如 jQuery 或 Bootstrap），只需简单点击一下“Add Library”按钮，从可用列表中，从中选择使用即可。
（3）预览区域截图捕获功能
- Chrome 扩展的 API 赋予了 Web Maker 强大的能力去做那些普通的 web 应用难以实现的功能。比如说截图捕获功能，只需单击一下“Take Screenshot”按钮即可随时得到预览区域的截图。
（4）可另存为 HTML 或在 CodePen 中打开
- 如果想在其他地方使用 Web Maker 编辑的项目，只需点击“Save as HTML file”选项即可将项目中的 HTML、CSS 和 JavaScript 代码嵌入到一个 HTML 文件中。
- 我们也可以点击“Open on CodePen”按钮在 CodePen 中打开我们的项目。
3，安装配置
直接在 Chrome Web Store 上搜索安装即可（点击跳转）：
二、样例1：JQuery + Font Awesome
1，最终效果
点击按钮可以随机改变右侧文字图标的颜色。
2，实现过程
（1）点击右上角的“Add library”按钮开始添加第三方库。
（2）点击弹出页下拉框，选择添加 jQuery。
（3）接着再次点击下拉框，选择添加 FontAwesome 5：
（4）配置完毕后回到主界面，在 HTML 栏目中添加如下代码：
<button id="changeColor">随机颜色</button> <i id="fa1" class="fa fa-camera-retro fa-3x"></i>
（5）在 JS 栏目中添加如下代码，右侧窗口即可实时显示出最终效果：
$(document).ready(function(){
// 随机颜色按钮点击
$("#changeColor").click(function(){
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
var color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
$("#fa1").css("color", color);
});
});
三、样例2：Vue.js + Element U
1，最终效果
通过上方输入框可以实时筛选下方表格的数据。点击重置按钮则清空筛选条件。
2，实现过程
（1）由于 Web Maker 已经内置了 Vue 模版，我们新建时直接选择 Vue 项目即可。
（2）对于其它没有列出来的库，比如 Element UI。我们则通过手动指定 js 和 css 的 url 地址来引入：
https://unpkg.com/element-ui/lib/index.js https://unpkg.com/element-ui/lib/theme-chalk/index.css
（3）配置完毕后回到主界面，在 HTML 栏目中添加如下代码：
<div id="app">
<div class="search-wrapper">
<el-input id="searchInput" placeholder="根据姓名筛选..." v-model="filter"></el-input>
<el-button type="primary" @click="reset">重置</el-button>
</div>
<el-table
:data="getTableData"
:border="true"
:stripe="true"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</div>
（4）在 CSS 栏目中添加如下代码：
.search-wrapper {
margin-bottom: 10px;
display: flex;
}
.search-wrapper .el-input {
flex:1;
margin-right:10px;
}
（5）在 JS 栏目中添加如下代码，右侧窗口即可实时显示出最终效果：
new Vue({
el: '#app',
data() {
return {
filter: '',
tableData: [{
date: '2016-05-02',
name: 'hangge',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '李小龙',
address: '上海市普陀区金沙江路 1519 弄'
}]
}
},
computed: {
getTableData() {
var tableData = this.tableData.filter((item) => {
return item.name.toLowerCase().includes(this.filter.toLowerCase());
});
return tableData;
}
},
methods: {
reset() {
this.filter = "";
}
},
mounted: function () {
}
})
