一、环境准备。
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上就结束了。