DEV Community

Cui Mingda
Cui Mingda

Posted on

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

创建组件目录

mkdir -p ~/packages/hello-npm
cd ~/packages/hello-npm
Enter fullscreen mode Exit fullscreen mode

初始化组件

npm init --scope=@cuimingda --yes
Enter fullscreen mode Exit fullscreen mode

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

git init
git remote add origin git@github.com:cuimingda/hello-npm.git
git add .
git commit -m 'init npm'
git push -u origin master
Enter fullscreen mode Exit fullscreen mode

创建示例组件

mkdir -p src
vi src/HelloNpm.vue
Enter fullscreen mode Exit fullscreen mode

我们在示例组件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>
Enter fullscreen mode Exit fullscreen mode

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

vue serve --open src/HelloNpm.vue
Enter fullscreen mode Exit fullscreen mode

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

import HelloNpm from './HelloNpm.vue'
export default HelloNpm
Enter fullscreen mode Exit fullscreen mode

接下来创建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',
                ]
            },
        ]
    }
}
Enter fullscreen mode Exit fullscreen mode

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

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

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

yarn add webpack webpack-cli vue-loader vue-template-compiler css-loader style-loader --dev
Enter fullscreen mode Exit fullscreen mode

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

yarn build
Enter fullscreen mode Exit fullscreen mode

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

yarn add ~/packages/hello-npm
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

npm login
Enter fullscreen mode Exit fullscreen mode

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

npm whoami
npm logout
Enter fullscreen mode Exit fullscreen mode

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

yarn build
npm publish --access public
Enter fullscreen mode Exit fullscreen mode

如果之后更新了组件,首先是在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
Enter fullscreen mode Exit fullscreen mode

Top comments (0)