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

问题描述 投票：7回答：1

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

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

javascript npm vue.js dependencies vuejs2
1个回答
31
投票

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库/组件的一种方法。

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

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

npm install --save your-component

然后使用导入应用程序内的组件

import something from 'your-component'

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

npm init

只需按Enter键直到交互式问题结束，然后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来安装dev依赖项

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

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构建我们的lib）

现在，由于我们的代码需要构建和转换，我们需要一个文件夹来存储构建版本。继续在我们的根文件夹中创建一个文件夹并调用它：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忽略linting所以把它放在里面的地方：

build/*.js

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

.npmignore与NPM的.gitignore相同

.travis.yml如果你需要来自travis的CI检查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

Importing and using the library.

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

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，它可能有助于更好地理解代码

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.