[JavaScript知识库]Vue组件封装发布Npm包

#Vue组件封装发布Npm包

一、

1、通过Vue脚手架创建简易项目

vue init webpack-simple my-project

2、安装依赖并运行

cd my-project

npm install

npm run dev

二、在src文件下创建一个文件存放写好的组件-我的是countDowns

三、在main.js 入口文件的同级目录下，添加index.js 打包的入口文件-下面是index.js代码

// 打包的入口文件 也是引用时的标签名countDowns  <count-downs></count-downs>
import countDowns from './countDowns/index.vue'
const components = [
	countDowns
]
const install = function (Vue, opts = {}) {
	components.map(component => {
		Vue.component(component.name, component)
 ?	})
}

/* 支持使用标签的方式引入 */
if (typeof window !== 'undefined' && window.Vue) {
 ?	install(window.Vue)
}
export default {install, countDowns}

四、可以尝试在入口文件main.js 中引用，这样在项目中任何地方可以直接使用组件

import blod from ‘./index.js’

Vue.use(blod)

比如我直接在app.vue中直接引用 ，如可以使用，项目就搭建完成了，接下来修改打包配置。

五、webpack.config.js设置，设置入口和输出路径

// 设置入口和输出路径       当前模式
entry: process.env.NODE_ENV === 'production'? './src/index.js' : './src/main.js',
output: {
	path: path.resolve(__dirname, './dist'),
	publicPath: '/dist/',
	filename: 'b-lod.js',
	library: 'b-lod', // 指定的就是你使用require时的模块名
	libraryTarget: 'umd', // libraryTarget会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的
	umdNamedDefine: true, // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
}

六、package.json设置 注意！！！！！

设置private属性为false，默认为true，npm 发布的时候如果为true会失败。
添加node_module 的入口文件设置，“main”: “dist/b-lod.js”

七、打包项目

修改.gitignore文件下的 dist/注释掉

然后打包项目

npm run build

八、发布到Npm,需注册Npm账号（可能需要科学上网）

九、终端登录Npm

npm login

输入账号、密码、邮箱

十、发布项目

npm publish

后续如果需要继续修改内容，记得修改package.json中的版本号再发布

十一、使用项目

npm i blod

并引入

import blod from ‘./index.js’
Vue.use(blod)

json中的修改版本号再发布

通过 < count-downs></ count-downs>使用组件

<count-downs></count-downs>