目录
- Npm登录
- 使用webpack，然后写一些组件
- 发布包
- 使用
1.登录
1.npm login 输入账号密码邮箱（输入密码得时候命令行没反应得 不用管）
2.如果是使用了淘宝镜像 执行npm config set registry https://registry.npmjs.org/ 切换Npm镜像源
3.再次登录
2.使用webpack，然后写一些组件
1.随便找个文件夹 初始化 npm init 生成package.json文件
2.新建 webpack.config.js 和 src\
webpack.config.js可以直接复制，注意配置library和 libraryTarget 就用下面得配置好了 libraryTarget默认var暴露为全局变量，这里我们使用umd，是其暴露给当前引入他得系统模块
let path = require("path"); //内置模块，相对路径解析成绝对路径
let webpack = require("webpack"); 引用webpack内置插件集合
let CleanWebpackPlugin = require("clean-webpack-plugin"); //打包去除原有的文件夹
let MiniCssExtractPlugin = require("mini-css-extract-plugin"); //外链css 插件
const VueLoaderPlugin = require("vue-loader/lib/plugin");
// console.log(MiniCssExtractPlugin, 11111111111);
module.exports = {
mode: "production",
entry: {
home: "./src/index.js"
// home: "./src/index1.js"
}, //入口
output: {
filename: "bundle[name].js", //打包后得文件名 加上这个bundle[hash].js 产生一个哈希值
path: path.resolve(__dirname, "dist"), //路径必须是绝对路径,__dirname当前目录下，不加也可以
globalObject: "this",
library: "ceshi_uiui",
libraryTarget: "umd",
umdNamedDefine: true
},
plugins: [
// 打包去除原有的dist 具体配置可以看这个文档https://www.qdtalk.com/2018/11/17/clean-webpack-plugin/
new CleanWebpackPlugin(["dist"], {
exclude: ["dll"]
}),
new MiniCssExtractPlugin({
filename: "[name].css" //外链得css名
}),
new VueLoaderPlugin()
],
// 模块加载
module: {
// noParse: /jquery/, //不需要解析的插件里面的依赖关系， 比如bootstrap中就有依赖关系 多个/jquery|lodash/,
// loader 模块加载器
rules: [
//规则 css-loader 解析@important这种语法
//style-loader 把css插入到head得标签中(也可以是底部)
// less-loader 解析less成css
// loader 特点单一,use使用字符串单个， 多个得话写成数组["style-loader", "css-loader"]。loader得顺序是右往左 从下往上
// loader还可以写成对象方式
{
test: /\.css$/,
use: [
// {
// loader: "style-loader",
// options: {
// insertAt: "top", //css打包之后在顶部 默认在底部
// },
// },
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader"
]
// include: path.resolve(__dirname, "src"), //只在src下找
},
// 处理less sass stylus...
{
test: /\.less$/,
use: [
// {
// loader: "style-loader",
// options: {
// // insertAt: "top", //css打包之后在顶部 默认在底部
// },
// },
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
"less-loader"
],
include: path.resolve(__dirname, "src") //只在src下找
},
// js语法转换
{
test: /\.js$/,
// use: "Happypack/loader?id=js",
use: {
loader: "babel-loader",
options: {
// 插件库，预设
presets: [
"@babel/preset-env" //js es6语法转换
],
plugins: [
[
"@babel/plugin-proposal-decorators",
{
legacy: true }
], //语法 @log 装饰器 转换
"@babel/plugin-proposal-class-properties", //转换 class es7语法使用@babel/polyfill,全局require
"@babel/plugin-transform-runtime" //可以转换异步得语法，比如promise, 做了简单得优化，比如抽离公共得部分
]
}
},
include: path.resolve(__dirname, "src") //只在src下找
// exclude:/node_modules/, //排除。。。。
},
// eslint js语法验证
// {
// test: /\.js$/,
// use: {
// loader: "eslint-loader",
// options: {
// enforce: "pre", // 强制previous优先执行 post之后执行 保证在js转换之前执行
// },
// },
// },
// 图片解析加载 匹配js中得
{
test: /\png|jpe?g|gif$/,
use: {
loader: "url-loader",
options: {
limit: 10 * 1024, //小于10k 解析成base64 大于正常产出图片
outputPath: "/img/"
// publicPath:"http://xxxxxxxxxxxxxxx" 图片加上绝对路径，比如说图片全部采用得是cdn
}
}
},
// 图片解析加载 匹配html中得 create img标签 时
{
test: /\.html$/,
use: {
loader: "html-withimg-loader"
}
},
// 解析和转换.vue文件 //使用vue-loader@15以上都需要使用vueloaderplugin这个插件
{
test: /\.vue$/,
use: {
loader: "vue-loader"
}
}
]
}
};
package.json 直接复制npm i（一些插件版本都写了）package-lock.json文件比较长就不放了，到时候注意下面得插件得版本号，一些插件版本差异会出错
{
"name": "homepro",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"ceshi_uiui": "^1.0.0",
"core-js": "^2.6.5",
"my_func_yyy": "^1.1.4",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.0.4",
"@vue/cli-plugin-eslint": "^3.0.4",
"@vue/cli-service": "^3.0.4",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.6.10"
}
}
3.新建一个src文件结构如下
下面说下各个文件得内容
button，input差不多
index.vue
<template>
<button>组件按钮</button>
</template>
<script>
export default {
name: "sButton"
};
</script>
index.js(为了方便可以单独引入)
import Component from "./index.vue";
/* istanbul ignore next */
Component.install = function(Vue) {
Vue.component(Component.name, Component);
};
export default Component;
src/index.js 定义一个install 方法
import Button from "./compontents/button/index";
import Input from "./compontents/Input/index";
import "./style/commond.less";
// import Vue from "vue";
const components = [Button, Input];
// 存储组件列表
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function(Vue) {
// 判断是否安装
if (install.installed) return;
// 遍历注册全局组件
components.forEach(component => {
Vue.component(component.name, component);
});
};
// 判断是否是直接引入文件
if (typeof window !== "undefined" && window.Vue) {
install(window.Vue);
}
export default {
Button,
Input,
install
};
3.发布包
1.配置package。json, name和webpack中得一致
2.验证名字是否重复 npm view myfuncYYY version 返回404就是可以用，返回得是版本号说明注册了
3.npm publish 发布/更新（npm unpublish xxx@1.1.1 删除版本号）
4.使用
也可以单独引入某个组件
import ceshi_uiui from "ceshi_uiui";
Vue.use(ceshi_uiui);
组件
<s-button></s-button><br />
<s-input></s-input>
转载：https://blog.csdn.net/qq_38935512/article/details/115730925
查看评论