使用vuecli3发布npm包
参考链接 https://www.cnblogs.com/jasonwang2y60/p/11382349.html
1、创建项目（看我的文章 https://www.cnblogs.com/zoushuangyu/p/13198359.html）
vue init webpack mytest-common-npm //1.x 和 2.x 采用 init 命令创建项目
或者
vue create mytest-common-npm //3.x采用创建项目
2、项目目录
├── README.md
├── index.html
├── package.json
├── package-lock.json
├── packages
│ ├── component
│ │ ├── direct.vue
│ │ ├── menu.vue
│ └── index.js
├── src
│ ├── App.vue
│ └── main.js
└── vue.config.js
3、修改配置
在根目录下创建一个 vue-config.js 文件
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
const webpack=require('webpack');
module.exports = {
productionSourceMap: false,
publicPath: '/',
outputDir: 'dist',
pages: {
index: {
// page 的入口
entry: "src/main.js",
// 模板来源
template: 'index.html',
// 输出文件名
filename: "index.html"
}
},
// 扩展 webpack 配置，使 packages 加入编译
chainWebpack: config => {
config.module
.rule('js')
.include
.add('/packages/')
.end()
.use('babel')
.loader('babel-loader')
.tap(options => {
// 修改它的选项...
return options
})
}
}
4、开发组件
packages/compoent/menu.vue是组件代码
<template>
<div class="head" style="width: 100%;height: 50px;line-height: 50px;background: #42B983;color: #fff;text-align: left;">
头部
</div>
</template>
<script>
export default {
name:'topMenu',
data() {
return {
isCollapsed: false,
}
},
computed: {
},
methods: {
},
async mounted() {
}
}
</script>
5、整合导出组件
packages/index.js 文件，实现组件的全局注册
import topMenu from './component/menu'
// 存储组件列表
const components = [
topMenu,//头部
]
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {
// 遍历注册全局组件
components.map(component => Vue.component(component.name, component))
}
// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
// 导出的对象必须具有 install，才能被 Vue.use() 方法安装
install,
// 以下是具体的组件列表
topMenu
}
组件开发完毕
6、本地测试组件
src/main.js加入代码
import Vue from 'vue'
import App from './App.vue'
import pkgName from '../packages/index'
Vue.use(pkgName);
new Vue({
render: h => h(App)
}).$mount("#app")
7、src/App.vue加入代码
<template>
<div id="app" >
<topMenu></topMenu>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
8、运行测试
npm run serve
9、打包组件
主要需要四个参数：
1. target: 默认为构建应用，改为 lib 即可启用构建库模式
2. name: 输出文件名
3. dest: 输出目录，默认为 dist，这里我们改为 lib
4. entry: 入口文件路径，默认为 src/App.vue，这里改为 packages/index.js
5、在 package.json 里的 scripts 添加一个 lib 命令
"lib": "vue-cli-service build --target lib --name some-library --dest lib packages/index.js"
name: 包名，该名不能和已有的名称冲突；
version: 版本号，不能和历史版本号相同；
description: 简介；
main: 入口文件，应指向编译后的包文件；
keyword：关键字，以空格分割；
author：作者；
private：是否私有，需要修改为 false 才能发布到 npm；
license：开源协议。
{
"name": "my-project",
"version": "1.0.0",
"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 --name some-library --dest lib packages/index.js"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.4.0",
"@vue/cli-plugin-eslint": "~4.4.0",
"@vue/cli-service": "~4.4.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
10、发布
npm run lib //压缩完的文件在根目录下lib文件夹
11、创建 .npmignore 文件，设置忽略文件
.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*
12、发布到npm
如果以前改过 npm 的镜像地址，比如使用了淘宝镜像，就先改回来
npm config set registry http://registry.npmjs.org
npm adduser //命令创建一个账户
npm login //登录
npm publish //发布
