插件开发实录

作者: 前端知识  发布:2019-11-03

vuejs 初体验— Chrome 插件开拓实录

2017/05/16 · JavaScript · Chrome, vuejs

初稿出处: janilychen   

背景

对那时候常和卡通开拓打交道的开采者对于Animate.css以此动漫库不会面生,它把风流倜傥部分宽广的卡通片效果都卷入起来了,极度实用。然而不经常在付出中,仅仅只是要求某大器晚成三个卡通效果,把一切CSS文件都引进,那样不是太好。

必要就应际而生了,能或不可能有一个工具得以直接预览Animate.css对应的动漫片效果,并且转换对应的卡通代码呢?

作为贰个UI开拓,日常跟Chrome浏览器打交道最多,于是就整了多个Chrome插件能够立即预览对应Animate.css中的动漫效果并扭转对应的卡通代码,那样在骨子里付出中蒙受一些内需接收到Animate.css中的动漫效果时,可以大大的升高大家的支付功效。

插件安装地方,快来安装体验吧!

用作三个程序员,捣鼓些小工具,不但能够学些新本领还足以加强大家的费用效用,甘之如饴呢。

上边就以三个轻易的flexbox对齐预览的插件为例,讲讲使用vuejs开垦Chrome插件的支付体验和频率。

触类旁通如下图所示:

金沙澳门官网网址 1

插件首要效能是依照客商筛选的对齐格局,实时预览效果和突显相应的CSS代码,方便我们能够间接拷贝代码使用。

Chrome插件开辟基本知识

在运用商店中下载下来的插件基本上都以以.crx为文件后缀,该公文其实正是三个压缩包,包含插件所必要的html、css、javascript、图片财富等等文件。

支付二个插件就跟我们平日做web开采流程没多大的差异,便是先搭好中央的页面,然后使用js来写交互作用逻辑等成效。

举例说自身这些插件的目录文件如下:

金沙澳门官网网址 2

manifest.json文件

文本中须要在意一下的mainfest.json以此文件,那些json文件的效应是提供插件的各个音讯,举个例子插件能够做的作业,以致插件的文书配置等等新闻。上边是四个清单文件的演示:

{ "manifest_version": 2, "name": "One-click Kittens", "description": "This extension demonstrates a browser action with kittens.", "version": "1.0", "permissions": [ "" ], "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{
  "manifest_version": 2,
 
  "name": "One-click Kittens",
  "description": "This extension demonstrates a browser action with kittens.",
  "version": "1.0",
 
  "permissions": [
    "https://secure.flickr.com/"
  ],
  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  }
}

先是行申明我们选择清单文件格式的版本 2,必须带有(版本 1 是旧的,已弃用,不指出利用卡塔 尔(英语:State of Qatar)。

接下去的局地概念扩展程序的名称、描述与版本。那一个都会在 Chrome 浏览器中央银行使,向客户显示已安装的扩充程序,同有的时候间在 Chrome 英特网应用店中向地下的新顾客展示你的恢宏程序。名称应当精短,描述不要比一句话左右还长(前面将会有更加的多的上空用于更详细的呈报卡塔尔。

末段风华正茂有的首先乞求权限,用于访谈 上的多少,并声称该扩张程序实现了二个浏览器开关,同不时候在此豆蔻年华进度中为它钦点三个暗许Logo与弹出窗口。

概念浏览器开关时指向了七个资源文件:icon.png 与 popup.html。那多个能源都一定要在强盛程序包中留存,图片是扩张的来得,html是扩展具体运作的根底文件。

现实详细的支付教程能够看看官方的其一文书档案,非常鲜明的入门教程。

职能完结-Vuejs实践

全体插件的为主人机联作成效极其轻便,如小说初步的动图所示,客户筛选对齐形式,代码区域展现相应的代码。这种简易多少人机联作使用vuejs再适合可是了,vuejs底子知识这里就不再细说了。

那边需求小心的一些是,chrome 扩充的周转条件有豆蔻梢头部分特殊供给,称为 Content Security Policy (CSP),使得常常的 vue 不能够被正常使用。若是用的是 vue 1.x,那么能够下载 csp 版本,在 这里。假诺是 2.x 版本,请参见官方网站文书档案的这一段。

中心代码如下所示。

HTML:

XHTML

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- 引进样式 --> <link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="mystique.css"> </head> <body> <div id="app"> <h1 class="title-box">flexbox对齐正是那般轻巧</h1> </div> <div id="type-select"> <select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <!-- <span>Selected: {{ selected }}</span> --> <div class="resule-preview"> <div v-bind:class="selected" class="cols"> <div class="col col-3"> <p>对齐</p> </div> <div class="col col-3"> <p>对齐</p> </div> <div class="col col-3"> <p>对齐</p> </div> </div> </div> <div class="resule-code"> <pre class="code-display"> <code class="code-lang"> {{ cssMsg }} </code> </pre> </div> </div> <!-- 先引入 Vue --> <script src="vue.js"></script> <!-- 引进组件库 --> <script src="main.js"></script> </body> </html><!-- 引进样式 -->

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- 引入样式 -->
  <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="mystique.css">
</head>
<body>
    <div id="app">
      <h1 class="title-box">flexbox对齐就是这么简单</h1>
    </div>
    <div id="type-select">
      <select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
          {{ option.text }}
        </option>
      </select>
      <!-- <span>Selected: {{ selected }}</span> -->
      <div class="resule-preview">
        <div v-bind:class="selected" class="cols">
          <div class="col col-3">
              <p>对齐</p>
          </div>
          <div class="col col-3">
            <p>对齐</p>
          </div>
          <div class="col col-3">
            <p>对齐</p>
          </div>
        </div>
      </div>
      <div class="resule-code">
        <pre class="code-display">
            <code class="code-lang">
               {{ cssMsg }}
            </code>
        </pre>
      </div>
    </div>
    <!-- 先引入 Vue -->
    <script src="vue.js"></script>
    <!-- 引入组件库 -->
    <script src="main.js"></script>
</body>
</html><!-- 引入样式 -->

CSS就不列出来了,能够在源代码中查阅。

上面来行使vuejs来兑现插件的功力。

效果与利益实现

运用 v-for 指令依据后生可畏组数组的选项列表举行渲染。 v-for 指令要求以 item in items 形式的非常语法, items 是源数据数组何况 item 是数组成分迭代的外号。

而下拉框(select卡塔 尔(阿拉伯语:قطر‎列表的渲染,就能够运用vue中的v-for艺术来渲染下拉列表选项,下拉选项数据写在js中的data对象中的options中。用v-bind主意来绑定option的value值,代码如下所示:

XHTML

<select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select>

1
2
3
4
5
<select v-model="selected">
        <option v-for="option in options" v-bind:value="option.value">
          {{ option.text }}
        </option>
</select>

在vuejs中得以用 金沙澳门官网网址 ,v-model 指令在表单控件成分上创立双向数据绑定。它会依据控件类型自动选用精确的方式来更新成分。这里在select中选用v-model方法来监听选中的值。

为了能预览分歧对齐的功能,先在CSS中写好和下拉框中值相近的相应的类名样式,那样当客商选中差异的值的时候能呈现分化的意义。这里大家接受v-bind方法来兑现那么些意义,它最主要用来属性绑定,大家得以给v-bind:class叁个指标,以动态地切换class。

XHTML

<div v-bind:class="selected" class="cols"> <div class="col col-3"> <p>对齐</p> </div> <div class="col col-3"> <p>对齐</p> </div> <div class="col col-3"> <p>对齐</p> </div> </div>

1
2
3
4
5
6
7
8
9
10
11
<div v-bind:class="selected" class="cols">
          <div class="col col-3">
              <p>对齐</p>
          </div>
          <div class="col col-3">
            <p>对齐</p>
          </div>
          <div class="col col-3">
            <p>对齐</p>
          </div>
</div>

下拉框那块成效就像此,简简单单几行代码就得以完成了。出主意倘使用jquery大概是原生的js来完毕均等的效劳,不止代码量要大並且写起来也并未有vuejs这么舒心。

接下去是代码同步成效,即在代码区域显示对应flex对齐的CSS代码。

起初早前先讲讲vuejs中的computed属性方法,可总括属性 (computed properties) 正是海市蜃楼于原始数据中,而是在运营时实时计算出来的品质。

对应到大家这一个实例,正是当客户接纳flexbox差别的对齐方式的时候,及时联合对应的CSS代码到代码预览区域。轻巧起见,直接把多少个例外的代码写到js中:

data: { selected: 'cols-center', cssText:{ 'cols-center' : 'nr-webkit-justify-content: center;nr-ms-flex-pack: center;nrjustify-content: center;', 'cols-space-between' : 'nr-webkit-justify-content: space-between;nr-ms-flex-pack: justify;nrjustify-content: space-between;', 'cols-space-around' : 'nr-webkit-justify-content: space-around;nr-ms-flex-pack: distribute;nrjustify-content: space-around;' }, options: [ { text: '居中对齐', value: 'cols-center'}, { text: '两端对齐', value: 'cols-space-between'}, { text: '间距相等', value: 'cols-space-around'} ] },

1
2
3
4
5
6
7
8
9
10
11
12
13
data: {
    selected: 'cols-center',
    cssText:{
     'cols-center' : 'nr-webkit-justify-content: center;nr-ms-flex-pack: center;nrjustify-content: center;',
     'cols-space-between' : 'nr-webkit-justify-content: space-between;nr-ms-flex-pack: justify;nrjustify-content: space-between;',
     'cols-space-around' : 'nr-webkit-justify-content: space-around;nr-ms-flex-pack: distribute;nrjustify-content: space-around;'
    },
    options: [
      { text: '居中对齐', value: 'cols-center'},
      { text: '两端对齐', value: 'cols-space-between'},
      { text: '间隔相等', value: 'cols-space-around'}
]
    },

依据分歧的名字对应不相同的CSS代码。然后选用computed方法来依照顾客筛选的值实时收取对应的CSS代码:

computed:{ cssMsg:function(){ console.log(this) return this.cssText[this.selected]; } }

1
2
3
4
5
6
computed:{
     cssMsg:function(){
     console.log(this)
     return this.cssText[this.selected];
     }
    }

总体代码如下:

var typeSelect = new Vue({ el: 'body', data: { selected: 'cols-center', cssText:{ 'cols-center' : 'nr-webkit-justify-content: center;nr-ms-flex-pack: center;nrjustify-content: center;', 'cols-space-between' : 'nr-webkit-justify-content: space-between;nr-ms-flex-pack: justify;nrjustify-content: space-between;', 'cols-space-around' : 'nr-webkit-justify-content: space-around;nr-ms-flex-pack: distribute;nrjustify-content: space-around;' }, options: [ { text: '居中对齐', value: 'cols-center'}, { text: '两端对齐', value: 'cols-space-between'}, { text: '间距相等', value: 'cols-space-around'} ] }, computed:{ cssMsg:function(){ console.log(this) return this.cssText[this.selected]; } } })

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var typeSelect = new Vue({
   el: 'body',
   data: {
    selected: 'cols-center',
    cssText:{
     'cols-center' : 'nr-webkit-justify-content: center;nr-ms-flex-pack: center;nrjustify-content: center;',
     'cols-space-between' : 'nr-webkit-justify-content: space-between;nr-ms-flex-pack: justify;nrjustify-content: space-between;',
     'cols-space-around' : 'nr-webkit-justify-content: space-around;nr-ms-flex-pack: distribute;nrjustify-content: space-around;'
    },
    options: [
      { text: '居中对齐', value: 'cols-center'},
      { text: '两端对齐', value: 'cols-space-between'},
      { text: '间隔相等', value: 'cols-space-around'}
]
    },
    computed:{
     cssMsg:function(){
     console.log(this)
     return this.cssText[this.selected];
     }
    }
})

末段在html中绑定通过computed方法赢得数码也等于CSS:

XHTML

<div class="resule-code"> <pre class="code-display"> <code class="code-lang"> {{ cssMsg }} </code> </pre> </div>

1
2
3
4
5
6
7
<div class="resule-code">
        <pre class="code-display">
            <code class="code-lang">
               {{ cssMsg }}  
            </code>
        </pre>
      </div>

插件代码下载

支出好之后,能够直接在chrome中运转来调解。张开扩大面板,勾选开拓者情势,然后加载刚开采扩充所在的目录就能够直接运营了。

金沙澳门官网网址 3

七个大概的插件就到位了,通过那七个精简的chrome插件就能够心获得vuejs在web开辟中回顾、崇高的魔力,还会有何理由并非起来呢。

1 赞 5 收藏 评论

金沙澳门官网网址 4

本文由金沙澳门官网发布于前端知识,转载请注明出处:插件开发实录

关键词: 金沙澳门官网

上一篇:配置最佳实践,构建打包优化
下一篇:没有了