阅读 387

小小试水—npm上传自己的vue组件

步骤

  • 注册npm账号
  • 搭建一个vue项目
  • 新建packages文件夹
  • 修改vue.config.js配置
  • 修改package.json配置

搭建一个vue项目

可以查看我的文章搭建一个vue3/4项目

目录如下:

├── node_modules/                  # 依赖包;
├── public/                        # 静态资源,不经过打包;
│   ├── favicon.ico                # 图标
│   ├── index.html                 # html入口
├── src/                           # 资源;
│   ├── assets/                    # 图片等资源,需要打包
│   ├── components/                # 组件
│   ├── App.vue                    # 根组件;
│   ├── main.js                    # 入口;
├── package.json                   # 包文件;
├── .gitignore                     
├── README.md       
├── vue.config.js
复制代码

创建一个包文件夹

  • 首先,删除不必要的文件夹assets,components
  • 其次,新增一个包文件夹,packages
  • 在包文件夹packages下创建一个index.js文件
  • 在包文件夹下创建你的组件文件夹,比如我要上传一个面包屑导航组件,文件夹名字为breadCrumNav
  • breadCrumNav文件夹下创建src文件夹,以及index.js文件
  • src文件夹下创建你的组件,我的组件名为breadNav

目录如下:

├── node_modules/                  # 依赖包;
├── packages/                      # 组件包库;
│   ├── breadCrumNav               # 面包屑组件
│   │   ├── src                    # 组件
│   │   │   ├── breadNav.vue                 
│   │   ├── index.js               # 面包屑组件入口
│   ├── index.js                   # packages入口
├── public/                        # 静态资源,不经过打包;
│   ├── favicon.ico                # 图标
│   ├── index.html                 # html入口
├── src/                           # 资源;
│   ├── App.vue                    # 根组件;
│   ├── main.js                    # 入口;
├── package.json                   # 包文件;
├── .gitignore                     
├── README.md       
├── vue.config.js
复制代码

编写你的组件代码

breadNav.vue中是你想要实现的组件功能

导出你的组件并注册到Vue

这里说明一下,如果你有很多组件,比如面包屑组件,按钮组件等,某个组件单独导出(按需加载)可以使用组件下的index.js,整合所有组件,对外导出,使用packages/index.js

packages/breadCrumNav/index.js代码如下:

import BreadCrumNav from './src/breadNav'

export default (Vue) =>{
  Vue.component(BreadCrumNav.name,BreadCrumNav);
} 
复制代码

packages/index.js整合所有组建导出如下:

// 导入面包屑组件
import breadCrumNav from './breadCrumNav'
// 存储组件列表
const components = [
  breadCrumNav
]
// 定义 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,
  // 以下是具体的组件列表
  breadCrumNav
}
复制代码

配置vue.config.js文件

因为新增了packages目录,目录未加入webpack编译,默认不被webpack处理。

  • 更改输出路径indexPath:'breadcrumnav.js'
  • chainWebpack链式操作,加入packages目录。
const isProduct = process.env.NODE_ENV === 'production'
module.exports = {
  indexPath:'breadcrumnav.js',// 输出路径
  chainWebpack:config => {
    config.module
      .rule('js')
      .include
      .add(__dirname + 'packages')
      .end()
      .use('babel')
      .loader('babel-loader')
      .tap(options => {
        // 修改它的选项...
        return options
      })
  }
}
复制代码

配置package.json

新增三个字段

  • description描述你的组件作用
  • main你的入口
  • files你需要上传的文件
  • private改为false
  • name你的包名,npm install xxx使用
{
  "name":"breadcrumnav"
  "description": "一个面包屑导航组件",
  "main": "lib/breadcrumnav.umd.min.js",
  "private": false,
  "files": [
    "lib",
    "packages"
  ]
}
复制代码

新增scrpit命令字段

  • --target 目标目录,启用lib库模式
  • --dest 输出目录,改为lib
  • 最后一个参数为入口,我们改为packages/index.js
{
    "scripts": {
       "lib": "vue-cli-service build --target lib --name breadcrumnav --dest lib packages/index.js",
    }
}
复制代码

执行命令:

npm run lib
复制代码

可以看到,多出了一个lib文件夹。

添加.npmignore 文件

.gitignore 的语法一样,设置需要忽略的文件

node_modules
/dist
/public
/src/*

vue.config.js
.gitignore
babel.config.js
package-lock.json
复制代码

注册npm账号

若没有账号,前往npm 官网注册账号。

不要忘记用户名和密码哦。

登录npm

在你的项目目录下,执行命令

npm login
复制代码

提示输入用户名

username:xxxx
复制代码

提示输入密码:

password:xxxxx
复制代码

提示输入邮箱:

Email:(this IS public) xxxx@xx.com
复制代码

这里需要注意的是,注册账号后必须去邮箱激活,否则的化,无法上传上去,提示你邮箱未激活。我就在这里踩了坑……

发布到npm

执行如下命令

npm publish
复制代码

需要注意的是,版本号不能与之前一致,每次发包前,需要修改package.json中的字段`version`

如果对version版本字段不熟悉,可以看我的文章git自动生成changelog及项目版本管理

我们可以在scrpit命令字段中添加一段命令,意思是新增一个版本小号,然后再发包。

{
    "scripts": {
       "package": "npm version patch && npm publish",
    }
}
复制代码

运行:

npm run package
复制代码

别人npm install下载

npm install breadcrumnav@0.1.10 --save
复制代码

下载后的包目录如下:

├── breadcrumnav/                  
│   ├── lib               
│   │   ├── breadcrumnav.common.js      
│   │   ├── breadcrumnav.umd.js     
│   │   ├── breadcrumnav.css
│   │   ├── demo.html
│   ├── packages               
│   │   ├── breadCrumNav               # 面包屑组件
│   │   │   ├── src                    # 组件
│   │   │   │   ├── breadNav.vue                 
│   │   ├── index.js               # 面包屑组件入口
│   ├── index.js                   # packages入口
├── package.json                   
├── README.md       
复制代码

编写你的README.md

想让别人用你的组件,这个文件说明必不可少。

别人项目main.js中引入

import breadCrumNav from 'breadcrumnav/lib/breadcrumnav.common.js'
import 'breadcrumnav/lib/breadcrumnav.css'
Vue.use(breadCrumNav);
复制代码

组件中使用:

<breadNav :breadNavList="breadNavList" @changeRoute="changeBread"/>
复制代码

注意:这个组件名`breadNav`是你编写的breadNav.vue组件中的`name`字段。

好了,以上就是vue/cli4 + npm 上传组件。