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-wminimport npmMyWmin from 'npm-my-wmin'components: {    first: npmMyWmin.first,    second: npmMyWmin.second,},

npm 私有库使用

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