【面试题】:前端怎么实现组件的封装和上传

第一步:创建空白文件夹并安装依赖

创建 package.json npm init -y

安装 vue-loader npm install vue-loader

安装 webpacl webpack-cli npm install webpacl webpack-cli -D

第二步:创建 src 目录及文件

创建src目录

在src目录下创建components文件夹来存放我们的组件

在src目录下创建index.js入口文件

在components文件夹下创建testH1.vue组件

第三步:编写我们的组件 testH1.vue

<template>

<h1 class="test-h1-box">

<slot>测试文字</slot>

</h1>

</template>

<script>

export default {

name: 'testH1'

}

</script>

<style>

.test-h1-box{

background: red;

color: green;

text-align: center

}

</style>

第四步:编辑 src 目录下的入口文件 index.js

// 引入组件

import sliderVerify_vue from './components/index.vue'

// 创建 install 函数

// vue.use 会默认查找并调用 install 函数

const SliderVerify = {

install: (Vue) => {

// 注意:第一个参数是组件名称,我们在页面引用时用到

Vue.component(sliderVerify_vue.name, sliderVerify_vue)

}

}

// 暴露 install 函数

export default SliderVerify;

第五步:在 testH1 目录下创建webpack.config.js,同 package.json 同级

const path = require('path')

module.exports = {

devtool: "source-map",

// 模式

// mode: 'development', // 开发模式 生成普通 js 文件

mode: 'production', // 生产模式 生成 .min.js 压缩文件

// 入口

entry: path.join(__dirname, './src/index.js'),

// 出口

output: {

path: path.resolve(__dirname, 'dist'),

publicPath: path.resolve(__dirname, 'dist'),

// filename: 'testH1.js', // 生成的文件名 对应 开发模式

filename: 'testH1.min.js', // 生成的文件名 对应 生产模式

libraryTarget: 'umd', // 支持 ems / commontjs / requirejs 规范

// libraryTarget: 'amd' // 支持 requirejs 规范

umdNamedDefine: true

},

module: {

rules: [{

test: /\.vue$/,

loader: 'vue-loader'

}]

}

}

打包

打包命令 npx webpack

第六步:编辑 package.json 文件

{

"name": "test-h1",

"version": "1.0.0",

"description": "自定义 h1 标签",

"main": "dist/testH1.min.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"keywords": [

"H1",

"标签",

"vue",

"vue插件"

],

"author": "Mr.test",

"license": "MIT",

"devDependencies": {

"vue-loader": "^14.2.4",

"webpack": "^5.21.2",

"webpack-cli": "^4.5.0"

}

}

第七步:编辑 README.md

安装

npm install testH1

引入

import testH1 from 'testH1'

全局注册

Vue.use(testH1);

页面使用

<testH1> 文字内容 </testH1>

第八步:发布至 NPM

在npm官网注册账号:用户名 邮箱 密码

npm配置的中央仓库应是npm,如不是则运行以下命令 npm config set registry https://registry.npmjs.org/

添加用户,配置

npm addUser

依次添加:userName、password 和 Email

只需添加一次即可

上传至 npm npm publish

相关推荐
RainbowSea20 分钟前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴25 分钟前
笨方法学python -练习14
java·前端·python
Mintopia32 分钟前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
笑衬人心。40 分钟前
Ubuntu 22.04 修改默认 Python 版本为 Python3 笔记
笔记·python·ubuntu
Mintopia43 分钟前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农1 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
markyankee1011 小时前
Vue.js 入门指南:从零开始构建你的第一个应用
vue.js
MrSkye1 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤1 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子1 小时前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试