如何从零创建一个Vue组件并且部署到npm上？

How to create a component of Vue.js and publish to npm.com from scatch?

创建组件目录

mkdir -p ~/packages/hello-npm
cd ~/packages/hello-npm

初始化组件

npm init --scope=@cuimingda --yes

初始化git，根据需要提交代码

git init
git remote add origin [email protected]:cuimingda/hello-npm.git
git add .
git commit -m 'init npm'
git push -u origin master

创建示例组件

mkdir -p src
vi src/HelloNpm.vue

我们在示例组件src/HelloNpm.vue中包含最简单的template、script和style

<template>
  <h1 class="demo-title">{{ title }}</h1>
</template>

<script>
export default {
  data() {
    return {
      title: 'Hello npm!'
    }
  }
}
</script>

<style>
.demo-title {
  color: red;
}
</style>

这时候其实就可以测试这个页面了

vue serve --open src/HelloNpm.vue

创建vue组件的包裹脚本src/index.js，这里没有使用install的方式，只是简单封装

import HelloNpm from './HelloNpm.vue'
export default HelloNpm

接下来创建Webpack的配置文件webpack.config.js

const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {

    entry: path.resolve(__dirname + '/src/index.js'),

    output: {
        path: path.resolve(__dirname + '/dist'),
        filename: 'index.js',
        libraryTarget: 'commonjs2',
    },

    plugins: [
        new VueLoaderPlugin(),
    ],

    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader',
                ]
            },
        ]
    }
}

修改package.json，增加一条脚本，顺便修改入口文件地址

"main": "dist/index.js",
"scripts": {
  "build": "webpack --mode production"
},

这时候先安装一下Webpack需要的组件，注意只要安装成开发依赖就可以：

yarn add webpack webpack-cli vue-loader vue-template-compiler css-loader style-loader --dev

这时候就可以直接用Webpack编译组件了，编译完成后，会发现dist目录多出了一个index.js文件。

yarn build

这时候其实我们就可以在本地引用这个组件了，只是不使用组件名称，而是使用本地路径

yarn add ~/packages/hello-npm

调用方式跟真实的组件是一样的：

<template>
    <div class="container">
        <hello-npm></hello-npm>
    </div>
</template>

<script>
import HelloNpm from '@cuimingda/hello-npm'
export default {
    components: {
        "hello-npm": HelloNpm,
    }
}
</script>

本地测试如果没有问题，就可以准备发布了，先登陆，会提示输入用户名、密码和邮箱，如果没有npm账号，甚至可以用adduser在命令行注册一个

npm login

如果不确定是否登陆过，可以用whoami命令验证，登陆了也可以用logout注销登录

npm whoami
npm logout

登陆以后就可以发布了，记得在发布之前要build

yarn build
npm publish --access public

如果之后更新了组件，首先是在build以后在本地测试，然后提交git，然后更新npm版本，注意npm version patch会自动在第三个版本上加一，最后发布。

yarn build
git add .
git commit -m 'new patch'
npm version patch
npm publish
git push -u origin master