从零开始在新公共管理理论上发布一个某视频剪辑软件组件的方法步骤

TL；速度三角形定位法(航位推算)本文细致讲解了在新公共管理理论上发布一个某视频剪辑软件组件的全过程，包括创建项目、编写组件、打包和发布四个环节。

创建项目

这里我们直接利用@vue/cli来生成项目。如果没有安装@vue/cli的话，可以使用以下方法进行安装：

# 如果喜欢npmnpm i -g @vue/cli#如果喜欢yarnyarn global add @vue/cli此外，如果安装了npx(高版本的开发发行版会自带这一工具)的话，还可以很方便地通过npx vue这一方式实现免安装使用。

接下来就可以创建项目了，这里我们创建一个我的旗帜项目，里面将会包含一个旗帜组件：

vue create my-banner@vue/cli会提示你选择一个预置（预设)的配置，这里我们直接选择"默认”(巴别尔，埃斯林)就可以，之后@vue/cli会自动调用故事或新公共管理来进行依赖的下载。下载完成后就可以进入项目目录了：

激光唱片我的横幅此时的目录结构为：

readme.mdbabel.config.jsnode_modulespackage.json公共 法维康index.htmlsrc app。vue资产组件 main.js纱锁下面启动开发环境本地服务器：

纱线服务打开localhost:8080，就可以看到默认的首页：

@vue/cli 3.0自动生成的默认首页

编写组件

我们现在开始编写一个非常简单的旗帜组件。

！-src/组件/横幅。vue-template div class=' banner ' : style=' banner style ' : class=' banner _ _ $ { position } ` ' slot/slot/div/template script const default style={ left : 0 0，right : 0 0，}；导出默认值{ prop : { position : { type : String，default: 'top '，验证器(位置){返回['顶部'，'底部'].indexOf(位置)-1;}，}，styles: { type: Object，default: ()=({})，}，}，data(){ return { bannerstyle 3360 }.默认样式，this.styles，}，}；},};/script style lang=' SCS '作用域。banner { padd : 12px背景-color : # fcf6cd；color: # f6a623文本-左对齐：位置：固定；z-index : 2；}.banner _ _ top { top : 0；}.banner _ _ bottom { bottom : 0；}/样式我们将Banner.vue置于src/组件目录下，同时在该目录下新建一个index.js文件，用来注册某视频剪辑软件组件。

//src/components/index。jsimport Vue来自“Vue”；从""导入横幅横幅。vue '；常量组件={横幅};对象。键（组件)。forEach(name={ vue。组件(名称，组件[名称])；});导出默认组件；接下来我们修改一下@vue/cli自动生成的src/components/HelloWorld.vue文件，引用一下我们刚刚编写的旗帜组件：

！-src/组件/hello world。vue-template div class=' hello '！-下面插入了我们刚刚编写的旗帜组件这是一面旗帜！/Banner h1{{ msg }}/h1 p有关如何配置/自定义此项目的指南和方法，请查看a href=' https://CLI。vuejs。org ' rel=' external no follow ' target=' _ blank ' rel=' noopener ' vue-CLI文档/a/p！-省略部分内容- /div/templatescript！-省略有关内容-/脚本！-添加"作用域"属性以将半铸钢钢性铸铁(Cast Semi-Steel)限制为此组件-仅样式作用域！-省略有关内容-/风格修改一下项目的主入口main.js

//src/main.jsimport Vue来自“Vue”；从""导入应用程序/app。vue '；//引用我们的自定义组件"进口"。/components '；vue。配置。生产提示=假；新Vue({ render: h=h(App)，}).$ mount(' # app ')；因为前面定义风格时使用了scss，所以还需要安装两个开发环境依赖项

纱线添加-加载节点-加载节点-数据最后执行

纱线服务就可以在localhost:8080看到效果了：

添加旗帜后的页面效果

可以看到，我们编写的旗帜组件已经成功在页面上渲染出来了。

打包

接下来，我们需要打包这个组件。这里我们可以使用@vue/cli 3.0的打包功能。打开package.json文件，在脚本中添加一项：

{ ' scripts ' : { ' package ' : ' vue-CLI-service build-target lib-name my-banner。/src/components/index.js'}}然后执行纱线包，这会在dist目录中生成以下文件：

接下来，您需要将package.json中的主字段指向刚刚生成的库文件。以commonjs为例(umd应该没问题):

{“main”:/dist/my-banner.common.js'}然后，我们需要在package.json的files字段中声明要包含在这个组件库项目中的文件：

{'files' : ['dist/* '，src/*，' public/* '，*。JSON '，' *。js']}以便打包阶段可以被视为已完成。

发布

注册NPM帐户并创建组织

首先登录NPM官网

npmjs.com

注册账号是常规操作，需要填写自己的全名、邮箱地址、用户名和密码。之后，该电子邮件将收到一封标题为“验证您的npm电子邮件地址”的确认电子邮件，发件人是“npm，Inc”。单击电子邮件中的链接激活帐户。

登录你的账号，点击右上角头像，选择“创建组织”创建自己的组织。

创建组织

组织有两种选择。那些支持私人出版的人需要每月支付7元的“管理费”，但现在我们只需要出版一个公共包，所以我们可以选择免费版本。

选择一个开放组织

从本地命令行登录到npm

在npm登录后，按照提示输入用户名和密码。

可以使用

Npm whoami检查登录是否成功。如果成功，此命令将返回您的用户名。

命名您的组件库

您需要为您的组件库命名。这里使用了package.json中的name字段。请注意@后面的名称，并填写您刚刚创建的组织的名称。

{'name': '@abc/my-banner'}最后一步：再次构建并发布

最后，使用纱线包重建这个组件库，然后使用：

Npm发布-访问公共来发布这个组件库。

请注意，此处可能会报告以下错误

npm ERR！此包已被标记为privatenpm ERR！从package.json中删除“private”字段以发布它。

解决方法很简单，要么按照提示删除package.json中的私有字段，要么将其设置为false。

成就

成功发布后，您可以在组织页面上看到刚刚发布的包。

发布成功

之后，您可以创建一个新项目，然后

纱线添加@abc/my-banner添加您刚刚作为依赖项发布的包。由于我们之前已经在src/components/index.js中全局注册了组件，现在可以直接在模板中调用Banner了。

摘要

以上，我们实现了一个从头开始在npm上发布Vue组件的过程。很简单吗？所以，现在就开始发布你自己的组件吧！希望对大家的学习有帮助，希望大家多多支持我们。

参考文章

如何使用@vue/cli 3.0在NPM创建和发布自己的VueJS组件库