npm 私服以及发布项目

1. 创建一个新的vue项目

vue create testban

选择项目的默认配置，回车执行。执行完毕后，当前文件夹下就会出现一个刚刚初始化的空vue项目：：testban

由于新版的vue-cli删除了默认的配置文件，因此我们在项目下新建一个vue.config.js，此时项目结构如下：

2. 配置vue.config.js

module.exports = {pages: {index: {entry: 'src/main.js,template: 'public/index.html,filename: 'index.html}},css: {extract: false   //强制使用内联样式，这样打包出的插件样式会内置在js中，不需要单独引入}}

接下来我们要配置一下项目的配置文件，代码如下：

这里是标准的vue.config.js配置。

pages参数指定了项目的入口js文件和要使用的HTML模板。

css参数的extract属性指定在打包时是否要生成单独的样式文件。如果将extract置为true，则项目打包后会生成单独的css文件，在引入的时候就必须同时引入这个css文件才可以，如：

当你的组件有多个主题时，这样做会比较灵活。但如果你的组件只有一套样式，就可以将该参数置为false，此时所有的样式都会被打包成内联样式，开发者在使用的时候就不需要单独引入样式文件了。这里我们暂且只提供一个主题，因此将extract置为false。

3. 新建packages文件夹

一般来说，我们会在src目录下编写本地组件，然后在其他组件中进行调用。但是我们现在要编写的需要上传到npm的第三方组件，我们不希望它和项目的其他代码混在一起（这样不利于打包），因此我们将新建一个packages文件夹来存放这个组件。

4. 编写插件

我们先按照常规开发组件的方式开发好组件，这与直接在src下编写插件没有什么差别：

<template>...  // 模板
</template><script>...  // 脚本代码
</script><style>...  // 样式
</style>

注意：我们不止可以向npm上传单个组件，也可以上传一个组件库，这时packages下面可能包含多个vue组件。

开发完插件后，在packages目录下新建index.js，作为组件的入口文件。
(1). 开发单个组件
如果只需要上传单个组件（如本项目），index.js代码如下

// 导入组件
import selectshow from './selectShow/index'; let plugin = {};
plugin.install = function( Vue ){Vue.component(selectshow.name, selectshow); // 注册组件
}// 当使用Vue.use(plugin)安装插件时，
// 实际上就是在调用这里暴露出的对象的
// install方法，因此务必确保这里带有install方法
export default plugin;

组件的索引文件暴露出了一个plugin对象，该对象有一个install方法，当调用Vue.use()安装组件时，实际上就是在调用这个方法。因此你可以像下面这样使用selectshow：


// 引入组件暴露出的plugin对象
import selectshow from 'selectShow';// 执行plugin的install方法
Vue.use(selectshow);

请注意，即使组件不是从npm下载的，你也可以调用Vue.use()，只要传入的对象有install方法。

(2). 开发组件库
如果你要上传一个组件库，可以像下面一样编写index.js：

import ... from ''
import ... from '';
...   // 将所有的组件引入进来const components = [...]; // 将上述组件保存到一个数组// 定义install方法，它将作为export暴露的对象的方法被Vue.use调用
const install = function(Vue){// 判断当前组件是否已被安装过，如果已安装过则不再安装if(install.installed) return;  install.installed = true;// 遍历components数组，依次注册每个组件components.map(component => {Vue.component(component.name, component);})
}if(typeof window !== 'undefined' && window.Vue){install(window.Vue);
}
export default{install,...components    //将插件暴露出去，这样可以按需引入
}
// 如果只需要部分组件，请使用import {button} from '';
// Vue.component(Button)的语法手动注册组件
// 这样便可以实现按需引入

项目中引入组件库的方式与引入单个组件是一致的。

5. 测试组件

编写完组件后，需要先进行测试，排除组件的bug后才能上传到npm服务器。我们仍然按照常规的方式，在src文件夹下编写项目代码，引入packages下面的组件进行测试（我们有时也会把src文件夹改为test，表示这是测试组件用的）。

与常规引入组件的方式是一致的，只是路径是packages文件夹。

6. 配置package.json

这一步是为测试和打包做准备，我们在原package.json的顶部添加如下代码：
package.json：

"name": "selectShow",  "version": "0.1.0",  "description": "selectShow",  "main": "lib/vue-selectShow.umd.min",  "private": false,  "author": "zuo_jianxia","license": "MIT","style": "lib/vue-selectShow.css", "scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build","lint": "vue-cli-service lint","package": "vue-cli-service build --target lib ./src/packages/index.js --name selectShow --dest selectShow "},// 下面的配置都是自动生成的，不用动"dependencies": {... },"devDependencies": {... },...

lib 写法注意：

--target lib 后面对应是是打包入口文件

--name 对应是是目录文件夹名字

--dest 对应是打包之后包名

"lib": "vue-cli-service build --target lib ./src/packages/index.js --name selectshow --dest vue-selectShow "

这里需要特别注意的是，要将组件上传到npm上，private参数必须置为false。

另外，如果之前配置vue.config.js时选择生成单独的css文件，则这里的style参数是必须的（否则会找不到样式文件），如果没有单独的css文件，这个参数可以省略。

这里最重要的是scripts内的lib命令，调用它可以将模块打包，只有打完包，才能上传到npm服务器。我们来分析一下各个参数的含义：

vue-cli-service build  // 调用vue-cli提供的build命令
--target lib // 打包目标是package.json同级目录下的lib文件夹（打包时会自动创建）
--name vue-img-container // 包名
--dest lib packages/index.js // 打包入口是packages文件夹下的index.js

7. 打包

在命令行输入：

npm run lib

然后回车即可进行组件打包。稍等片刻，lib文件夹下就会生成打包结果。这个lib就是我们真正要给开发者使用的包（理论上你可以只向npm上传这个文件夹，不过大多数情况下我们会把整个项目上传，便于其他开发者学习和研究）。

打包执行完成后我们项目目录下就会多出一个chuxiuli-ui文件夹，存放的是打包后的文件。

9. 初始化package.json

想要发布到npm仓库，我们还得在 selectShow 文件夹下初始化一个package.json文件。进入pig-ui目录，执行命令：

npm init -y

上述文件或文件夹将不会被上传到npm。至此，我们的组件已经开发和打包完毕，可以准备上传到npm了。要上传到npm，首先需要有一个npm账号。

注意：版本号

10. 注册npm账号

登录网址：https://www.npmjs.com，可以免费注册一个开发者账号。注册完毕后需要验证邮箱，没有验证邮箱是不能上传模块的。

提示：我用手机端验证了邮箱，发现上传时仍显示未验证邮箱，后来在电脑端验证邮箱才可以正常使用，不知道是不是操作失误。

11. 登录npm账号
回到项目文件夹，打开命令行窗口，输入：

npm login

随后需要依次输入用户名、密码（密码是隐藏的，输完直接回车即可）和邮箱。

输入完成，回车即可登录npm账号。

12. 发布组件
现在我们可以将组件发布到npm服务器上了。执行命令：

npm publish

回车，稍等一会，组件就会被上传到npm服务器上了。

13. 上传到私有npm

检查源：npm config get registry

切换源

npm config set registry https://registry.npmjs.org

切换官方源才能上传

± 切回淘宝源（后续若需要）

npm config set registry https://registry.npm.taobao.org

文章涉及连接：

原文链接：https://blog.csdn.net/qq_56108448/article/details/125782271

版权声明：本文为CSDN博主「夕山雨」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41694291/article/details/104328725

Vue封装组件并发布到npm仓库(无第三方依赖)_小储今天暴富了嘛的博客-CSDN博客