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

使现代化

随着vue loader 15的发布.这个答案将不再有效.请用这个代替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 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构建我们的库)

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

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

A main.js和VuejsHelloApp.vue表示:

我的 struct 如下:

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版本代码的地方

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

这是你的库的根目录.

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

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

.eslintignore这是你告诉ESLINT忽略绒线的地方，所以把这个放进go :

build/*.js 

.gitignore

.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获取./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，这可能有助于更好地理解代码