被迫学习的原因

嗯，由于生活所迫，我在一家很奇怪的部门工作，我们的项目好像很多，但是其实。。。。。 
有一天，大佬奇思妙想，觉得我们的这些小项目也应该被做成公共的，于是，便有了事件的起因。
所以，大佬让我这个小菜鸡去学习把造的轮子发布到npm里面，方便后面的项目使用。

于是，我开始了埋头苦干。
复制代码

过程与结果

第一步，拿到需求就是一顿搜索，嗯，搜了一堆，基本都看了一下，然后整理，最后结束，成功！

我的项目整体是这样的结构：
复制代码

我的项目使用 “vue init webpack-simple” 命令初始化一个vue项目后进行修改的
（主要修改的文件在图中有标注）
其中，我的公共组件放在了components中，这里模仿了elementui的文件结构，文件名就是我的组件名字
我的例子组件内容是：
1. ExampleComponent：
复制代码

<template>
  <div>
    例子组件
    {{ msg }}
    <ul>
      <li
        v-for="(item, index) in propArr"
        :key="index"
        @click="clickEvent(item)"
      >
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'ExampleComponent',  // 组件名字
  props: {
    msg: {
      type: String,
      default: 'Hello shishi' // 默认值
    },
    propArr: {
      type: Array,
      required: true // 必传字段
    }
  },
  data () {
    return {

    }
  },
  created () {

  },
  mounted () {

  },
  methods: {
    clickEvent (val) { // 暴漏点击事件
      this.$emit('clickEvent', val)
    }
  }
}
</script>

<style scoped>
</style>
复制代码

2. exampleComponents的index.js文件的内容是：
复制代码

import ExampleComponent from './src/ExampleComponent.vue'
import _Vue from 'vue'
/* istanbul ignore next */
ExampleComponent.install = function(Vue) {
  if (!Vue) {
    window.Vue = Vue = _Vue
    }
  Vue.component(ExampleComponent.name, ExampleComponent)
}

export default ExampleComponent
复制代码

3. 在最外层的index.js的配置：
复制代码

import ExampleComponent from './src/components/exampleComponent/index.js'
import First from './src/components/first/index.js'

const components = [ First, ExampleComponent]
const install = (Vue, opts = {}) => {
  components.forEach(component => {
    console.log(component)
    Vue.component(component.name, component)
  })
}
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue)
}
export default {
  install,
  First,
  ExampleComponent
}
复制代码

4.webpack.config.js (webpack主要修改了 output ， 的内容)
复制代码

var path = require('path')
var webpack = require('webpack')
const NODE_ENV = process.env.NODE_ENV

module.exports = {
  entry: NODE_ENV == 'development' ? './src/main.js' : './index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'sjy-tool-components.js',
    library: 'sjy-tool-components', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd',// 指定输出格式
    umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ],
      },
      {
        test: /\.sass$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader?indentedSyntax'
        ],
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            js: 'babel-loader',
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': [
              'vue-style-loader',
              'css-loader',
              'sass-loader'
            ],
            'sass': [
              'vue-style-loader',
              'css-loader',
              'sass-loader?indentedSyntax'
            ]
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  }
}

if (process.env.NODE_ENV === 'production') {
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}else {
  module.exports.devtool = '#eval-source-map'
}

复制代码

5.package.json(主要修改如图，private改为false，main的路径变化)
复制代码

6.index.html(修改引用路径)
复制代码

   然后就结束咯，可以npm发布咯，当然首先要有一个npm的账号呀，https://www.npmjs.com/ 官网注册一个咯

   7.发布
   npm adduser 添加用户，
   npm login 登录
   npm publish 发布
   
   
   
   npm unpublish XXXX@1.0 --force 删除已发布的
   
   8.使用
   正常流程  npm i sjy-tool-components
   
   **新的项目里在main里面引用**
   
复制代码

import SjyToolComponent from 'sjy-tool-components'
Vue.use(SjyToolComponents)
复制代码

再组件里直接引用即可咯
复制代码

   至此，我的梳理结束咯，我的demo的地址附上https://github.com/shijiayu0818/sjy-tool-components.git
   
   哈哈，第一次在掘金不是摸鱼，而是一本正经的做一下自己的收获。
复制代码