vue 组件发布记录
有段时间没做独立的 vue 组件了,最近突然想把一个常用的 vue 组件打成一个 npm 包,方便使用。好久不用,发现已经忘记环境怎么搭建。翻看以前的组件,才慢慢回想起来,中间还出现些问题。在这记录下开发过程,以备忘。
一、新建工程
打成 npm 包的 vue 组件一般不会太复杂,当然如果是做一个 UI 库( 如:element-ui ),那另说。这里使用 vue-cli官方提供的 webpack-simple 模板来创建工程
vue init webpack-simple <project-name>
复制代码
二、初始化工程,安装相关依赖
yarn install
复制代码
三、创建组件相关目录
1、src 目录下新建 lib 文件夹,用来放置组件相关的文件。
2、在 lib 下新建 index.js 文件,用来导出组件。index.js 内容如下:
import Demo from './demo.vue'const demo = {install (Vue) {Vue.component(Demo.name, Demo)}
}
// IIFE
if (typeof window !== 'undefined' && window.Vue) { window.Vue.use(demo)
}
export default demo
复制代码
3、在 lib 下新建 demo.vue 文件,作为组件入口文件。demo.vue 内容如下:
<template><!--组件 html 结构-->
</template><script>export default {name: "Demo",props: {},data() {return {};},mounted() {},methods: {}
};
</script><style scoped></style>
复制代码
三、修改 webpack.config.js,进行编译相关配置
const path = require('path')
const webpack = require('webpack')
const ENV = process.env.NODE_ENV.trim()
const pJson = require('./package.json')module.exports = { // 入口,区分 ENV 环境变量entry: ENV==='production' ?'./src/lib/index.js':'./src/main.js', // 输出output: ENV==='production' ?{path: path.resolve(__dirname, './dist'),publicPath: '/dist/',filename: pJson.name + '.js',library: pJson.name, libraryTarget: 'umd', umdNamedDefine: true }:{path: path.resolve(__dirname, './dist'),publicPath: '/dist/',filename: 'build.js'}, 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'module.exports.plugins = (module.exports.plugins || []).concat([ new webpack.DefinePlugin({ 'process.env': {NODE_ENV: '"production"'}}), // source-map 配置,区分 ENV 环境变量new webpack.optimize.UglifyJsPlugin({sourceMap: ENV==='production' ? false : true,compress: {warnings: false}}), new webpack.LoaderOptionsPlugin({minimize: true})])
}
复制代码
四、组件效果预览
1、修改 src/main.js 导入组件
import Demo from './lib/index.js'
Vue.use(Demo)
复制代码
2、修改 src/App.vue 使用组件
<template><div id="app"><Demo/></div></template>
复制代码
3、运行 ,浏览器预览效果
yarn run dev
复制代码
五、发布
1、修改 package.json
"name": "demo",
"main": "dist/demo.js",
"private": false,
复制代码
2、修改 .gitignore ,删除 dist 条目,如果不删除,提交时会忽略 dist 文件夹的内容,发布后 npm 安装使用时,会找不到文件,因为组件编译好的文件是放在 dist 目录下。
3、编写 README ,介绍组件的功能
4、发布( 默认已有帐号,且已登录 )
yarn run build
npm config set registry=https://registry.npmjs.org
npm publish
复制代码
vue 组件发布记录相关推荐
- Vue实现跑马灯效果以及封装为组件发布
Vue 实现跑马灯效果 前言 最近做活动需要做跑马灯效果,其他同事也有实现,本来打算复制他们代码,发现都是使用setInterval实现了,也没有封装为组件,所以自己用CSS3实现了一下跑马灯效果,并 ...
- vue 带全选和多选的表格怎么写_vue实现下拉列表多选全选以及模糊查询的vue组件...
vue实现下拉列表多选全选以及模糊查询的vue组件 发布时间:2018-09-12 17:41, 浏览次数:3776 , 标签: vue <>前端,有时有这样的需求,需要一个下拉列表,还要 ...
- 如何使用vue组件搭建网页并打包发布
vue组件化项目搭建及编译打包发布 引言 开发环境 开发环境介绍 开发环境安装 使用模板创建项目 编译及打包发布 引言 最近开始学习Vue,Vue 是一个前端框架,特点是数据绑定和组件化.网上很多教程 ...
- 京东Vue组件库NutUI 2.0发布:将支持跨平台!
NutUI 是一套来自京东用户体验设计部(JDC)前端开发部的移动端 Vue 组件库,NutUI 1.0 版本于 2018 年发布.据不完全统计,目前在京东至少有30多个 web 项目正在使用 Nut ...
- vue 组件库发布_如何创建和发布Vue组件库
vue 组件库发布 Component libraries are all the rage these days. They make it easy to maintain a consisten ...
- vue 生成发布包_年轻人如何从0到1封装发布一个vue组件__Vue.js
封装发布组件是前端开发中非常重要的能力,通过对常用组件的封装可以提升团队开发的效率,避免重复劳作且不方便维护.好的组件的抽象和封装能让组件得到更广泛和多环境兼容的应用. 本文讲述了如何一步步从0到1封 ...
- Vant 1.0 发布:轻量、可靠的移动端 Vue 组件库
Vant 是有赞前端团队维护的移动端 Vue 组件库,提供了一整套 UI 基础组件和业务组件.通过 Vant 可以快速搭建出风格统一的页面,提升开发效率. Vant 一.关于 1.0 距离 Vant ...
- Vue组件学习之事件总线和消息发布订阅
简介 主要介绍事件总线的定义和编写方法和Vue是如何实现消息的订阅与发布的. 事件总线 事件总线是组件间通信的一种方式,适用于任意组件间的通信,比如毫不相干的两个组件.父子组件间.后代组件等等,都能通 ...
- antv/G6使用记录,vue组件实现节点、边的动态增减、右键事件等功能
antv/G6使用记录,vue组件实现节点.边的动态增减.右键事件等功能 基本展示 功能点: 特性: ==完整代码== ==示例数据== 补充说明: 基本展示 antv/G6是蚂蚁金服数据可视化团队 ...
最新文章
- Linux下的NFS搭建配置
- Android --- Serializable 接口与 Parcelable 接口的使用方法和区别,怎么选择?
- python的init有什么用_Python中 __init__.py的作用
- union 与 union all 及其他并集操作说明
- 左神算法:判断 t1 树是否包含t2 树全部的拓扑结构(剑指 Offer 26. 树的子结构,Java版)
- Java多线程学习八:线程池常用的阻塞队列
- js 操作vuex数据_请教个有关 Vue.js 使用 Nuxt.js 服务端渲染,使用 Vuex 取数据的时候报错...
- Pytorch完成线性回归
- 让 Windows 的 R 用上 CUDA
- Combination Sum II - LeetCode
- linux格式化分区进程,Linux 硬盘格式化、分区、挂载、卸载、删除分区,Linux重新调整分区...
- 【平面设计基础】11:配色——配色原理
- Java实现手机号码、邮箱账号加密
- 哲学必读10本经典著作
- python抓取腾讯视频弹幕_Python实战 | 如何抓取腾讯视频弹幕
- 课程实训-校园导游系统
- PPT怎么用100张照片做照片墙?
- 计算机PPT中项目编号怎么弄,电脑技巧收藏家电脑基础设置幻灯片格式:项目符号和编号...
- 集合间的映射和集合的势
- NOIP刷题记录(打鼹鼠)——二维树状数组板子题
热门文章
- java上传文件至nas_使用JCIFS上传文件至NAS设备(Logon failure: unknown user name or bad password)解决...
- php 内置mail 包,配置php自带的mail功能
- mysql清除数据痕迹_MySQL使用痕迹清理~/.mysql_history - milantgh
- linuxl下创建mysql用户和组_Linux中用户与用户组管理
- oracle set markup,oracle sql*plus set spool介绍(二)
- websocket中发生数据丢失_什么是WebSocket,它与HTTP有何不同?
- mysql数据库崩_mysql数据库崩溃_MySQL
- vba动态二维数组_VBA实战技巧05: 动态调整数组以存储所需数据
- 用python做双人五子棋_基于python的socket实现单机五子棋到双人对战
- java孙膑和庞涓问题_庞涓与孙膑的故事