Vue组件-从零开始到发布npm
程序员文章站
2022-07-03 17:02:49
一、环境准备基础的vue环境不说了，挂图但是要安装一个@vue/cli-init(不装的话下面创建项目会失败)npm install -g @vue/cli-init二、初始化项目对于写组件发布来说不需要太多的配置，采用webpack-simple初始化项目vue init webpack-simple test-vue-npm项目目录：三、修改内容JButton.vue//JButton.vue
一、环境准备
基础的vue环境不说了，挂图
但是要安装一个@vue/cli-init(不装的话下面创建项目会失败)
npm install -g @vue/cli-init
二、初始化项目
对于写组件发布来说不需要太多的配置，采用webpack-simple初始化项目
vue init webpack-simple test-vue-npm
项目目录：
三、修改内容
- JButton.vue
//JButton.vue
<template>
<div class="btn">{{ text }}</div>
</template>
<script>
export default {
name: "JButton",
props: ["text"],
};
</script>
<style>
.btn {
border: 1px solid green;
}
</style>
- index.js
// 导入封装的组件
import JButton from "./components/JButton.vue";
const components = {
// 通过install来安装组件
install(Vue) {
Vue.component("j-button", JButton);
},
};
// 注意这里的判断，很重要
if (typeof window !== "undefined" && window.Vue) {
window.Vue.use(components);
}
// 导出组件库
export default components;
四、修改配置
- package.json
{
"name": "j-button",//发布的组件名称
"description": "A Vue.js project",
"version": "1.0.0",//发布的组件版本
"author": "",//作者
"license": "MIT",
"private": false,//是否私有的
"main": "dist/j-button.js",//组件引用的文件
"keywords": [//npm 中被搜索的关键字
"test",
"vue-npm"
],
"files": [//上传时，要上传的文件，package默认上传
"dist",
"src/components"
],
"homepage": "https://xx.github.io/xx/xx-btn/dist/index.html",//主页
"bugs": {//提 bug 的页面
"url": "https://github.com/xx/xx-btn/issues"
},
"repository": {//项目git地址
"type": "git",
"url": "https://github.com/xx/xx-btn.git"
},
//后面与组件发布无关
"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"
}
}
- webpack.config.js
var path = require("path");
var webpack = require("webpack");
module.exports = {
// entry: "./src/main.js",
entry: "./src/components/index.js", // 入口文件
output: {
// 修改输出文件到 dist 下
path: path.resolve(__dirname, "./dist"),
publicPath: "/dist/",
// filename: 'build.js'
filename: "j-button.js", // 生成的文件名
library: "j-button", // 指定的就是你使用require时的模块名
libraryTarget: "umd", // 会生成不同umd的代码,可以只是commonjs标准的，也可以是指amd标准的，也可以只是通过script标签引入的
umdNamedDefine: true, // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
},
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",
};
五、构建
在项目根目录的控制台安装并构建
//安装命令
npm install
//构建命令
npm run build
结果如下：
六、本地打包测试
//打包命令
npm pack
会打包出一个j-button-1.0.0.tgz文件
随便找个项目安装
//安装本地包命令
yarn add D:\CSDN\j-button-1.0.0.tgz
然后在mian.js正常引用全局就可以用了
//main.js
import JButton from 'vue-jtopo';
Vue.use(JButton);
使用文件
//App.vue
<template>
<j-button :text="btnText"></j-button>
</template>
<script>
export default {
name: 'App',
data: function {
return {
btnText:"this is a message!"
}
},
};
</script>
七、发布npm
- 获取npm账号 直接去官网注册
- 在项目根目录控制台中登陆账号
//npm登陆命令
npm login
//然后会对话式交互，输入账号、密码和邮箱
- 发布
//发布命令
npm publish --access public
- 然后就可以正常的使用命令安装使用了
//安装命令
npm install j-button
//使用跟六中的一样
八、注意
- 一定要安装@vue/cli-init否则无法创建简单webpack应用
- 如果之前使用cnpm的话现在，会有许多奇奇怪怪的问题（不要在使用了）。登陆不上，没有权限，无法用yarn等等。
解决方案：
找到.npmrc 文件，将里面的
registry=http://registry.npm.taobao.org
改成:
registry=http://registry.npmjs.org/
.npmrc 文件在
window的 C:\Users\Administrator 下
linux的~/.npmrc
本文地址：https://blog.csdn.net/qq_34027761/article/details/109363257