Vue 项目创建发布npm

 

（学习地址：https://www.cnblogs.com/gzy-web/p/11934537.html）

一 创建发布

1  vue create test（创建vue cli3项目，test是创建的项目名称）

2 首先需要创建一个 packages 目录，用来存放组件

3开发组件

之前已经创建了一个 packages 目录，用来存放组件

该目录下存放每个组件单独的开发目录，和一个 index.js 整合所有组件，并对外导出

每个组件都应该归类于单独的目录下，包含其组件源码目录 src，和 index.js 便于外部引用

这里以 textarea 组件为例，完整的 packages 目录结构如下：

 Main.vue 作为组件的主要内容

4  textarea/index.js 用于导出单个组件，如果要做按需引入，也需要在这里配置

// packages/textarea/index.js

// 导入组件，组件必须声明 name

import Textarea from './main.vue'

// 为组件添加 install 方法，用于按需引入

Textarea.install = function (Vue) {

    Vue.component(Textarea.name, Textarea)

}

export default Textarea （如下图）

 

5 整合并导出组件

编辑 packages/index.js 文件，实现组件的全局注册

// packages / index.js

// 导入单个组件

import Textarea from './textarea/index'

// 以数组的结构保存组件，便于遍历

const components = [

    Textarea

]

// 定义 install 方法

const install = function (Vue) {

    if (install.installed) return

    install.installed = true

    // 遍历并注册全局组件

    components.map(component => {

        Vue.component(component.name, component)

    })

}

if (typeof window !== 'undefined' && window.Vue) {

    install(window.Vue)

}

export default {

    // 导出的对象必须具备一个 install 方法

    install,

    // 组件列表

    ...components

}

6 在main.js 中引入该组件

import TagTextarea from '../packages/index'

Vue.use(TagTextarea)

然后就能直接使用刚才开发的 textarea 组件

组件的标签就是组件内定义的的 name

4 组件打包

vue-cli 3.x 提供了一个库文件打包命令

主要需要四个参数：

1. target: 默认为构建应用，改为 lib 即可启用构建库模式

2. name: 输出文件名

3. dest: 输出目录，默认为 dist，这里我们改为 lib

4. entry: 入口文件路径，默认为 src/App.vue，这里改为 packages/index.js

基于此，在 package.json 里的 scripts 添加一个 lib 命令

// pageage.json

{

  "scripts": {

    "lib": "vue-cli-service build --target lib --name tag-textarea --dest lib packages/index.js"

  }

}

然后执行 npm run lib 命令，编译组件

 准备发布

首先需要在 package.json 添加组件信息

name: 包名，该名不能和已有的名称冲突；

version: 版本号，不能和历史版本号相同；

description: 简介；

main: 入口文件，应指向编译后的包文件；

keyword：关键字，以空格分割；

author：作者；

private：是否私有，需要修改为 false 才能发布到 npm；

license：开源协议。

然后创建 .npmignore 文件，设置忽略文件

该文件的语法和 .gitignore 的语法一样，设置发布到 npm 时忽略哪些目录或文件

.DS_Store

node_modules/

examples/

packages/

public/

vue.config.js

babel.config.js

*.map

*.html

# local env files

.env.local

.env.*.local

# Log files

npm-debug.log*

yarn-debug.log*

yarn-error.log*

# Editor directories and files

.idea

.vscode

*.suo

*.ntvs*

*.njsproj

*.sln

*.sw*

发布到 npm

如果以前改过 npm 的镜像地址，比如使用了淘宝镜像，就先改回来

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

如果没有 npm 账户，可以通过 npm adduser 命令创建一个账户，或者到 npm 官网注册

如果在官网注册的账户，或者以前就有账户，就使用 npm login 命令登录

具体流程可以参考官方文档（谷歌浏览器->翻译中文）

在发布之前，一定要确保组件已经编译完毕，而且 package.json 中的入口文件（main）的路径正确

一切就绪，发布组件：

npm publish

二 发布成功，项目中引入

1 npm i [包名]

2 main.js 全局引入

 

3 页面中调用（注意：调用的名字是组件中name 的命名）

 

三 Npm包升级

1 重新打包 npm run lib

2 登陆npm login

3 package.json 修改包版本号

4 重新上传 npm publish

Npm切换cnpm

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

Cnpm 切换 npm

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

更新包

npm update [包名]

npm 删除版本号

npm unpublish tag-textarea-test@0.1.3

Npm下载对应版本

npm i --save-dev vue-ant-second-packag@版本号

以 ant design vue 为基础二次封装组件发布npm

学习地址

1. https://www.cnblogs.com/winyh/p/11791839.html
2. 『前端工程』—— Vue CLI3搭建组件库并实现按需引入实战操作 - 掘金
3. https://www.cnblogs.com/winyh/p/11791839.html