首页 > 其他分享 >打造自己的前端组件库

打造自己的前端组件库

时间:2024-08-05 10:40:02浏览次数:10  
标签:Vue cli 前端 js vue components 组件 打造 ytDemo

打造自己的前端组件库

新建vue项目(sass + js + vue2)

vue create yt-ui	

修改文件目录(如下)

修改: 1.src 更名 examples; 2. src/components移动到项目最外层;3.vue.config.js更改入口文件

// vue.config.js

const {defineConfig} = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    pages: {
        index: {
            entry: 'examples/main.js',
            template: 'public/index.html',
            filename: 'index.html'
        }
    }
})

编写ytDemo组件并在app.vue中使用

image-20231021224419745

新建文件目录结构如上图:

// components/demo/index.js

import ytDemo from "./src/main.vue";

ytDemo.install = (Vue) => {
  Vue.component(ytDemo.name, ytDemo);
};

export default ytDemo;
// components/src/main.vue
<!--
 * @Description: main 页面
 * @Author: mhf
 * @Date: 2023/10/21
-->
<template>
  <div>
    <div class="a">
      a
      <div class="b">b</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ytDemo",
  components: {},
  props: {},
  computed: {},
  watch: {},
  filters: {},
  data() {
    return {};
  },
  methods: {},
  created() {},
  mounted() {},
  destroyed() {},
};
</script>

<style lang="scss" scoped>
.a {
  width: 200px;
  height: 200px;
  border: 1px solid red;

  .b {
    width: 100px;
    height: 100px;
    border: 1px solid green;
  }
}
</style>


// example/main.js

import Vue from 'vue'
import App from './App.vue'

import ytDemo from "../components/ytDemo";
Vue.use(ytDemo)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')


根据如上步骤则出现如下效果

image-20231021134118635


打包

// components/index.js

// 整个包的入口
// 统一导出
import ytComp from "./ytComp";
import ytDemo from "./ytDemo";
const components = [
    ytComp,
    ytDemo,
]
// 定义install方法
const install = function (Vue) {
    // 注册所有的组件
    components.forEach(component => {
        Vue.component(component.name, component)
    })
}
// 判断是否直接引入文件,如果是,就不用调用Vue.use()
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}
// 导出install方法
export default {
    install,
    ytDemo,
    ytComp
}
// package.json
{
  "name": "@mhfwork/yt-ui", // 必须保持唯一(请自行上npm官网查询自己的项目名称)
  "version": "0.0.1",
  "private": false,
  "author": {
    "name": "毛三仙",
    "email": "[email protected]"
  },
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "format": "prettier --write \"components/**/*.js\" \"components/**/*.vue\" \"examples/**/*.vue\" \"examples/**/*.vue\"",
    "lib": "vue-cli-service build --target lib components/index.js"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "vue": "^2.6.14"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "@babel/eslint-parser"
    },
    "rules": {}
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

发布流程

todo: 更新 readeMe.md、package.json版本号   
 1. npm run lib   
 2. npm get registry 
 3. npm login     					// 登陆自己的npm账号,没有请自行注册
 4. npm publish --access public		// 正常的话 npm publish 即可,因本项目中使用@mhfwork/xxx 需注明是public库

使用发布成功的组件库

image-20231021225510114

新项目中

npm i @mhfwork/yt-ui

main.js中注册

import ytComp from "@mhfwork/yt-ui/components/ytComp";
import ytDemo from "@mhfwork/yt-ui/components/ytDemo";
Vue.use(ytComp)
Vue.use(ytDemo)	

Vue文件中使用

<template>
  <div class="home">
    <yt-comp page-name="aaahahah"/>
    <yt-demo />
  </div>
</template>

<script>
// @ is an alias to /src

export default {
  name: 'HomeView',
  components: {
  }
}
</script>

标签:Vue,cli,前端,js,vue,components,组件,打造,ytDemo
From: https://www.cnblogs.com/ProgrammerMao-001/p/18342753

相关文章

  • 前端开发中最炙手可热的当红辣子鸡 Vue 3 简介及入门实例
    前言之前已经学习过来HTML、CSS以及JavaScript的相关知识,也算是基本了解了关于这前端三件套的一些基本用法。今天就来了解下,当前前端开发中最炙手可热的当红辣子鸡-Vue。本文主要介绍Vue的一些入门知识和最经典的Vue入门HelloWorld程序,如果你想了解的是更高......
  • vue项目如何在框架最外层包裹一层class 包裹弹框组件
    在Vue项目中,如果你想要在框架的最外层包裹一层类,并且这个类能够包裹所有的弹框组件(如ElementUI的<el-dialog>),你可以通过几种方式实现:1.使用Vue的根实例在Vue应用的入口文件(通常是main.js或app.js)中,你可以在创建Vue根实例时使用:class绑定:importVuefr......
  • 1-初始前端&&基本标签
    目录初始html–超文本标记语言1.超文本:2.标记语言:3.标签4.html基本框架5.拓展插件6.文字标签7.转义字符8.语义化与SEO初始html–超文本标记语言1.超文本:比普通的文本更厉害。可以插入图片/音乐/视频/超链接,对立面的内容进行排版,样式设计2.标记语言:可以吧html当做是一快......
  • searchBar组件的用法
    文章目录1.概念介绍2.使用方法3.代码与效果3.1示例代码3.2运行效果4.内容总结我们在上一章回中介绍了"Material3中的IconButton"相关的内容,本章回中将介绍SearchBar组件.闲话休提,让我们一起TalkFlutter吧。1.概念介绍我们在本章回中介绍的SearchBar是指......
  • 打造Perl中的词法分析器:深入自定义文本处理
    打造Perl中的词法分析器:深入自定义文本处理Perl作为一种强大的文本处理语言,提供了丰富的工具来实现词法分析器(Lexer)。词法分析是编译原理中将源代码分解成一系列词素(Tokens)的过程,是构建编译器或解释器的第一步。本文将详细探讨如何在Perl中实现一个自定义的词法分析器,包括......
  • UE5学习笔记3-关于charactor的相机和弹簧臂组件
    一、环境说明,UE5.4+ vs2022 +win11二、相机和弹簧臂的作用    个人理解上,相机的作用相当于一个视角,我将其理解成是一个人在哪个地方朝向哪个方向看,弹簧臂的用用我将其理解成为一个将人的视角和人物模型或其他模型连接的桥梁三、相机和弹簧臂的代码    ......
  • 2--Web前端开发-JavaScript
    引入方式1、内部脚本:将JS代码定义在HTML页面中JavaScript代码必须位于<script></script>标签之间在HTML文档中,可以在任意地方,放置任意数量的<script>一般会把脚本置于<body>元素的底部,可以改善显示速度<script>alert("hellojavascript");</script>可放在代码中任意位......
  • 前端:Vue
    一、引入Vue是一套前端框架,免除javaScript中的DOM操作,简化书写。基于MVVM思想,实现数据的双向绑定,将编程的关注点放在数据上。框架:是一个半成品软件,是一套可重用的、通用的、软件基础代码模型。基于框架进行开发,更加快捷、更加高效。二、下载下载地址:https://v2.vuejs.or......
  • 用Python打造精彩动画与视频, 6.2 使用Manim进行数学和科学可视化
     6.2使用Manim进行数学和科学可视化Manim(MathematicalAnimationEngine)是一款强大的动画制作工具,尤其适用于数学和科学领域的可视化。它由3Blue1Brown的GrantSanderson开发,旨在通过动画演示复杂的数学概念,使其更易于理解。使用Manim,用户可以创建高质量的数学动画,从简单的......
  • 用Python打造精彩动画与视频,5.3 使用Manim创建简单动画
     5.3使用Manim创建简单动画在这一节中,我们将介绍如何使用Manim创建简单的动画。我们将从基本的场景构建开始,然后演示如何添加动画效果。通过这些示例,你将能够掌握使用Manim创建各种动画的基本技能。5.3.1创建一个简单的场景Manim中的基本单元是场景(Scene)。每个场景都是一......