如何在 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.

推荐答案

update

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

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

update

With the release of vue-loader 15.x this answer will no longer work. Please use this instead https://medium.freecodecamp.org/how-to-create-a-vue-js-app-using-single-file-components-without-the-cli-7e73e5b8244f

因为我将写下每一个步骤和命令，所以请务必遵循整个指南，您将能够在 NPM 上创建和发布您自己的 Vuejs 组件.

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

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

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.

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

然后使用

And then import the component inside your app using

<小时>

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

import something from 'your-component'

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

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

npm init

(注意:我将描述和版本从 1.0.0 更改为 0.1.0 这里是结果.)

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.

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

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

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

These dependencies are divided into two types: dependency and devDependency

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:  

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

npm install --save vue

我们通过在--save

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

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

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

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

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

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

<块引用>

(注意:我添加了 "build": "webpack -p" 来使用 webpack 构建我们的库)

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

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

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

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

A main.js 和 VuejsHelloApp.vue 把它们写成:./src/main.js 和 ./src/components/VuejsHelloApp.vue

Now, since our code needs to be built 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

我的结构如下:

A main.js and VuejsHelloApp.vue put them as: 
./src/main.js and ./src/components/VuejsHelloApp.vue

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

I have mine structured like this:

/dist 是你的代码的构建(转译)、缩小的、非 ES6 版本的存储位置

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

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

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

src/ 这是你的库的根目录.

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

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

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

src/ this is root dir of your library.

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

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

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

.gitignore添加要忽略的文件(来自 git)

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

.npmignore 与 NPM 的 .gitignore 相同

build/*.js

.travis.yml 如果需要 CI 检查 示例 来自 travis 并对其进行配置

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

CONTRIBUTING 不需要

LICENSE 不需要

package.json 暂时忽略

README.md 不需要

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

package.json ignore for now

因此，根据我们的应用程序，以下是它应该是什么样子的最小示例:

README.md not required

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

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

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

但基本上，我们告诉 webpack 获取 ./src/main.js(我们的应用程序)并将其输出为 ./dist/vuejs-hello-app.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 }) ]) }

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

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.

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

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. 

<脚本>导出默认{数据 () {返回 {}},方法: {移动(事件){让 pos = event.target.style.float;如果(位置 === '左'){event.target.style.float = '正确'}别的{event.target.style.float = '左'}}}}<样式范围></风格>

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

同样重要的是，到 ./src/main.js 并导出您的应用程序，如:

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

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

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

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

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

Now go to your package.json file replace the "main: "index.js", with "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: 

在 vue 中像这样使用它:

npm install --save vuejs-hello-app

And use it in vue like this: 

<脚本>从vuejs-hello-app"导入 VuejsHelloApp导出默认{name: 'HelloWorld',组件:{ VuejsHelloApp }}

<小时>

我制作了这个应用程序 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屋！