详解如何制作并发布一个vue的组件的npm包

<template>
 <div class=\"index\">
 
  <div class=\"demo1\">
   <Msg :data=\"myData\"></Msg>
  </div>
 
 </div>
</template>
< >
 import Msg from \'npm-study-hamupp\';
 export default {
  components: {
   Msg
  },
  data(){
   return {
    myData: {
     name: \'天天\',
     country: \'china\'
    }
   }
  }
 }
</ >

npm init

{
	\"name\": \"npm-study-hamupp\",
	\"version\": \"1.0.3\",
	\"de ion\": \"\",
	\"main\": \"dist/helloMsg.min.js\",
	\" s\": {
		\"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",
		\"start\": \"webpack-dev-server --hot --inline\",
		\"build\": \"webpack --display-error-details --config webpack.config.js\"
	},
	\"repository\": {
		\"type\": \"git\",
		\"url\": \"git+https://github.com/hamuPP/npmStudy.git\"
	},
	\"author\": \"\",
	\"license\": \"ISC\",
	\"bugs\": {
		\"url\": \"https://github.com/hamuPP/npmStudy/issues\"
	},
	\"homepage\": \"https://github.com/hamuPP/npmStudy#readme\",
	\"devDependencies\": {
		\"babel-core\": \"^6.26.0\",
		\"babel-loader\": \"^7.1.2\",
		\"babel-plugin-transform- -rest-spread\": \"^6.26.0\",
		\"babel-plugin-transform-runtime\": \"^6.23.0\",
		\"babel-polyfill\": \"^6.26.0\",
		\"babel-preset-es2015\": \"^6.24.1\",
		\"css-loader\": \"^0.28.7\",
		\"es6-promise\": \"^4.1.1\",
		\"less\": \"^2.7.3\",
		\"less-loader\": \"^4.0.5\",
		\"style-loader\": \"^0.19.0\",
		\"url-loader\": \"^0.6.2\",
		\"vue\": \"^2.5.9\",
		\"vue-hot-reload-api\": \"^2.2.4\",
		\"vue-html-loader\": \"^1.2.4\",
		\"vue-loader\": \"^13.5.0\",
		\"vue-router\": \"^3.0.1\",
		\"vue-style-loader\": \"^3.0.3\",
		\"vue-template-compiler\": \"^2.5.9\",
		\"vuex\": \"^3.0.1\",
		\"webpack\": \"^3.9.1\",
		\"webpack-dev-server\": \"^2.9.5\"
	}
}

<style scoped lang=\"less\">
 @import \'styles/common.less\';
</style>
<template>
 <div class=\"msg-wrapper\">
  <span>hello!</span>
  <span class=\"account\">{{data.name}}</span>
 </div>
</template>
< >
 export default {
  name:\'Msg\',
  data () {
   return {}
  },
  props:{
   data:{
    type: 
   }
  },
  methods: {
 
  },
  created(){
   let that = this;
  }
 }
</ >

import Msg from \'./app.vue\'
export default Msg;

const path = require(\"path\");
const webpack = require(\"webpack\");
const uglify = require(\"uglifyjs-webpack-plugin\");
 
module.exports = {
 devtool: \'source-map\',
 entry: \"./src/index.js\",//入口文件，就是上步骤的src目录下的index.js文件，
 output: {
  path: path.resolve(__dirname, \'./dist\'),//输出路径，就是上步骤中新建的dist目录，
  publicPath: \'/dist/\',
  filename: \'helloMsg.min.js\',
  libraryTarget: \'umd\',
  umdNamedDefine: true
 },
 module: {
  rules: [{
    test: /\\.vue$/,
    loader: \'vue-loader\'
   },
   {
    test: /\\.less$/,
    use: [
     { loader: \"style-loader\" },
     { loader: \"css-loader\" },
     { loader: \"less-loader\" }
    ]
   },
   {
    test: /\\.js$/,
    exclude: /node_modules|vue\\/dist|vue-router\\/|vue-loader\\/|vue-hot-reload-api\\//,
    loader: \'babel-loader\'
   },
   {
    test: /\\.(png|jpg|gif|ttf|svg|woff|eot)$/,
    loader: \'url-loader\',
    query: {
     limit: 30000,
     name: \'[name].[ext]?[hash]\'
    }
   }
  ]
 },
 plugins: [
  new webpack.DefinePlugin({
   \"process.env\": {
    NODE_ENV: JSON.stringify(\"production\")
   }
  })
 ]
};

{
	...
	\"main\": \"dist/helloMsg.min.js\",

.*
*.md
*.yml
build/
node_modules/
src/
test/
gulpfile.js

Logged in as 你的名字 on https://registry.npmjs.org/.