倔强的小石头

倔强的小石头 查看完整档案

广州编辑南华大学  |  数字媒体技术 编辑广州汇电云联互联网科技有限公司  |  web前端开发工程师 编辑 wanshi.netlify.com/ 编辑
编辑

专注于 Web 前端开发领域,致力于构建符合 Web 标准、可用性、可访问性的高性能 Web 应用程序。

个人动态

倔强的小石头 发布了文章 · 2019-11-23

Vue项目使用CSS变量实现主题化

主题化管理经常能在网站上看到,一般的思路都是将主题相关的CSS样式独立出来,在用户选择主题的时候加载相应的CSS样式文件。现在大部分浏览器都能很好的兼容CSS变量,主题化样式更容易管理了。最近,使用CSS变量在Vue项目中做了一个主题化实践,下面来看看整个过程。

Github项目地址
演示地址

可行性测试

为了检验方法的可行性,在public文件夹下新建一个themes文件夹,并在themes文件夹新建一个default.css文件:

:root {
  --color: red;
}

在public文件夹的index.html文件中引入外部样式theme.css,如下:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vue-skin-peeler-demo</title>
    <!-- 引入themes文件夹下的default.css -->
    <link rel="stylesheet" type="text/css" href="src/themes/default.css" rel="external nofollow">
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vue-skin-peeler-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

然后,在Home.vue中使用CSS变量:

<template>
  <div class="home">
    <div :class="$style.demo">变红色</div>
  </div>
</template>

<script>
export default {
  name: 'home'
}
</script>

<style module lang="scss">
  .demo {
    color: var(--color);
  }
</style>

然后,运行项目并在浏览器中打开页面,页面显示效果正常。

注意:@vue/cli使用link标签引入css样式可能报错“We're sorry but vue-skin-peeler-demo doesn't work properly without JavaScript enabled. Please enable it to continue.”。这是因为@vue/cli将src目录下的文件都通过webpack打包所引起,所以,静态文件资源要放在public(如果是@vue/cli 2.x版本放在static)文件夹下。

实现主题切换

这里主题切换的思路是替换link标签的href属性,因此,需要写一个替换函数,在src目录下新建themes.js文件,代码如下:

// themes.js
const createLink = (() => {
  let $link = null
  return () => {
    if ($link) {
      return $link
    }
    $link = document.createElement('link')
    $link.rel = 'stylesheet'
    $link.type = 'text/css'
    document.querySelector('head').appendChild($link)
    return $link
  }
})()

/**
 * 主题切换函数
 * @param {string} theme - 主题名称, 默认default
 * @return {string} 主题名称
 */
const toggleTheme = (theme = 'default') => {
  const $link = createLink()
  $link.href = `./themes/${theme}.css`
  return theme
}

export default toggleTheme

然后,在themes文件下创建default.css和dark.css两个主题文件。创建CSS变量,实现主题化。CSS变量实现主题切换请参考另一篇文章初次接触css变量

兼容性

IE浏览器以及一些旧版浏览器不支持CSS变量,因此,需要使用css-vars-ponyfill,是一个ponyfill,可在旧版和现代浏览器中为CSS自定义属性(也称为“ CSS变量”)提供客户端支持。由于要开启watch监听,所以还有安装MutationObserver.js

安装:

npm install css-vars-ponyfill mutationobserver-shim --save

然后,在themes.js文件中引入并使用:

// themes.js
import 'mutationobserver-shim'
import cssVars from 'css-vars-ponyfill'

cssVars({
  watch: true
})

const createLink = (() => {
  let $link = null
  return () => {
    if ($link) {
      return $link
    }
    $link = document.createElement('link')
    $link.rel = 'stylesheet'
    $link.type = 'text/css'
    document.querySelector('head').appendChild($link)
    return $link
  }
})()

/**
 * 主题切换函数
 * @param {string} theme - 主题名称, 默认default
 * @return {string} 主题名称
 */
const toggleTheme = (theme = 'default') => {
  const $link = createLink()
  $link.href = `./themes/${theme}.css`
  return theme
}

export default toggleTheme

开启watch后,在IE 11浏览器点击切换主题开关不起作用。因此,每次切换主题时都重新执行cssVars(),还是无法切换主题,原因是开启watch后重新执行cssVars()是无效的。最后,只能先关闭watch再重新开启。成功切换主题的themes.js代码如下:

// themes.js
import 'mutationobserver-shim'
import cssVars from 'css-vars-ponyfill'

const createLink = (() => {
  let $link = null
  return () => {
    if ($link) {
      return $link
    }
    $link = document.createElement('link')
    $link.rel = 'stylesheet'
    $link.type = 'text/css'
    document.querySelector('head').appendChild($link)
    return $link
  }
})()

/**
 * 主题切换函数
 * @param {string} theme - 主题名称, 默认default
 * @return {string} 主题名称
 */
const toggleTheme = (theme = 'default') => {
  const $link = createLink()
  $link.href = `./themes/${theme}.css`
  cssVars({
    watch: false
  })
  setTimeout(function () {
    cssVars({
      watch: true
    })
  }, 0)
  return theme
}

export default toggleTheme

查看所有代码,请移步Github项目地址

记住主题

实现记住主题这个功能,一是可以向服务器保存主题,一是使用本地存储主题。为了方便,这里主要使用本地存储主题的方式,即使用localStorage存储主题。具体实现请移步Github项目地址

查看原文

赞 3 收藏 3 评论 0

倔强的小石头 发布了文章 · 2019-09-03

Vue最佳实践

Vue最佳实践

Vue 最佳实践,是参考 Vue 官方风格指南并根据过去 Vue 实际项目开发中的经验总结的一套规范建议。本项目的目的是希望每个 Vue 开发者都能尽快熟悉并上手项目代码,志在帮助 Vue 新手开发者及时避免一些不规范的设计和由此而引发的问题。本建议如有不妥之处,敬请指正!非常欢迎有志同道合的开发者贡献更多、更好的建议。

项目地址:Vue 最佳实践

组件目录内始终使用文件夹管理组件

在 components 目录下的通用组件始终使用文件夹管理组件,并通过 index.js 暴露组件,建议使用以下文件结构:

├── components
│   ├── componentA
│   │   ├── componentA.vue
│   │   └── index.js
│   ├── componentB
│   │   ├── componentA.vue
│   │   └── index.js
│   ├── index.js

开启路由懒加载

vue 路由懒加载其实依赖于 webpack 的 code-spliting 以及 vue 的异步组件,关于 vue 的异步组件可以看动态组件 & 异步组件,而异步组依赖动态 import。

模块化路由配置

在中大型项目中,会有很多的页面或模块,常出现路由嵌套的情况。此时,建议以路由层级进行模块拆分。文件结构如下:

├── router
│   ├── index.js
│   ├── home.js
│   ├── login.js

将一级路由配置在入口文件 index.js 中,将一级路由下的二级路由拆分为独立的模块:

import homeRoutes from './home'
import loginRoutes from './login'

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  { 
    name: 'Home'
    path: '/home'
    component: Home,
    children: [...homeRoutes]
  },
  {
    name: 'Login',
    path: 'login',
    component: Login,
    children: [...loginRoutes]
  }
]

export default new VueRouter({
  routes
})

模块化组织Vuex状态

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。

为了解决以上问题,建议使用模块化组织Vuex,将store分割成模块。

规范组件选项的顺序

以下是个人推荐的组件选项默认顺序:

export default {
  name: '',
  parent: null,
  extends: null,
  minxins: [],
  components: {},
  inheritAttrs: false,
  model: {},
  props: {},
  data () {
    return {}
  },
  computed: {},
  watch: {},
  // 生命周期钩子,按调用顺序编写
  beforeCreate () {},
  ...,
  destroyed () {},
  methods: {},
  directives: {},
  filters: {},
  // 使用render函数时,置于末尾
  render () {}
}

按以上的顺序,组件没使用到的选项直接缺省即可。

始终为组件样式设置作用域

全局样式容易污染其他组件样式。在vue组件中一旦使用了全局的style,那么你必将陷入无限的梦魇,因为你根本不知道什么时候组件的样式就被全局样式污染了。因此,建议始终为组件样式设置作用域。

可配置的watch侦听器

Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性。vue 侦听器 watch 监听属性时可以使用函数或一个包含handler处理函数的配置对象。

化繁为简的计算属性

将复杂计算属性分割为尽可能多的更简单的属性。简单、专注的计算属性减少了信息使用时的假设性限制,所以需求变更时也用不着那么多重构了。如:

computed: {
  price: function () {
    var basePrice = this.manufactureCost / (1 - this.profitMargin)
    return (
      basePrice -
      basePrice * (this.discountPercent || 0)
    )
  }
}

简化后:

computed: {
  basePrice: function () {
    return this.manufactureCost / (1 - this.profitMargin)
  },
  discount: function () {
    return this.basePrice * (this.discountPercent || 0)
  },
  finalPrice: function () {
    return this.basePrice - this.discount
  }
}

始终为列表渲染提供唯一的key值

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用 key,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

v-for可以使用索引index设置key值。在发生DOM插入和删除的列表中请始终提供唯一的key值。

欢迎有兴趣的你加入本项目:Vue 最佳实践

查看原文

赞 1 收藏 1 评论 0

倔强的小石头 发布了文章 · 2019-07-21

使用SVG symbols建立图标系统完整指南

从最开始的使用img图片,到后来的使用css sprite来减少服务器请求,再到流行的图形字体化图标Iconfont。现在,一种全新的图标使用方式开始流行了起来——SVG symbols图标。

工作原理

SVG symbols的工作原理:symbol元素用来定义一个图形模板对象,它可以用一个use元素实例化。

symbol元素对图形的作用是在同一文档中多次使用,symbol元素本身是不呈现的。只有symbol元素的实例(亦即,一个引用了symbol的use元素)才能呈现:

<svg>
  <symbol viewBox="0 0 24 24" id="heart">
    <path fill="#E86C60" d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z">
    </path>
  </symbol>
  <symbol viewBox="0 0 32 32" id="arrow">
    <path fill="#0f0f0f" d="M16,0C7.2,0,0,7.2,0,16s7.2,16,16,16s16-7.2,16-16S24.8,0,16,0z M22.8,13.6l-6,8C16.6,21.9,16.3,22,16,22 s-0.6-0.1-0.8-0.4l-6-8c-0.2-0.3-0.3-0.7-0.1-1S9.6,12,10,12h12c0.4,0,0.7,0.2,0.9,0.6S23,13.3,22.8,13.6z">
    </path>
  </symbol>
</svg>

这段代码使用SVG symbols定义了两个图标,每个symbol元素定义一个图标,图标id分别是heart和arrow,将其放在html文件的body元素内。

通过以下代码引用id为heart的图标:

<svg>
    <use xlink:href="#heart"/>
</svg>

xlink:href属性值就是‘#’加symbol的id名称,那么只需改变这个属性值就可以引用不同的图标。

自动化处理

更多内容请查看原文:使用SVG symbols建立图标系统完整指南

查看原文

赞 0 收藏 0 评论 0

倔强的小石头 发布了文章 · 2019-07-09

使用CSS隐藏元素滚动条

使用CSS隐藏元素滚动条

如何隐藏滚动条,同时仍然可以在任何元素上滚动?

首先,如果需要隐藏滚动条并在内容溢出时显示滚动条,只需要设置overflow:auto样式即可。想要完全隐藏滚动条只需设置overflow:hidden即可,但是这样一来将导致元素内容不可滚动。时至今日,还没有任何一条CSS规则可以使元素可以隐藏滚动条的同时依然可以滚动内容,只能通过针对特定浏览器设置滚动条样式来实现。

Firefox浏览器

对于Firefox,我们可以将滚动条宽度设置为none:

scrollbar-width: none; /* Firefox */

IE浏览器

对于IE,我们需要使用-ms-prefix属性定义滚动条样式:

-ms-overflow-style: none; /* IE 10+ */

Chrome和Safari浏览器

对于Chrome和Safari浏览器,我们必须使用CSS滚动条选择器,然后使用display:none隐藏它:

::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

注意:当你要隐藏滚动条的时候,最好将overflow显示设置为auto或者scroll保证内容是可滚动的。

示例

我们使用上面的CSS属性以及溢出实现下面一个实例——隐藏水平滚动条,同时允许垂直滚动条:

.demo::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}

.demo {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* IE 10+ */
  overflow-x: hidden;
  overflow-y: auto;
}
查看原文

赞 5 收藏 2 评论 0

倔强的小石头 发布了文章 · 2019-04-28

gulp + gulp-better-rollup + rollup 构建 ES6 开发环境

gulp + gulp-better-rollup + rollup 构建 ES6 开发环境

关于 Gulp 就不过多啰嗦了。常用的 js 模块打包工具主要有 webpackrollupbrowserify 三个,Gulp 构建 ES6 开发环境通常需要借助这三者之一来合并打包 ES6 模块代码。因此,Gulp 构建 ES6 开发环境的方案有很多,例如:webpack-stream、rollup-stream 、browserify等,本文讲述使用 gulp-better-rollup 的构建过程。gulp-better-rollup 可以将 rollup 更深入地集成到Gulps管道链中。

GitHub地址:https://github.com/JofunLiang/gulp-translation-es6-demo

构建基础的 ES6 语法转译环境

首先,安装 gulp 工具,命令如下:

$ npm install --save-dev gulp

安装 gulp-better-rollup 插件,由于 gulp-better-rollup 需要 rollup 作为依赖,因此,还要安装 rollup 模块和 rollup-plugin-babel(rollup 和 babel 之间的无缝集成插件):

$ npm install --save-dev gulp-better-rollup rollup rollup-plugin-babel

安装 babel 核心插件:

$ npm install --save-dev @babel/core @babel/preset-env

安装完成后,配置 .babelrc 文件和 gulpfile.js文件,将这两个文件放在项目根目录下。

新建 .babelrc 配置文件如下:

{
  "presets": [
    [
      "@babel/env",
      {
        "targets":{
          "browsers": "last 2 versions, > 1%, ie >= 9"
        },
        "modules": false
      }
    ]
  ]
}

新建 gulpfile.js 文件如下:

const gulp = require("gulp");
const rollup = require("gulp-better-rollup");
const babel = require("rollup-plugin-babel");

gulp.task("babel", () => {
  return gulp.src("src/**/*.js")
    .pipe(rollup({
      plugins: [babel()]
    },{
      format: "iife"
    }))
    .pipe(gulp.dest("dist"))
})

gulp.task("watch", () => {
    gulp.watch("src/**/*.js", gulp.series("babel"))
})

gulp.task("default", gulp.series(["babel", "watch"]))

在 src 目录下使用 ES6 语法新建 js 文件,然后运行 gulp 默认任务,检查 dist 下的文件是否编译成功。

使用 ployfill 兼容

经过上面的构建过程,成功将 ES6 语法转译为 ES5 语法,但也仅仅是转换的语法,新的 api(如:Set、Map、Promise等) 并没有被转译。关于 ployfill 兼容可以直接在页面中引入 ployfill.js 或 ployfill.min.js 文件实现,这种方式比较简单,本文不再赘述,下面讲下在构建中的实现方式。

安装 @babel/plugin-transform-runtime 、@babel/runtime-corejs2 和 core-js@2(注意:core-js的版本要和@babel/runtime的版本对应,如:@babel/runtime-corejs2对应core-js@2)。@babel/plugin-transform-runtime 的作用主要是避免污染全局变量和编译输出中的重复。@babel/runtime(此处指@babel/runtime-corejs2)实现运行时编译到您的构建中。

$ npm install --save-dev @babel/plugin-transform-runtime @babel/runtime-corejs2 core-js@2

修改 .babelrc 文件:

{
  "presets": [
    [
      "@babel/env",
      {
        "targets":{
          "browsers": "last 2 versions, > 1%, ie >= 9"
        },
        "modules": false
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime", {
        "corejs": 2
      }
    ]
  ]
}

同时修改 gulpfile.js 文件,给 rollup-plugin-babel 配置 runtimeHelpers 属性如下:

const gulp = require("gulp");
const rollup = require("gulp-better-rollup");
const babel = require("rollup-plugin-babel");

gulp.task("babel", () => {
  return gulp.src("src/**/*.js")
    .pipe(rollup({
      plugins: [
        babel({
          runtimeHelpers: true
        })
      ]
    },{
      format: "iife"
    }))
    .pipe(gulp.dest("dist"))
})

gulp.task("watch", () => {
    gulp.watch("src/**/*.js", gulp.series("babel"))
})

gulp.task("default", gulp.series(["babel", "watch"]))

再安装 rollup-plugin-node-resolve 和 rollup-plugin-commonjs,这两个插件主要作用是注入 node_modules 下的基于 commonjs 模块标准的模块代码。在这里的作用主要是加载 ployfill 模块。

$ npm install --save-dev rollup-plugin-node-resolve rollup-plugin-commonjs

在修改 gulpfile.js 文件如下:

const gulp = require("gulp");
const rollup = require("gulp-better-rollup");
const babel = require("rollup-plugin-babel");
const resolve = require("rollup-plugin-node-resolve");
const commonjs = require("rollup-plugin-commonjs");

gulp.task("babel", () => {
  return gulp.src("src/**/*.js")
    .pipe(rollup({
      plugins: [
        commonjs(),
        resolve(),
        babel({
          runtimeHelpers: true
        })
      ]
    },{
      format: "iife"
    }))
    .pipe(gulp.dest("dist"))
})

gulp.task("watch", () => {
    gulp.watch("src/**/*.js", gulp.series("babel"))
})

gulp.task("default", gulp.series(["babel", "watch"]))

使用 sourcemaps 和压缩

注意压缩使用 rollup-plugin-uglify 插件,为了提升打包速度,我们把模块文件放到 src/js/modules 文件夹下,将 gulp.src("src/js/*.js") 改为 gulp.src("src/js/*.js") 只打包主文件不打包依赖模块。

安装 gulp-sourcemaps 和 rollup-plugin-uglify 插件:

npm install --save-dev gulp-sourcemaps rollup-plugin-uglify

修改 gulpfile.js 文件如下:

const gulp = require("gulp");
const rollup = require("gulp-better-rollup");
const babel = require("rollup-plugin-babel");
const resolve = require("rollup-plugin-node-resolve");
const commonjs = require("rollup-plugin-commonjs");
const uglify = require("rollup-plugin-uglify");
const sourcemaps = require("gulp-sourcemaps");

gulp.task("babel", () => {
  return gulp.src("src/js/*.js")
    .pipe(sourcemaps.init())
    .pipe(rollup({
      plugins: [
        commonjs(),
        resolve(),
        babel({
          runtimeHelpers: true
        }),
        uglify.uglify()
      ]
    },{
      format: "iife"
    }))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest("dist/js"))
})

gulp.task("watch", () => {
    gulp.watch("src/**/*.js", gulp.series("babel"))
})

gulp.task("default", gulp.series(["babel", "watch"]))
查看原文

赞 0 收藏 0 评论 0

倔强的小石头 回答了问题 · 2019-03-28

解决关于组合使用构造函数模式和原型模式的问题?

下面代码是构造函数:

function Person(name, age, job){
  this.name=name;
  this.age=age;
  this.job=job;
  this.friends=['Shelby', 'Court'];
}

下面代码使用了原型模式:

Person.prototype={
  constructor: Person,
  sayName: function(){
    alert(this.name)
  }
}

Van被push到了person1的friends中,而不是person1原型Person的friends

关注 4 回答 3

倔强的小石头 回答了问题 · 2019-03-28

解决typescript/es6 如何获取ul标签下所有li元素并添加事件?

使用事件代理

关注 6 回答 5

倔强的小石头 回答了问题 · 2019-03-28

解决vue由webpack编译还是babel编译

由webpack中的vue-loader将vue编译成js文件 => 再由babel将ES6文件转换ES5 => webpack打包 => 浏览器运行(vue将代码抽象成虚拟DOM树)

关注 4 回答 3

倔强的小石头 发布了文章 · 2019-03-27

体验usually.js的管道函数——pipe函数

体验usually.js的管道函数——pipe函数

usually.js 是一个面向现代 Web 开发的 JavaScript 函数库,基于 ES6 开发。最新版本2.4.1,最新版本usually.js增加管道函数—— pipe 函数。什么是管道函数?管道函数,其作用是将前一步的结果直接传参给下一步的函数,从而省略了中间的赋值步骤,可以大量减少内存中的对象,节省内存。

基本使用

usually.js 管道函数 pipe 的管道操作符 |> 允许以一种易读的方式去对函数链式调用。本质上来说,管道操作符是单参数函数调用的语法糖,它允许你像这样执行一个调用:

const a = -1.15454
let result = U.pipe(a, 'Math.abs |> Math.round')

使用正常js语法写的话,等效的代码是这样的:

const a = -1.15454
let result = Math.round(Math.abs(a))

使用$占位符

usually.js 的管道函数pipe还可以使用$占位符,将前一个函数的运算结果传参给下一个的函数,如:U.pipe(x, 'a |> b($, y)') 等价于 b(a(x), y)。

使用$占位符示例:

const x = 1
const y = 3
const z = 2

const foo = n => n + 1;
const bar = (x, y) => x * y;
const baz = (x, y, z) => x * y + z
      
const result = U.pipe(x, 'foo |> bar($, y) |> baz($ , y, z)')
// => result = 20

2.4.1版本 usually.js 更新内容如下:

(1)、bug 修复,修复 stringifyURL 函数重复追加“?”的bug
(2)、新增管道操作函数 —— pipe 函数,简化多函数运算流
(3)、新增对象值覆盖函数 —— overValues 函数
(4)、新增颜色值处理函数 —— extendHex 函数,将3位的16进制色值转换为6位
(5)、新增 randomHex 函数 —— 生成16进制随机颜色色值
(6)、新增 parseCookie 函数,将 cookie 字符串解析为对象形式

附录

usually.js官方文档地址https://jofunliang.github.io/usuallyjs/
usually.js的GitHub地址https://github.com/JofunLiang/usuallyjs

查看原文

赞 0 收藏 0 评论 0

倔强的小石头 回答了问题 · 2019-03-13

vue 中子组件要运行一个函数,但是要等获取父组件里面属性以后才运行要怎么办?

使用watch监听父组件属性

关注 4 回答 3

认证与成就

  • 获得 15 次点赞
  • 获得 3 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 3 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

  • usuallyjs

    usuallyjs 是一个面向现代 Web 开发的 JavaScript 实用函数库。 usuallyjs 基于 ES6 开发,抛弃了传统 Web 开发中 DOM 和 BOM 操作部分的内容,精选了一系列 Web 开发过程中最常用的、最实用的 JavaScript 函数。与 Vue、React、Angular等现代 Web 框架搭配使用,更好的服务于开发现代 Web 应用。

  • gulp-svg-symbols2js

    该插件将SVG Symbols文件注入JavaScript,与gulp-svg-symbols配合使用。

注册于 2019-02-25
个人主页被 619 人浏览