npm 发布vue组件及使用

1. 使用 webpack-simple构建一个 vue 项目 (简介方便)
2. vue init webpack-simple XXXX
3. 按照提示依次输入信息

 	? Project name 项目名称
	? Project description 描述
	? Author 作者名称（和npm仓库用户名称一致）
	? License MIT
	? Use sass? Yes

4. 初始化项目 npm install

5. 在src 目录下创建存放组件的文件夹 components

6. 在components下创建存放第一个组件目录 first (自定义) ，新建 index.vue 和 index.js 文件

   index.vue 页面 写了简单的案例

<template>
  <div :style="{ color: fontColor }">我是第一个测试组件</div>
</template>
<script>
export default {
  name: "first",
  props: {
    // 父级传过来的颜色样式
    fontColor: {
      type: String,
      default: "#666"
    }
  }
};
</script>

index.js 页面

	import Demo from "./index"
	Demo.install = function(Vue){
	    Vue.component(Demo.name, Demo)
	}

7. 再创建第二个组件 second 与 first 创建雷同
8. 在与App.vue同级目录下新建index.js;引入所有组件集中管理然后全部导出(多组件和单组件一样)

	import first from "./components/first/index"
	import second from "./components/second/index"
	const components = [first,second]
	const install = function (Vue, opts={}) {
	  components.forEach(component => {
	    Vue.component(component.name, component);
	  })
	}
	
	/* 支持使用标签的方式引入 */
	if (typeof window !== 'undefined' && window.Vue) {
	  install.use(window.Vue);
	}
	
	export default {
	    // 全部导出
	    install,
	    // 按需导出
	    ...components
	}

9. 修改配置文件，webpack.config.js

	entry: process.env.NODE_ENV=='development'?'./src/main.js':'./src/index.js',
  	output: {
	     // 修改打包出口，在最外级目录打包出一个 index.js 文件，我们 import 默认会指向这个文件
	    path: path.resolve(__dirname, './dist'),
	    publicPath: '/dist/',
	    filename: "mpn-my-wmin.js",
	    library: "mpn-my-wmin", // 指定的就是你使用require时的模块名
	    libraryTarget: 'umd', // libraryTarget会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的
	    umdNamedDefine: true // // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
 	},

10. 修改 package.json 文件

  "private": false,
  "main": "dist/light-com.js",
  "files": ["dist/*","src/*","*.json", "*.js"],

11. 打包项目： npm run build
12. 提交发布
    登录npm账号，输入用户名、密码、邮箱

	npm login

执行发布

	npm publish

13. 项目使用组件

npm i npm-my-wmin

import npmMyWmin from 'npm-my-wmin'
components: {
    first: npmMyWmin.first,
    second: npmMyWmin.second,
},

npm 私有库使用

https://www.jianshu.com/p/77fbc6b6f87a