潍坊市住房和城乡建设厅网站,如何自己制作链接内容,iis 无法启动此网站,笔记本页面设计模板第一步#xff1a;安装svg-sprite-loader插件 !-- svg-sprite-loader svg雪碧图 转换工具 -- !-- symbol 元素中的 path 就是绘制图标的路径#xff0c;这种一大串的东西我们肯定没办法手动的去处理#xff0c; 那么就需要用到插件 svg-sprite-loader …第一步安装svg-sprite-loader插件 !-- svg-sprite-loader svg雪碧图 转换工具 -- !-- symbol 元素中的 path 就是绘制图标的路径这种一大串的东西我们肯定没办法手动的去处理 那么就需要用到插件 svg-sprite-loader 帮助我们处理图标。此插件就是将 .svg 文件自动生成 symbol元素并插入进 svg 标签内通过插件的处理就可以很方便解决生成symbol 图形模板对象的问题。-- !--安装-- npm install -S svg-sprite-loader yarn add --dev svg-sprite-loader 第二步封装svg组件 templatesvg classsvg-icon aria-hiddentrueuse :xlink:hreficonName //svg /templatescript export default {name: SvgIcon,props: {iconClass: {type: String,required: true,},},computed: {iconName() {return #icon-${this.iconClass};},}, }; /scriptstyle scoped /*此处为所有图标默认显示样式*/ .svg-icon {width: 30px;height: 30px;fill: currentColor;overflow: hidden; } /style 第三步将需要的svg图标放入目录中 第四步配置 可在webpack.config.js或vue.config.js中配置若项目根目录下没有vue.config.js,则手动创建一个vue.config.js,将下列代码直接粘贴进去即可 const path require(path) const webpack require(webpack)function resolve (dir) {return path.join(__dirname, dir) }module.exports {chainWebpack (config) {config.module.rule(svg).exclude.add(resolve(src/assets/icons)).end()config.module.rule(icons).test(/\.svg$/).include.add(resolve(src/assets/icons)).end().use(svg-sprite-loader).loader(svg-sprite-loader).options({symbolId: icon-[name]}).end()} }第五步全局注册 在icons目录中创建index.js文件 index.js中内容如下 import Vue from vue import SvgIcon from ../../components/svgIcon// svg component// register globally Vue.component(svg-icon, SvgIcon)const req require.context(./svg, false, /\.svg$/) const requireAll requireContext requireContext.keys().map(requireContext) requireAll(req) 第六步在main.js中全局引入 import ./assets/icons/index 第七步使用 代码如下 !-- icon-class的值对应的是目录中svg的名字 -- svg-icon icon-classuser / svg-icon icon-classadvert color#27ac3d/ svg-icon icon-classbrand colorred/ 效果如下 注意若未显示出图标请重新运行项目。 运行后如果还未显示请检查相应地方的引入路径是否正确尤其是vue.config.js中的路径。