如何在NPM上创建和发布Vuejs组件 [英] How to create and publish a Vuejs component on NPM

问题描述

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

I started working a lot with vue and started to use it in all the projects in the company where I work. And with that, I ended up creating some components, in general autocomplete, I know that there are many, I have already used some, but none have supplied all my needs. However, whenever I go to work on a new project and use the same component, either I recreates it, or I copy and paste it.

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

So I came to doubt How to create my component, upload to npmjs for whenever I use it, just give a npm install -save ..., and also be able to contribute a bit with the community.

推荐答案

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

Here is one way you can create/publish a Vuejs library/component from scratch.

当我要记下每一步和命令时，请务必遵循整个指南，您将能够在NPM上创建和发布您自己的Vuejs组件。

As I am going to write down every step and command, make sure to follow the entire guide and you will be able to create and publish your own Vuejs component on NPM.

发布之后，就像大多数库一样，你可以使用ex安装它：

After you publish it, like most libraries you can install it using ex:

npm install --save your-component 

然后使用

import something from 'your-component'

---

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

---

To start creating our first component, first create a folder called vuejs-hello-app (or any other name) and inside it, run:

npm init

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

Just hit enter until the interactive question ends and then npm will generate a file named package.json in that folder containing the following code.

（注意：我将描述和版本从 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"
}

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

After this, we'll need to install the dependencies for our library.

这些依赖项分为两种类型：依赖和 devDependency

These dependencies are divided into two types: dependency and devDependency

依赖：

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

dependency:
is the external library or libraries that our own component runs on. When someone installs your component, npm will make sure this dependency exists or gets installed first. Since we are creating a component for vue, we need to make sure vue is required. So, install it using:

npm install --save vue

devDependency ：

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

devDependency:
is a bunch of libraries that we need only for development purposes. These libraries will help has build and/or transpile.

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

We install dev dependencies using the method above but adding the the suffix -dev to --save

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

Now, let us install the minimum dev dependencies we need for our component:

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 将更新为如下所示。

At this point the libraries will be installed and the package.json will be updated to look like following.

{
  "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来构建我们的lib with webpack）

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

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

Now, since our code needs to be build and transpiled, we need a folder to store the build version. Go ahead and create a folder inside our root folder and call it: dist and in the same place a configuration file for webpack and name it webpack.config.js

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

All of the files we have sofar created are for configuring and stuff. For the actual app that people are going to use, we need to create at least two files inside our src/ directory.

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

我会只需浏览列出的文件，并描述每个文件所做的事情，以防万一有人好奇：

I will just go through the files listed and describe what each file does in-case anyone is curious:

/ dist 是其中构建（转换），缩小，非ES6版本的代码将是商店

/dist is where a build (transpiled), minified, non-ES6 version of your code will be stores

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

node_modules I think we know this already, let's ignore it

src / 这是你图书馆的根目录。

src/ this is root dir of your library.

.babelrc 是保留babel选项的位置，因此添加此项以禁用模块上的预设

.babelrc is where your babel options are kept, so add this to disable presets on modules

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

.eslintignore 这是你告诉ESLINT忽略linting所以把它放在里面的地方： / p>

.eslintignore This is where you tell ESLINT to ignore linting so put this inside:

build/*.js 

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

.gitignore add files you want to ignore (from git)

.npmignore 与NPM的.gitignore相同

.npmignore same as .gitignore for NPM

.travis.yml 如果您需要CI检查来自travis的示例并配置它

.travis.yml if you need CI check examples from travis and configure it

贡献不需要

LICENSE 不需要

package.json 暂时忽略

README.md 不需要

webpack.config.js 这是一个重要文件，可让您创建代码的构建，浏览器兼容版本。

webpack.config.js This is the important file that let's you create a build, browser compatible version of your code.

所以，根据我们的应用程序，这里有一个最小的例子：

So, according to our app, here is a minimal example of what it should look like:

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
    })
  ])
}

请注意，这里的重要指令是条目和输出。如果要完全自定义应用，可以查看webpack文档以了解更多信息。

Note that the important directives here are entry and output. You can check webpack docs to learn more if you want to fully customize your app.

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

But basically, we're telling webpack to get the ./src/main.js (our app) and output it as ./dist/vuejs-hello-app.js

现在，我们差不多完成了设置除了实际的应用程序之外的一切

Now, we are almost finished setting up everything except the actual app.

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

Go to /src/components/VuejsHelloApp.vue and dump this simple app, which will move a button right or left when you hover on it

<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 并将您的应用导出为：

And not but not least, got to ./src/main.js and export your app like:

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

现在转到 package.json 文件替换main：index.js，与main：src / main.js，

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

After this, simply run these commands to build and publish your app:

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

---

导入和使用库。

如果一切顺利，那么只需安装你的应用程序：

---

Importing and using the library.

If everything went smoothly, then simply install your app like this:

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 在写答案时，可能会有所帮助理解代码

---

I made this app https://github.com/samayo/vuejs-hello-app while writing the answer, it might help to better understand the code

这篇关于如何在NPM上创建和发布Vuejs组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！