基于vue cli3.0插件创建于发布

引言

本文主要为后续开发常用的npm包做铺垫。包含以下内容：
1.vue3.0cli界面初始化。
2.npm包编写。
3.npm发布、更新、删除。
4.注意事项。
5.npm地址。

vue3.0cli界面初始化

全局安装vue-cli：

npm install -g @vue/cli

创建一个vue项目：

vue create <项目名称>

npm包编写

1、首先把src的文件名称改成example。【此文件夹目的用于测试展示未打包之前的效果】
2、新建packages。【此文件夹用于存储开发的插件包】
3、新建vueconfig.js.

const path = require('path');
function resolve(dir){
    return path.join(__dirname,'..',dir)
}
module.exports = {
    pages:{
        index:{
            entry:'examples/main.js',  //发布npm时候的入口文件
            template:"public/index.html",  
            filename:"index.html"  //文件名字
        }
    },
     // 组件样式内联
     css: {
        extract: false
      },
      // 扩展 webpack 配置，使 packages 加入编译
      chainWebpack: config => {
        config.module
          .rule('js')
          .include
          .add('/packages/')
          .end()
          .use('babel')
          .loader('babel-loader')
          .tap(options => {
            // 修改它的选项...
            return options
          })
      }
 
    
}

文件夹结构如下图所示：

4、创建插件包。（vue文件name属性一定要和后面引入时候名称一致）*等会再强调

<template>
  <div style="width:100px;height:100px;background:red">翟家类</div>
</template>

<script>
export default {
name:"datePicker"
}
</script>
<style>
</style>

5、与插件平级的index.js/文件内容 用于插件的单独引入

import datePicker from './src/datePicker.vue'
datePicker.install = function(Vue){
Vue.component(datePicker.name,datePicker)
}
export default datePicker;

6、外层inde.js的内容编写

import datePicker from './datePicker/index.js';
const components = [
    datePicker
  ];
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,
    ...components
}

npm发布

1、npm发布。首先在package.json文件中添加如下代码：尤其是build-lib用于打包编译。

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build-lib": "vue-cli-service build --target lib --name dfk --dest lib packages/index.js",
    "lint": "vue-cli-service lint"
  },

之后运行npm run build-lib，会在打包完成后创建lib文件夹。
2、再添加这个属性。

name: 包名，该名字是唯一的。可在 npm 官网搜索名字，如果存在则需换个名字。
version: 版本号，每次发布至 npm 需要修改版本号，不能和历史版本号相同。
description: 描述。
main: 入口文件，该字段需指向我们最终编译后的包文件。
keyword：关键字，以空格分离希望用户最终搜索的词。
author：作者
private：是否私有，需要修改为 false 才能发布到 npm
license： 开源协议
以下为参考设置

{
"name": "demozj2222",
  "version": "0.4.0",
  "private": false,
  "main": "lib/dfk.umd.min.js",
  "keyword": "demozj2222",
}

之后运行npm publish
2、npm更新
直接可以修改version版本号，然后npm publish
3、npm删除
npm unpublish <npm包名字>
如果提示权限不够 npm unpublish <npm包名字> --force
如果大于72小时后比较麻烦

注意事项

本人走过的弯路：
1、vue文件中的name一定要写，尽量名称与文件名字一致。因为后面加载此文件编译的时候是需要读取这个属性信息，通过这个属性信息去加载这个文件。
2、还有就是在编写package,json文件的时候，需要打包npm文件的配置信息中我丢掉了"main": “lib/dfk.umd.min.js”, 这个的意思是你在外部使用npm包时候需要找到的入口文件，这个一定要配置，不然引入到其他项目后报错。
3、export default和export的用法。
export 可以有多个

export{ name1, name2, ..., nameN }

// 需要解构导出并重命名

import  { name1, bar }

export default 一个js文件中只能有一个

// 导出时：

export default { name1, name2, …, nameN };

// 导入时：

import * from './myModule'

import all from './myModule'

// 使用时：

console.log(name1)

npm地址

https://www.npmjs.com/package/demozj2222