全网最详细、最靠谱、开发 vue组件,并上传到 npm

2019-07-28 14:10:03   前端

  vue组件、npm包  

开发 vue组件,并上传到 npm

前文

淘宝源:https://registry.npm.taobao.org

正式源: https://registry.npmjs.org/

换源命令
  1. npm config set registry https://registry.npm.taobao.org --global
  2. npm config list //
运行环境

win10

node:v10.16.0

npm: 6.9.0

项目github下载地址


1.创建项目

  1. mkdir vue-replay
  2. cd vue-replay
  3. npm init
  4. package name: (vue-replay) // 包名称 默认文件名称
  5. version: (1.0.0) // 版本号
  6. description: 移动web端回复框(自动触发键盘弹起ios+Android// 说明
  7. entry point: (index.js) dist/index.js // 入口文件路径
  8. test command: // 测试命令
  9. git repository: https://github.com/wanghao-fan/vue-replay.git// 你的 git仓库
  10. keywords: vue-replay // 关键词
  11. author: nothing49199 // 作者
  12. license: (ISC) // 许可证 类型

2.创建目录、文件

  • 根目录下 创建目录 src、 src/components; 文件 :.gitignore、README.md、webpack.config.js
  • components目录下创建 sendReplay.vue组件

    1. <template>
    2. <div
    3. v-if="focusType"
    4. class="answer">
    5. <div class="box clearfix">
    6. <div class="left">
    7. <input
    8. v-focus="focusType"
    9. name="sendReport"
    10. :value="value"
    11. :placeholder="tips"
    12. @change="handleChange($event)"></div>
    13. <div class="right"><button @click="send()"><span>发送</span></button></div>
    14. </div>
    15. <div
    16. v-show="focusType"
    17. class="mask"
    18. @click="active()" />
    19. </div>
    20. </template>
    21. <script>
    22. export default {
    23. name: 'SendReport',
    24. // 设置获取焦点
    25. directives: {
    26. // 自动获取焦点
    27. focus: {
    28. inserted: function(el, binding) {
    29. if (binding.value) {
    30. el.focus()
    31. el.scrollIntoView()
    32. } else {
    33. el.blur()
    34. }
    35. },
    36. componentUpdated: function(el, binding) {
    37. if (binding.value) {
    38. el.focus()
    39. el.scrollIntoView()
    40. } else {
    41. el.blur()
    42. }
    43. }
    44. }
    45. },
    46. props: {
    47. // input value值
    48. value: {
    49. type: String,
    50. default: null
    51. },
    52. // 是否展示和获取焦点
    53. focusType: {
    54. type: Boolean,
    55. default: false
    56. },
    57. // 输入框内 提示语
    58. tips: {
    59. type: String,
    60. default: null
    61. }
    62. },
    63. data() {
    64. return {
    65. height: null
    66. }
    67. },
    68. computed: {
    69. status() {
    70. return !this.focusType
    71. }
    72. },
    73. watch: {
    74. // 发送完后 回到原始位置
    75. focusType() {
    76. if (this.focusType) {
    77. this.ios()
    78. } else {
    79. document.body.scrollTop = this.height
    80. document.documentElement.scrollToop = this.height
    81. }
    82. }
    83. },
    84. mounted() {
    85. // 监听滚动条高度
    86. document.addEventListener('scroll', res => {
    87. if (this.status) {
    88. this.height = (document.documentElement.scrollTop || document.body.scrollTop)
    89. }
    90. })
    91. },
    92. methods: {
    93. // 隐藏组件
    94. active() {
    95. this.$emit('update:focusType', false)
    96. },
    97. // 发送回调函数
    98. send() {
    99. this.$emit('send')
    100. },
    101. // 兼容ios手机 滚动
    102. ios() {
    103. setTimeout(function() {
    104. this.height = document.body.scrollTop
    105. document.body.scrollTop = document.body.scrollHeight
    106. document.documentElement.scrollTop = document.body.scrollHeight
    107. }, 300)
    108. },
    109. // 同步父级 input 输入 value值
    110. handleChange(event) {
    111. this.$emit('input', event.target.value)
    112. }
    113. }
    114. }
    115. </script>
    116. <style lang="scss" scoped>
    117. .clearfix:before,
    118. .clearfix:after {
    119. content: " ";
    120. display: block;
    121. font-size: 0;
    122. height: 0;
    123. clear: both;
    124. visibility: hidden;
    125. }
    126. .clearfix {
    127. *zoom: 1;
    128. }
    129. /* 浮动 */
    130. .left{
    131. float: left;
    132. }
    133. .right{
    134. float: right;
    135. }
    136. .answer{
    137. background-color: #f9f9f9;
    138. position:fixed;
    139. bottom: 0;
    140. right: 10px;
    141. width: 100%;
    142. height: 50px;
    143. z-index: 99999999999999;
    144. padding-bottom: 10px;
    145. .box{
    146. position: relative;
    147. z-index: 99999999999999;
    148. .left{
    149. width: 82%;
    150. text-align: center;
    151. padding-top:8px;
    152. >input{
    153. margin-left:10px;
    154. width: 90%;
    155. height: 40px;
    156. border: 1px solid #e8e8e8
    157. }
    158. }
    159. .right{
    160. width: 18%;
    161. padding-top:10px;
    162. >button{
    163. border-radius:5px;
    164. width: 100%;
    165. height: 40px;
    166. text-align: center;
    167. background-color: #18b4ed;
    168. }
    169. }
    170. }
    171. }
    172. .mask{
    173. z-index: 99999999;
    174. position: fixed;
    175. top: 0;
    176. right: 0;
    177. left: 0;
    178. bottom: 0;
    179. background: rgba(0, 0, 0, 0.8);
    180. opacity: 0;
    181. }
    182. </style>
  • src 目录下创建 index.js 入口文件

  1. import sendReplay from './components/sendReplay.vue'
  2. sendReplay.install = function(Vue) {
  3. Vue.component(sendReplay.name, sendReplay);
  4. };
  5. export default sendReplay;
  • .gitignore
  1. .DS_Store
  2. node_modules
  3. package-lock.json
  4. # local env files
  5. .env.local
  6. .env.*.local
  7. mock-back
  8. .history
  9. # Log files
  10. npm-debug.log*
  11. yarn-debug.log*
  12. yarn-error.log*
  13. # Editor directories and files
  14. .idea
  15. .vscode
  16. *.suo
  17. *.ntvs*
  18. *.njsproj
  19. *.sln
  20. *.sw?
  • webpack.config.js
  1. const path = require('path');
  2. let VueLoaderPlugin = require('vue-loader/lib/plugin')
  3. module.exports = {
  4. mode: 'development', // production development
  5. entry: {
  6. tree: './src/index.js' // 入口文件
  7. },
  8. output: {
  9. path: path.resolve(__dirname, './dist'), // 输出目录
  10. filename:'index.js', // 输出文件名
  11. library: 'vue-replay', // 指定的就是你使用require时的模块名
  12. libraryTarget: 'umd', // 支持cmd,amd,及全局 具体啥意思也没明白 libraryTarget会生成不同umd的代码,可以只是commonjs标准的,也可以是指amd标准的,也可以只是通过script标签引入的
  13. umdNamedDefine: true // 会对 UMD 的构建过程中的 AMD 模块进行命名。否则就使用匿名的 define
  14. },
  15. plugins:[
  16. new VueLoaderPlugin() // 这里遇到坑了,不加 vue-load报错
  17. ],
  18. module:{
  19. rules: [
  20. {
  21. test: /\.vue$/,
  22. loader: 'vue-loader'
  23. },
  24. {
  25. test: /\.css$/,
  26. use: [
  27. 'style-loader',
  28. 'css-loader'
  29. ]
  30. },
  31. {
  32. test: /\.js$/,
  33. loader: 'babel-loader'
  34. },
  35. {
  36. test: /\.scss$/,
  37. use: [
  38. 'vue-style-loader',
  39. 'css-loader',
  40. {
  41. loader: 'sass-loader'
  42. }
  43. ]
  44. }
  45. ]
  46. }
  47. }

3. 下载npm 依赖

npm install 以下依赖

dependencies 依赖

  • “babel-loader”: “^8.0.6”,
  • “css-loader”: “^3.1.0”,
  • “html-webpack-plugin”: “^3.2.0”,
  • “node-sass”: “^4.12.0”,
  • “sass-loader”: “^7.1.0”,
  • “style-loader”: “^0.23.1”,
  • “stylus-loader”: “^3.0.2”,
  • “vue”: “^2.6.10”,
  • “vue-loader”: “^15.7.1”,
  • “webpack”: “^4.38.0”,
  • “webpack-cli”: “^3.3.6”,
  • “webpack-dev-server”: “^3.7.2”,
  • “webpack-server”: “^0.1.2”

devDependencies

  • @babel/core”: “^7.5.5”,
  • @babel/preset-env”: “^7.5.5”,
    “babel-core”: “^6.26.3”,
  • “babel-preset-env”: “^1.7.0”,
  • “vue-template-compiler”: “^2.6.10”

4. 打包 发布项目

  1. npm build
  2. // git 上传你的代码(也可以不传)
  3. // 注册一个 npm账号
  4. npm login // 这了如果拟更换过 npm 源的话 加个 --registry=https://registry.npmjs.org/
  5. Username: ***
  6. Password:***
  7. Email: (this IS public):邮箱
  8. npm publish

如果失败,检查一下 npm官网上是否已经存在相同名字,每次推得话 更改一下版本号

还有测试的时候,如果你的源taobao源,你发布包暂时只在国外源,taobao源是没有的,等过一段时间才能同步,拉去你写的包时同理可以加上 —registry 之指定一下源就可以了

5.使用方法

使用文档

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

感谢你的支持,我会继续努力!
扫码打赏,建议金额1-10元