Vue封装组件,发布到npm仓库

 一、环境准备。


1.初始化Vue项目。

vue create XXX(工程名字)

2.运行项目。

npm run serve

二、组件封装。

1.新建一个文件夹。

因为我们可能会封装多个组件,所以在src下面新建一个文件夹用来存放所有需要上传的组件。

2.编写组件代码。

就是项目中在components文件夹中写的组件形式,写完之后我们引用到App.vue组件里面验证一下,看是否组件可用。

3.使用Vue插件模式。

这一步是封装组件中的重点,用到了Vue提供的一个公开方法:install。

这个方法会在你使用Vue.use()时被调用,这样使得我们的插件注册到了全局,在子组件的任何地方都可以使用。

在上面新建好的文件夹目录下新建index.js文件。

代码如下:

/index.js;
import xxxx from "../xx/xx/xx.vue"; // 引入封装好的组件
const coms = [xxxx]; // 如果有多个其它组件,都可以写到这个数组里

// 批量组件注册
const install = function (Vue) {
  coms.forEach((com) => {
    Vue.component(com.name, com);
  });
};

export default install; // 这个方法使用的时候可以被use调用

三、组件打包。

修改项目中的package.json文件,配置打包命令:

"package": "vue-cli-service build --target lib ./src/components/index.js --name st-ui --dest st-ui"

打包的命令解释:

  • --target lib 关键字 指定打包的目录
  • --name 打包后的文件名字
  • --dest 打包后的文件夹的名称

执行打包命令:

上面我们配置的是package(这个名字可以随便起),所以我们执行打包命令为:

npm run package

打包执行完成后我们项目目录下就会多出文件夹,就是存放的是打包后的文件。

四、组件发布。

1.初始化package.json。

想要发布到npm仓库,我们还得在上面新建的文件夹下初始化一个package.json文件。进入该文件夹目录,执行命令:

npm init -y

2.发布到npm仓库。

1.首先要有npm仓库的账号(如果没有去注册,要注意记住用户名、密码和邮箱,一会发布的时候会用到。)

2.设置npm源

为了防止本地的npm镜像源采用的是淘宝镜像源或者其它的,如果想要发布npm包,是要用npm官方源。所以我们把npm源切换为官方得源,命令如下:

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

3.添加npm用户

进入上面创建的文件夹目录(因为我们只发布该文件夹中的组件),添加npm用户,执行命令:

npm adduser

回车按照步骤依次输入npm用户名、密码和邮箱。记着登录注册npm账号所用的邮箱,还会输入一个一次性验证码,由npm官方发送到你的邮箱。

4.发布npm

在上面新建的文件夹目录下执行命令:

npm publish

这里我遇到一个报错发布失败,是名字重复了,修改名字之后再次执行发布命令。发布成功后,我们就可以到npm官网上查看自己发布得npm包。同时也会收到npm官方的邮件。

五、从npm安装使用。

直接执行安装命令:

npm install xxxx//组件名称

然后在main.js引用注册,代码如下:

import XXX from "xxxx";
import "../node_modules/xxxx/xxxx.css";//引入css路径
//安装成功后css文件就会在node_modules依赖包中



Vue.use(XXX);

全局注册后就可以在项目中直接使用了!

到这里一个组件的封装并发布到npm上就结束了。

你可能感兴趣的:(vue.js,npm,javascript)