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

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More