创建组件目录
mkdir -p ~/packages/hello-npm
cd ~/packages/hello-npm
初始化组件
npm init --scope=@cuimingda --yes
初始化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
创建示例组件
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
Top comments (0)