上传vue组件到npm npm私服

TVM

已于 2022-06-07 15:44:51 修改

阅读量908

点赞数 1

分类专栏： javascript VUE node.js 文章标签： vue.js npm 前端

于 2022-05-19 10:03:40 首次发布

本文链接：https://blog.csdn.net/weixin_42580432/article/details/124846702

版权

VUE 同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

javascript

15 篇文章 0 订阅

订阅专栏

node.js

3 篇文章 0 订阅

订阅专栏

准备阶段

!!! 因为node版本或者vue-cli版本不同可能造成 1) 发布失败 ,构造失败 2)初始化项目 , 项目的结构不同导致文章阅读比较麻烦. !!!

1.例子中node版本是 v14.17.0 , node历史版本下载链接

2. powershlell 中输入 vue --version 查看vue-cli的版本 , 我是用的是3.11.0 , vue-cli的2, 3 和4 的项目构造和安装方法都是不同的

3. yarn 或者 npm均可

1. 初始化项目

1.1 powershell中输入 vue create xxx 注:xxx为项目名称 , 初始化过程中的一些配置请自行查阅其他文章,这里不再赘述

1.2 项目结构

dist 文件不是初始化出现的,是打包之后,这里后面再说

src/components 下新建一个js文件,和你最终(从npm上下载下来的并引入)要用到的vue组件

此时可以运行你的项目 , 安装需要的依赖 , 来编写你自己的vue组件.

1.3 js文件内容

// 存储组件列表
import wwinput from "./pageCom";
const components = [wwinput];
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function(Vue) {
  // 判断是否安装
  if (install.installed) return;
  // 遍历注册全局组件
  components.map(component => Vue.component(component.name, component));
};
// 判断是否是直接引入文件
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}
export default {
  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
  install,
  // 以下是具体的组件列表
  wwinput
};

2. 打包需要的配置信息

2.1 package.json 基本信息

  "name": "518page",  //项目名称
  "version": "1.0.0",  // 版本
  "author": "xxx", // 作者名
  "description": "测试用page组件",  //描述
  "private": false,  //是否私有

2.2 打包命令还是在package.json中

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
     // 这一行是新加的
    "build-bundle": "vue-cli-service build --target lib --name 518testpage ./src/components/index.js"
  },

其中 lib --name xxproject , xxproject就是你要发布的包名.

2.3 打包

然后我们cnpm run build-bundle 或者yarn build-bundle 打出包 , dist/ xxx.common.js是我们需要的路径