如何在 NPM 上创建和发布 Vuejs 组件

Question

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

所以我开始怀疑如何创建我的组件，上传到 npmjs 以备不时之需，只需提供npm install -save ...，还可以为社区做出一些贡献。

Answer 1

更新

随着 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'

---

要开始创建我们的第一个组件，首先创建一个名为 vuejs-hello-app（或任何其他名称）的文件夹，然后在其中运行：

npm init

在交互式问题结束之前按回车键，然后 npm 将在该文件夹中生成一个名为 package.json 的文件，其中包含以下代码。

（注意：我将描述和版本从1.0.0 更改为0.1.0 这是结果。）

{
  "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"
}

之后，我们需要为我们的库安装依赖项。

这些依赖分为两种：dependency和devDependency

dependency:
是我们自己的组件运行的外部库。当有人安装您的组件时，npm 将确保此依赖项存在或首先安装。由于我们正在为 vue 创建组件，因此我们需要确保需要 vue。所以，安装它使用：

npm install --save vue

devDependency:
是一堆我们只需要用于开发目的的库。这些库将帮助我们构建和/或转译。

我们使用上面的方法安装开发依赖，将后缀-dev添加到--save

现在，让我们安装组件所需的最低开发依赖项：

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

此时将安装库，package.json 将更新为如下所示。

{
  "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"
  }
}

（注意：我已添加"build": "webpack -p" 以使用 webpack 构建我们的库）

现在，由于我们的代码需要构建和转译，我们需要一个文件夹来存储构建版本。继续在我们的根文件夹中创建一个文件夹并将其命名为：dist 并在同一位置为 webpack 配置一个配置文件并将其命名为 webpack.config.js

到目前为止，我们创建的所有文件都用于配置和填充。对于人们将要使用的实际应用程序，我们需要在 src/ 目录中创建至少两个文件。

main.js 和 VuejsHelloApp.vue 将它们设置为： ./src/main.js 和 ./src/components/VuejsHelloApp.vue

我的结构是这样的：

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

我将浏览列出的文件并描述每个文件的作用，以防有人好奇：

/dist 用于存储构建（转译）、缩小、非 ES6 版本的代码

node_modules我想我们已经知道了，让我们忽略它

src/这是你库的根目录。

.babelrc 是保存 babel 选项的地方，所以添加它以禁用模块上的预设

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

.eslintignore 这是你告诉 ESLINT 忽略掉毛的地方，所以把它放在里面：

build/*.js 

.gitignore 添加要忽略的文件（来自 git）

.npmignore 与 NPM 的 .gitignore 相同

.travis.yml 如果你需要 CI 检查来自 travis 的 examples 并配置它

CONTRIBUTING 不需要

LICENSE 不需要

package.json暂时忽略

README.md 不需要

webpack.config.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
    })
  ])
}

注意这里的重要指令是entry 和output。如果您想完全自定义您的应用程序，可以查看 webpack 文档以了解更多信息。

但基本上，我们告诉 webpack 获取 ./src/main.js（我们的应用程序）并将其输出为 ./dist/vuejs-hello-app.js

现在，我们几乎完成了除实际应用之外的所有设置。

转到/src/components/VuejsHelloApp.vue 并转储这个简单的应用程序，当您将鼠标悬停在它上面时，它会向右或向左移动一个按钮

<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>

并非最不重要的一点是，转到./src/main.js 并导出您的应用，如下所示：

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

现在转到您的 package.json 文件，将 "main: "index.js", 替换为 "main": "src/main.js",

之后，只需运行以下命令即可构建和发布您的应用：

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

并像这样在 vue 中使用它：

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

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

---

我在写答案时制作了这个应用程序https://github.com/samayo/vuejs-hello-app，它可能有助于更好地理解代码