【Vue 开发实战】实战篇 # 41：如何管理系统中使用的图标-阿里云开发者社区

【Vue 开发实战】实战篇 # 41：如何管理系统中使用的图标

2023-02-24 115

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【Vue 开发实战】实战篇 # 41：如何管理系统中使用的图标

说明

【Vue 开发实战】学习笔记。

先在iconfont里新建一个项目

然后将需要的图标添加入库：https://www.iconfont.cn/

比如我的项目如下：

全局注册图标组件

https://1x.antdv.com/components/icon-cn/

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { Button, Layout, Icon, Drawer, Radio, Menu, Form, Input, Select } from "ant-design-vue";
import Authorized from "./components/Authorized.vue";
import Auth from "./directives/auth";
Vue.config.productionTip = false;
Vue.use(Button);
Vue.use(Layout);
Vue.use(Icon);
Vue.use(Drawer);
Vue.use(Radio);
Vue.use(Menu);
Vue.use(Form);
Vue.use(Input);
Vue.use(Select);
Vue.component("Authorized", Authorized);
Vue.use(Auth);
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/c/font_3676254_v07nk2dt618.js', // 在 iconfont.cn 上生成
});
Vue.component("IconFont", IconFont);
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

使用 vue-svg-loader

先安装依赖

npm i vue-svg-loader -D

https://cli.vuejs.org/zh/guide/webpack.html#%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E6%96%B0%E7%9A%84-loader

配置如下：

module.exports = {
    lintOnSave: false,
    css: {
        loaderOptions: {
            less: {
                javascriptEnabled: true
            },
        }
    },
    chainWebpack: config => {
        const svgRule = config.module.rule('svg');
        // 清除已有的所有 loader。
        // 如果你不这样做，接下来的 loader 会附加在该规则现有的 loader 之后。
        svgRule.uses.clear();
        // 添加要替换的 loader
        svgRule.use('vue-svg-loader').loader('vue-svg-loader');
    },
    devServer: {
        proxy: {
            // '@(/api)': { target: 'http://localhost:3000',
            '/api': {
                target: 'http://localhost:8080',
                bypass: function (req, res, proxyOptions) {
                    if (req.headers.accept.indexOf('html') !== -1) {
                        console.log('Skipping proxy for browser request.');
                        return '/index.html';
                    } else if(process.env.MOCK !== "none") {
                        // 将请求url转为文件名
                        const name = req.path.split("/api/")[1].split("/").join("_");
                        const mock = require(`./mock/${name}`);
                        const result = mock(req.method);
                        // 需要清除缓存
                        delete require.cache[require.resolve(`./mock/${name}`)];
                        return res.send(result);
                    }
                },
            },
        },
    },
}

使用上面两种方式

在 404 页面里面引入图标

<template>
    <div class="page-404">
        <h1>404页面</h1>
        <div>
            <IconFont type="icon-icon-test" class="icon-404"></IconFont>
        </div>
        <!-- <div>
            <img :src="logo" alt="">
        </div> -->
        <div class="vue-svg-loader">
            <Logo />
        </div>
    </div>
</template>
<script>
// 没有使用 vue-svg-loader 时 logo 是路径
// import logo from "@/assets/logo.svg";
// 使用 vue-svg-loader 时 Logo 是函数式组件
import Logo from "@/assets/logo.svg";
export default {
    // data() {
    //     return {
    //         logo
    //     }
    // }
    components: {
        Logo
    }
};
</script>
<style lang="less" scoped>
.page-404 {
    text-align: center;
    .icon-404 {
        font-size: 64px;
    }
    img {
        width: 64px;
    }
}
</style>