Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说
vue中怎么封装组件_vue组件打包成单独js,希望能够帮助你!!!。

iconfont图标下载

将自己所需的图标库项目下载下来，并放在项目的 src\assets\iconfont 的目录下

引用iconfont.css

在main.js中引用iconfont.css

import Vue from 'vue' import App from './App' import './assets/iconfont/iconfont.css'; Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', components: { App }, template: '<App/>' }) 

新建MyIcon组件

在src\components文件夹中新建MyIcon.vue

<template> <div> <i :class="icon" :style="{ fontSize: size + 'px', color }"></i> </div> </template> <script> export default { props: { size: { type: Number, default: 16 }, type: { type: String, default: '' }, color: { type: String, default: 'black' } }, computed: { icon() { return ['iconfont', 'icon-' + this.type] } }, } </script> <style> </style> 

使用MyIcon图标

<template> <div class="hello"> <my-icon color='#0094ff' type="icon" :size="25"></my-icon> <my-icon color='red' type="shezhi2" :size="25"></my-icon> <my-icon color='green' type="ceshi" :size="25"></my-icon> <my-icon type="shouquan" :size="25"></my-icon> </div> </template> <script> import MyIcon from './components' export default { components: { MyIcon }, name: 'HelloWorld', data() { return { msg: 'Welcome to Your Vue.js App' } } } </script> 

今天的分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。