我开始与 vue 一起工作了很多并开始在我工作的公司的所有项目中使用它。有了这个，我最终创建了一些 components , 一般 autocomplete ，我知道有很多，我已经使用了一些，但没有一个能满足我的所有需求。但是，每当我开始处理一个新项目并使用相同的组件时，我要么重新创建它，要么复制并粘贴它。

所以我开始怀疑如何创建我的组件，每当我使用它时上传到 npmjs，只需给一个 npm install -save ... ，并且也能够为社区做出一些贡献。

最佳答案

更新

随着 vue-loader 15.x 的发布，这个答案将不再有效。请改用这个 https://medium.freecodecamp.org/how-to-create-a-vue-js-app-using-single-file-components-without-the-cli-7e73e5b8244f

这是您可以从头开始创建/发布 Vuejs 库/组件的一种方法。

由于我将写下每个步骤和命令，请确保遵循整个指南，您将能够在 NPM 上创建和发布您自己的 Vuejs 组件。

发布后，像大多数库一样，您可以使用 ex 安装它:

npm install --save your-component 

import something from 'your-component'

npm init

(Note: I changed the description and version from 1.0.0 to 0.1.0 here is the result.)

{
  "name": "vuejs-hello-app",
  "version": "0.1.0",
  "description": "vuejs library demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

npm install --save vue

npm install --save-dev babel-core
npm install --save-dev babel-loader
npm install --save-dev babel-preset-env
npm install --save-dev cross-env
npm install --save-dev css-loader
npm install --save-dev file-loader
npm install --save-dev node-sass
npm install --save-dev sass-loader
npm install --save-dev vue-loader
npm install --save-dev vue-template-compiler
npm install --save-dev webpack
npm install --save-dev webpack-dev-server

{
  "name": "vuejs-hello-app",
  "version": "0.1.0",
  "description": "vuejs library demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack -p"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "cross-env": "^5.1.1",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.5",
    "node-sass": "^4.7.2",
    "sass-loader": "^6.0.6",
    "vue-loader": "^13.5.0",
    "vue-template-compiler": "^2.5.9",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7"
  },
  "dependencies": {
    "vue": "^2.5.9"
  }
}

(note: I have added "build": "webpack -p" to build our lib with webpack)

dist
node_modules
src
  main.js
  components
    VuejsHelloApp.vue
.babelrc
.eslintignore
.gitignore
.npmignore
.travis.yml
CONTRIBUTING
LICENSE
package.json
README.md
webpack.config.js

{
  "presets": [
    [
      "env",
      {
        "modules": false
      }
    ]
  ]
}

build/*.js 

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',

  module: {
    rules: [
      // use babel-loader for js files
      { test: /\.js$/, use: 'babel-loader' },
      // use vue-loader for .vue files
      { test: /\.vue$/, use: 'vue-loader' }
    ]
  },
  // default for pretty much every project
  context: __dirname,
  // specify your entry/main file
  output: {
    // specify your output directory...
    path: path.resolve(__dirname, './dist'),
    // and filename
    filename: 'vuejs-hello-app.js'
  }
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  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
    })
  ])
}

<template>
  <div>
    <button @mouseover='move($event)'> I'm alive </button>
  </div>
</template>

<script>
export default {
  data () {
   return {}
  },

  methods: {
    move (event) {
        let pos = event.target.style.float; 
      if(pos === 'left'){
        event.target.style.float = 'right'
      }else{
        event.target.style.float = 'left'
      }
    }
  }
}

</script>

<style scoped>

</style>

import VuejsHelloApp from './components/VuejsHelloApp.vue'
export default VuejsHelloApp

npm run build
git add .
git commit -m "initial commit"
git push -u origin master
npm login 
npm publish

npm install --save vuejs-hello-app

<template>
  <div>
    <VuejsHelloApp> </VuejsHelloApp>
  </div>
</template>

<script>
import VuejsHelloApp from 'vuejs-hello-app'
export default {
  name: 'HelloWorld',
  components: { VuejsHelloApp }
}
</script>

关于javascript - 如何在 NPM 上创建和发布 Vuejs 组件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47754244/