Web前端最全npm 上传发布自定义组件以及使用详细流程(Vue包含)(1)，2024年最新7年老Web前端一次坑爹的面试经历

打开全栈工匠技能包-1小时轻松掌握SSR

两小时精通jq+bs插件开发

生产环境下如歌部署Node.js

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader

[Done] exited with code=0 in 0.054 seconds

• 这样，说明代码是没有问题的，那么可以进行发布了！！

• (可选) 可以在根目录下新建 .npmignore 文件，设置忽略发布文件，文件不多可以不加，看自己心情。

.DS_Store

node_modules/

examples/

packages/

public/

vue.config.js

babel.config.js

*.map

*.html

local env files

.env.local

.env.*.local

Log files

npm-debug.log*

yarn-debug.log*

yarn-error.log*

Editor directories and files

.idea

.vscode

*.suo

.ntvs

*.njsproj

*.sln

.sw

• 发布代码

$ npm publish

• 如果登录的 NPM 账号没有验证邮箱，运行命令之后会报错 you must verify your email before publishing a new package，所以注册之后记得去邮箱里面验证一下，验证之后可以再次运行发布命令，如果还报这个错误可以重新登录一下 NPM 账号:

dengzemiaodeMacBook-Pro:DZMTest dengzemiao$ npm publish

npm notice

npm notice 📦 dzmtest@1.0.0

…

npm ERR! code E403

// 主要是这行错误

npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/dzmtest - you must verify your email before publishing a new package: https://www.npmjs.com/email-edit

npm ERR! 403 In most cases, you or one of your dependencies are requesting

npm ERR! 403 a package version that is forbidden by your security policy.

npm ERR! A complete log of this run can be found in:

npm ERR! /Users/dengzemiao/.npm/_logs/2020-07-22T03_27_19_859Z-debug.log

• 如果出现这个错误，意思是需要修改 package.json 中的 version 版本号，一般是版本已经存在，新项目发布应该不会报这个错误。

dengzemiaodeMacBook-Pro:DZMTest dengzemiao$ npm publish

npm notice

npm notice 📦 dzmtest@1.0.0

…

npm ERR! code E403

// 主要是这行错误

npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/dzmtest - You cannot publish over the previously published versions: 1.0.0.

npm ERR! 403 In most cases, you or one of your dependencies are requesting

npm ERR! 403 a package version that is forbidden by your security policy.

npm ERR! A complete log of this run can be found in:

npm ERR! /Users/dengzemiao/.npm/_logs/2020-07-23T03_32_29_970Z-debug.log

• You cannot publish over the previously published versions: 1.0.0. 这个错误是版本已经存在，需要修改一个新版本号在上传，这种问题一般在后续版本迭代中出现，忘记修改版本号就直接提交。

• 下面是 version 字段版本格式（这里只是建议这么写，不在意可以随意）

1、版本格式：主版本号、次版本号、修订号

2、版本号递增规则如下：（例如：我原本的项目是 1.0.0 版本的话）

主版本号：当你做了不兼容的 API 修改，此情况版本应该为 1.0.1

次版本号：当你做了向下兼容的功能性新增，此情况版本应该为 1.1.0

修订号：当你做了向下兼容的问题修正。此情况版本应该为 2.0.0

3、通过 npm version <update_type> 自动改变版本

update_type 为 patch、minor,、major 其中之一，分别表示补丁，小改，大改。

例如: $ npm version minor v2.0.0

• 如果有这个错误，可以修改一下 package.json 中的 version 为 1.0.1 版本，然后再次执行发布命令

{

“name”: “dzmtest”,

“version”: “1.0.1”,

}

• 再次执行发布命令

$ npm publish

dengzemiaodeMacBook-Pro:DZMTest dengzemiao$ npm publish

npm notice

npm notice 📦 dzmtest@1.0.0

npm notice === Tarball Contents ===

npm notice 130B index.js

npm notice 114B test.js

npm notice 202B package.json

npm notice === Tarball Details ===

npm notice name: dzmtest

npm notice version: 1.0.0

npm notice package size: 471 B

npm notice unpacked size: 446 B

npm notice shasum: fc4453748f8b0ca687a2ddea8f650ab75b4c5bec

npm notice integrity: sha512-V+RHefgSXWB/Q[…]Qm/FP3BNcaL9g==

npm notice total files: 3

npm notice

• dzmtest@1.0.0

dengzemiaodeMacBook-Pro:DZMTest dengzemiao$

• 这样就发布成功了！！！

五、使用刚发布的包

1)、创建一个vue项目，并运行起来。

$ vue create npm-test

2)、在新建的 npm-test 项目中导入 dzmtest 包，npm 命令使用介绍以及区别。

$ npm i dzmtest

dengzemiaodeMacBook-Pro:npm-test dengzemiao$ npm i dzmtest

• dzmtest@1.0.0

added 1 package and audited 1170 packages in 6.872s

41 packages are looking for funding

run npm fund for details

found 0 vulnerabilities

这样就导入成功了！！

之前在编写 NPM 项目的时候内部文件是这样的：

导入到其他项目之后文件内部是这样的，在 node_modules 文件目录下：

这样就很清楚明白该怎么去编写 NPM 项目了，它是直接整个导入进来了之前的 NPM 项目。

3)、导入成功之后，支持使用

需要在新建的 npm-test 项目里面找到 main.js 全局导入一下 dzmtest

import Vue from ‘vue’

import App from ‘./App.vue’

import router from ‘./router’

import store from ‘./store’

// 如果不是很明白这两种导入方式，可自己百度一下

// JS是这样导入

import DZMTest from ‘dzmtest’

Vue.prototype.$dzmtest = DZMTest

// 如果是自定义UI组件，就需要这样使用，这样就可以直接支持全局使用

// import DZMTest from ‘dzmtest’

// Vue.use(DZMTest)

Vue.config.productionTip = false

new Vue({

router,

store,

render: h => h(App)

}).$mount(‘#app’)

导入成功之后，可以在任何页面中去使用 $dzmtest 这个属性了，这里是新建的项目，就直接在 Home 页面测试一下就行了

然后运行项目就会输出成功了

$ npm run serve

上传自定义组件到 NPM 到这里就完成了！！！！！！

---

---

Vue 扩展内容

---

---

六、Vue 如何自定义 UI 组件上传并使用

1)、先看看 Vue 自定义全局UI组件 怎么编写

2)、根据上面文章写好插件之后，通过新建一个 npm 项目，将自定义组件 custom 文件里面的放到新建的 npm 项目中：

3)、index.js 导入方式介绍 (选其一即可，看自己需求调整)

• 方式一：

// 导入单个组件

import CustomView from ‘./custom.vue’

// Vue 直接导入

const Custom = {

install: function (Vue) {

Vue.component(‘Custom’, CustomView)

}

}

// 导出

export default Custom

• 方式二：

// 导入单个组件

import Test from ‘./test/index.js’

// 以数组的结构保存组件，便于遍历

const components = [

Test

]

// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册

const install = function (Vue) {

// 判断是否安装

if (install.installed) return

install.installed = true

// 遍历并注册全局组件

components.map(component => Vue.component(component.name, component))

紧跟潮流

大前端和全栈是以后前端的一个趋势，懂后端的前端，懂各端的前端更加具有竞争力，以后可以往这个方向靠拢。

这边整理了一个对标“阿里 50W”年薪企业高级前端工程师成长路线，由于图片太大仅展示一小部分

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】