在Vue项目中，使用SVG图片具有很多优点，如无损放大缩小、图形清晰等。本文将介绍如何配置Vue-cli3和Mand Mobile以使用SVG图片。
1. 安装Vue-cli3
首先，我们需要安装Vue-cli3脚手架工具。打开终端，并输入以下命令：
npm install -g @vue/cli
安装完成后，可以通过以下命令来检查Vue-cli3是否安装成功：
vue --version
如果显示版本号，则说明安装成功。
2. 创建Vue项目
使用Vue-cli3创建一个新的Vue项目。在终端中，输入以下命令：
vue create my-project
根据提示选择需要的配置，等待项目创建完成。
3. 安装Mand Mobile
Mand Mobile是一个基于Vue的移动端组件库，可以帮助我们快速构建移动端应用。在终端中，进入到项目目录，并输入以下命令来安装Mand Mobile：
cd my-project
npm install mand-mobile --save
安装完成后，我们需要在main.js文件中引入Mand Mobile的CSS文件，并注册组件：
import 'mand-mobile/lib/mand-mobile.css';
import Vue from 'vue';
import { Button } from 'mand-mobile';
Vue.use(Button);
4. 配置SVG
首先，我们需要在项目中创建一个名为svg的文件夹，用于存放SVG图片。可以从互联网上下载一些SVG图片，并将其放在该文件夹中。
然后，我们需要在vue.config.js文件中添加相关配置，让Vue-cli3可以处理SVG图片。在项目根目录下创建一个vue.config.js文件，并在其中添加以下代码：
module.exports = {
chainWebpack: (config) => {
const svgRule = config.module.rule('svg');
svgRule.uses.clear();
svgRule.use('svg-sprite-loader').loader('svg-sprite-loader')
.options({
symbolId: '[name]',
});
},
};
这段代码的作用是将所有svg文件使用svg-sprite-loader加载器处理，并将每个SVG文件的名称作为其symbol ID。
5. 使用SVG
现在，我们可以在Vue组件中使用已配置的SVG图片了。首先，需要在需要使用SVG的组件中引入相应的SVG文件：
<template>
<div>
<svg-icon icon-class="svg-icon1" class-name="svg" />
</div>
</template>
<script>
import SvgIcon from '@/components/SvgIcon.vue';
export default {
components: {
SvgIcon,
},
};
</script>
在上面的例子中，我们引入了一个叫做SvgIcon的组件，并在模板中使用该组件来展示SVG图片。icon-class属性用于指定要展示的SVG图片的symbol ID。
结论
通过以上配置和方法，我们可以在Vue-cli3项目中使用Mand Mobile和SVG图片。使用SVG图片能够让我们的应用拥有更好的用户体验，并且更加灵活。希望本文对你有所帮助！
参考资料：
本文来自极简博客，作者：每日灵感集，转载请注明原文链接：Vue-cli3 Mand Mobile SVG 配置
