vue-cli3 打包发布npm包

​ 携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情  

在新的环境下尝试打包

1.安装vue-cli

npm install -g @vue/cli

2.运行以下命令来创建一个新项目:

vue create hello-world

项目配置名称、esline直接回车，会默认添加，如需修改请查看配置项

vuecli3 新建项目参考：cli.vuejs.org/zh/guide/cr…

3.此时目录结构如图

​编辑

4.添加入口文件，引入组件

1）把原项目封装的组件均复制到src/components

2）在components下新增index.js，引入所有组件，并注册，作为整个包的入口

components/index.js

// 整个包的入口

// 定义 install 方法，接受 Vue 作为参数，如果使用 use 注册插件，则所有组件都将被注册

import CyButton from '../components/Cy-button/index.vue'


const components = [
    CyButton
]

const install = function (Vue) {
    // 全局注册所有组件
    components.forEach(item => {
        Vue.component(item.name, item)
    })
}
// 判断是否是以文件方式或者CDN方式，如果是，则不用调用 Vue.use()。在 CommonJS 中应始终使用 Vue.use()
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}
export default install

5.打成npm包配置，配置 package.json 文件

配置项：

name ：打包后的项目名称，也就是下载npm包，在node_modules的包名，包名不允许重复，否则发布时会出错

version：版本号，每次更新包前升级版本号

main：项目入口文件的地址，指import我们的库时默认导入的文件

private：设置为false，默认是true表示是私有包

在scripts配置项中，新增一条打包命令lib，其中./src/components/index.js指定打包入口文件

{
  "name": "cyui",
  "version": "0.1.0",
  "main": "dist/cyui.umd.min.js",
  "private": false, 
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib ./src/components/index.js"
  },
...
}

6.执行npm打包命令

// 执行打包
npm run lib   

// 登录
npm login 

// 发布
npm publish

在发布时，会出现npm未注册登录等报错信息，执行npm login 设置名称、密码、邮箱账户等信息，如没有npm账号，可以去注册

 7.使用npm包 

安装

npm i cyui

全局导入   main.js

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import CyUI from 'cyui'
import "cyui/dist/cyui.css";

import App from './App.vue'

Vue.config.productionTip = false

Vue.use(ElementUI);
Vue.use(CyUI)

new Vue({
  render: h => h(App),
}).$mount('#app')

使用组件

<CyButton v-bind="CyButton_1" v-on="CyButton_1.event"></CyButton>

8.其他

如不想其他人在使用包时引入css，可以在vue.config.js中添加css内联配置，这样打包出来的会直接内联到脚本文件，不需要在引入csss（该方式参考其他文章，未验证）

module.exports = {
    ...
    css: { extract: false },
    ...
}

参考连接：

 如何用 Vue-CLI 3 打包 npm 包_weixin_33739523的博客-CSDN博客
Vue项目打包发布至npm - 简书

​