使用 webpack-simple 模板
2、新建一个 vue 项目
vue init webpack-simple
3、然后再 npm install 初始化一下依赖
4、在新建的项目的src目录下新建一个目录(components)用来存放所有自定义组件源码
src/components/button.vue
5、组件封装好后在组件目录(components)下新建一个index.js文件,为组件库的入口文件
src/components/index.js
6、导入封装的组件
<template>
<h3>BUTTON</h3>
<h4>{{value}}</h4>
</template>
<script>
export default {
name: "ychbtn",
data() {
return {
value: ''
}
},
// 通过refs访问到这个组件,就可以调用他的方法
methods: {
clearValue () {
this.value = ''
},
setValue (value) {
this.value = value
}
}
};
</script>
7、修改package.json文件
{
"name": "test001", // 发布的模块名称,发布线上后,可以通过npm install test001来引用该模块
"description": "A Vue.js project", // 组件库描述
"version": "1.0.0", // 版本号
"author": "yangchunhe <yangchunhe@creality.com>", // 作者
"license": "MIT", // 代码授权许可
"main": "dist/TestBtn.js", // 打包后的入口文件,若不配置,则在其他项目中就无法使用import xx from '包名'来引入组件,只能以包名作为起点来指定相对路径
"private": false, // 公开项目,因为组件包是公用的,所以private要改为false
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"vue": "^2.5.11"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
"files": [ // 指定打包后发布到npm的文件,没指定则不传,package.json是默认上传的
"dist",
"src/components"
],
"keywords": [ // 关键词,可以通过npm搜索你填写的关键词找到你的模块
"ychbtn"
],
"repository": { // 指定代码所在的仓库地址
"type": "git",
"url": "https://github.com/xx/xx-btn.git"
},
}
8.修改webpack.config.js文件
const path = require('path')
const webpack = require('webpack')
module.exports = {
entry: './src/components/index.js', // 文件打包的入口
output: { // 修改输出文件到 dist 下
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'TestBtn.js', // 生成的文件名
library: 'TestBtn', // 指定的就是你使用require时的模块名
libraryTarget: "umd" // (必填!) 会生成不同umd的代码,可以只是commonjs标准的,也可以是指amd标准的,也可以只是通过script标签引入的
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json']
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
9.编译打包,生成的文件在dist目录下
npm run build
10.测试插件
npm pack
npm pack 之后,会在当前目录下生成一个 test001-1.0.0.tgz 的文件。
打开一个vue项目,将压缩文件放到项目某个目录下,执行命令
npm install d\test001-1.0.0.tgz
路径是指压缩包所在的绝对路径,文件名必须是压缩包的全名
11.安装好插件后,在项目的入口文件main.js里引入使用
import TestBtn from "test001"
Vue.use(TestBtn)
12.在其他组件中使用
<template>
<div>
<h3>hhhh</h3>
<!-- 这里的 ychbtn,指的是组件的名字(name: "ychbtn") -->
<ychbtn />
</div>
</template>
13.发布到npm
1、先到NPM官网注册账号,如果已有账号则跳过此步骤
2、在组件库项目的根目录下执行
npm login
3、登陆账号,输入你的账号和密码,并验证邮箱地址,登陆成功后则可以发布到NPM网站了
4、发布到npm官网
npm publish --access public
包名name在npm上已经存在了,换一个就好
将package.json中的name替换一个稍微自定义的名字即可。(test001替换为了test001-ych)
上传成功,接下来就可以在项目中正常下包使用 (npm intsall test001-ych)
箱地址,登陆成功后则可以发布到NPM网站了
4、发布到npm官网
npm publish --access public
包名name在npm上已经存在了,换一个就好
将package.json中的name替换一个稍微自定义的名字即可。(test001替换为了test001-ych)
[外链图片转存中…(img-KDR4rCpd-1616827757393)]
上传成功,接下来就可以在项目中正常下包使用 (npm intsall test001-ych)