svg图片在vue脚手架vue-cli怎么使用

第一种

使用vue2-svg-icon
npm install vue2-svg-icon --save-dev
下载之后在mian.js引入

名字可以随便起，这里我起icon

引入svg资源

这时注意：网上有人说直接在src/根目录引入svg资源，也有人说在src/assets/根目录引入svg资源，两个应该都是对的，可能因为webpack版本不同，svg引入的路径就不同，因此这两种引入方式都试试，我项目webpack版本是2.96的，我在src/assets/引入资源成功，在src/引入svg资源报错。

使用svg图片

此时只需要把 icon当作一个标签使用即可，name属性指定svg相应资源的名字，不要带后缀名，w、h指定svg图的宽高。

效果图

第二种

第二种我还没有使用过，下一次使用在补上，使用 svg-sprite-loader。

转载于:https://www.cnblogs.com/HJ412/p/11094986.html

svg图片在vue脚手架vue-cli怎么使用相关推荐

Vue 脚手架||Vue 脚手架的基本用法
Vue 脚手架 Vue 脚手架用于快速生成 Vue 项目基础架构,其官网地址为:https://cli.vuejs.org/zh/ npm install -g @vue/cli 检测是否安装成功 ...
vue脚手架vue数据交互_学习Vue：3分钟的交互式Vue JS教程
vue脚手架vue数据交互 Vue.js is a JavaScript library for building user interfaces. Last year, it started to ...
Vue脚手架First
1. Vue脚手架 Vue脚手架是一个开发基于Vue框架的前端项目的软件. Vue脚手架的项目是"单页面"的,也就是在这样的项目,只有1个HTML页面,它认为页面是由多个模块组成的 ...
Vue 脚手架(vue-cli) 环境搭建
目录 (1)使用 npm 命令安装模块 (2)全局安装与本地安装 (3)安装 vue (4)安装 Webpack (5)安装 Vue 脚手架 (6)在计算机创建一个工程目录 (7)根据模版创建项目 v ...
Vue脚手架入门基础
文章目录 1.课程简介 1.1. 关于Vue 1.2. 关于Vue脚手架 1.3. 关于npm 2.搭建开发环境 2.1. 安装Node.js 2.2. 配置npm源 2.3. 安装VUE Cli 3 ...
Vue开发项目入门——Vue脚手架
1.什么是Vue脚手架 Vue脚手架是Vue官方提供的标准化开发工具(开发平台),它提供命令行和UI界面,方便创建vue工程.配置第三方依赖.编译vue工程. 特别注意:Vue脚手架是用来方便开发的, ...
Vue | 使用Vue脚手架【脚手架的基本使用+ref属性+props属性+mixin混入+插件scoped样式+TodoList+浏览器本地存储+组件的自定义事件+全局事件总线+过度与动画】
文章目录脚手架的基本使用初始化脚手架分析脚手架结构 render函数修改默认配置 ref属性 props属性 mixin混入插件 scoped样式 Todo-list案例组件化编码流程(通 ...
Vue脚手架搭建及vue项目创建【详细教程】
目录 Vue脚手架环境安装 Vue项目创建 Vue项目目录结构项目运行流程组件结构 Vue脚手架 Vue脚手架指的是vue-cli,它是一个快速构建**单页面应用程序(SPA)**环境配置的工具 ...
如何创建vue脚手架
创建vue脚手架 Vue脚手架是vue官方提供的标准化开发工具(平台) 参照官方文档vue CLI(command line interface)–命令行接口工具 https://cli.vuejs. ...

svg图片在vue脚手架vue-cli怎么使用

第一种

第二种

svg图片在vue脚手架vue-cli怎么使用相关推荐

最新文章

热门文章