创建组件目录
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)