时间:2021-05-18
vue cli3 手把手教学封装Svgicon组件
第一步:在src文件下新建一个放置svg文件的文件夹
第二步:在components文件下新建一个Svg组件
这是一个 文件夹 专门用来存放项目里面需要使用的svg文件,比如 a.svg b.svg …
svg组件源码
<template> <svg :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName"></use> </svg></template><script type="text/ecmascript-6">/* icon组件实现自动引入 ../../Icons/svg 下面所有的图标了*之后我们就要使用到 webpack 的 require.context。很多人对于 require.context可能比较陌生,直白的解释就是require.context("./test", false, /.test.js$/); 这行代码就会去 test 文件夹(不包含子目录)下面的找所有文件名以 .test.js 结尾的文件能被 require 的文件。 更直白的说就是 我们可以通过正则匹配引入相应的文件模块*/const requireAll = requireContext => requireContext.keys().map(requireContext)const req = require.context('../../Icons/svg', false, /\.svg$/)requireAll(req)export default { name: 'Svgicon', props: { iconClass: { type: String, required: true }, className: { type: String } }, computed: { iconName () { return `#icon-${this.iconClass}` }, svgClass () { if (this.className) { return 'svg-icon ' + this.className } else { return 'svg-icon' } } }}</script><style>.svg-icon { width: 1em; height: 1em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; }</style>第三步:配置vue.config.js
以上就配置完毕
注:未注册组件在人口文件全局注册即可使用(main.js)
到此这篇关于浅析vue cli3 封装Svgicon组件正确姿势(推荐)的文章就介绍到这了,更多相关vue cli3 Svgicon组件内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
我的host设置报错如下:解决办法:@Vue/Cli3在vue.config.js里加上.disableHostCheck(true)vue-cli在webpa
在开发项目的时候,我们一般都用vue-cli来避免繁琐的webpack配置和template配置。但是官方cli3现在并不支持搭建plugin开发的项目。还好,
问题现象项目使用vue/cli3脚手架搭建的前端项目,vue版本为2.6.10。browserslist的配置如下:[">1%","last2versions"
Cli3工具中,配置路径别名最近用VueCli3脚手架搭建了Vue项目,发现没有build目录了,里面的webpack相关的也没了,看了官方文档后,查了资料后,
最近下载了vue-cli3,研究了下vue-cli3下多环境的配置。首先,安装vue-cli3。npminstall-g@vue/cli安装好之后的项目是这样的