关于vue.js:封装vue20组件基于elementui并发布npm包

1、初始我的项目

mkdir vue-test & cd vue-test

2、安装包

npm init

一路回车，创立package.json，外面的name能够视状况本人更改

3、思考通过webpack按需安装包（因为vue-cli装置了很多额定的包）

npm i webpack webpack-cli webpack-dev-server html-webpack-plugin -D

4、调整目录构造，新建assets、example、packages、src、webpack

assets寄存动态资源，如images、less、scss、font等
example寄存示例
packages寄存行将开发的vue组件
src寄存启动我的项目的入口js等
webpack寄存不同配置

5、思考webpack配置
（1）vue我的项目，必然须要装置vue、vue-loader、vue-template-compiler，具体参考https://vue-loader.vuejs.org/（这里有一个留神点：须要装置vue@2和vue-loader@15，更高版本的话，就须要做vue3的解决了，目前尚未摸索vue3的相干配置）
（2）vue组件中蕴含了less、scss等，必然须要装置vue-style-loader、css-loader、less、less-loader、sass、sass-loader、node-sass
（3）我的项目中有js文件，须要反对es6语法，必然须要装置babel-loader

6、在/webpack目录下，新建develop.js

const webpack = require('webpack')
const path = require('path')
const resolve = path.resolve
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  mode: 'development',
  mode: 'none',
  entry: resolve(__dirname, '../src/index'),
  output: {
    clean: true
  },
  module: {
    rules: [
      {
        test: /\.vue$/i,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader'
      },
      {
        test: /\.s[ac]ss$/,
        use: ['vue-style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.less$/,
        use: ['vue-style-loader', 'css-loader', 'less-loader']
      },
      {
        test: /\.css$/,
        use: ['vue-style-loader', 'css-loader']
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: 'asset/resource'
      }
    ]
  },
  devtool: 'inline-source-map',
  devServer: {
    static: './dist'
  },
  resolve: {
    alias: {
      '@': process.cwd()
    }
  },
  plugins: [
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin({
      template: resolve(__dirname, '../src/index.html')
    })
  ]
}

具体配置，能够参考webpack官网，https://webpack.docschina.org…

7、新建入口文件
要晓得，webpack只是一个打包工具，依据入口js文件（即entry配置的内容），把import的各种资源，比方.vue文件或者图片等等整合到一起，最初以js文件输入（即配置output）。
那么，咱们须要到/src目录下，新建入口文件index.js、index.html、index.vue。
（1）index.js(entry配置的入口文件)

import Vue from 'vue'
import App from "./index.vue"

new Vue({
  el: '#app',
  render: (h) => h(App)
})

这个js文件，大家应该很相熟吧，跟vue-cli初始化的我的项目中，src/main.js是不是一样的？
（2）index.html（次要是配合html-webpack-plugin组件）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

这个html文件，大家有没有感觉也很相熟，跟vue-cli初始化的我的项目中，public/index.html是不是一样？
（3）index.vue（vue我的项目的主文件）

<template>
  <div>this is my app</div>
</template>
<script>
export default {
  data(){
    return {}
  }
}
</script>
<style>
</style>

这不就是，src/App.vue 吗？
这下终于明确，为啥vue-cli有这三个文件了，原来是为了配合webpack，当作我的项目的入口文件、

8、批改package.json

  "main": "dist/index.js",
  "scripts": {
    "dev": "webpack serve --open --config webpack/develop.js",
    "build": "webpack --config webpack/develop.js"
  },

次要是为了执行npm run dev和npm run build等

9、启动我的项目

npm run dev

（1）这时能够看到报错

还须要装置@babel/core，之后从新执行npm run dev启动我的项目，浏览器会主动关上一个新的标签http://localhost:8081/

（2）浏览器关上开发者工具，F12里有个报错

百度了一圈，https://stackoverflow.com/que…
须要装置npm i process -D，并且webpack批改配置

 plugins: [
    ...
    new webpack.ProvidePlugin({
      process: 'process/browser'
    })
  ]

当然，如同更好的解决形式是装置cross-env

这时候，浏览器中应该曾经呈现内容了。

10、开发组件（以element-ui为根底）
当初一个简略的vue曾经跑起来了。后续写组件，大家应该驾轻就熟了吧？

npm i element-ui

同时，批改index.js

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

在/packages目录下，新建diy-int.vue，用来解决 input输入框只能输出整数

<template>
  <span>
    <el-input
      v-model="inputVal"
      :placeholder="`请输出${$attrs.title || ''}`"
      v-bind="$attrs"
      @input="(val) => triggerInput($attrs, val)"
    >
      <template slot="prepend"><slot name="prepend"></slot></template>
      <template slot="append"><slot name="append"></slot></template>
    </el-input>
  </span>
</template>
<script>
export default {
  name: 'diy-int',
  model: {
    event: 'change',
    prop: 'value'
  },
  props: {
    value: { type: [Number, String], default: '' }
  },
  components: {},
  computed: {
    inputVal: {
      get () {
        return this.value
      },
      set (value) {
        this.$emit('change', value)
      }
    }
  },
  data () {
    return {
      visible: false
    }
  },
  methods: {
    triggerInput ($attrs, val) {
      let result = String(val)
        .replace(/[^\d]/g, '') // 只能填数字
        .replace(/^0+$/, '0') // 全副填写0时只显示一个0
        .replace(/^0(\d{1})/g, '$1') // 以0结尾的整数，只展现整数局部;
      if ($attrs.max) {
        if (Number(result) > $attrs.max) {
          result = $attrs.max
        }
      }
      if ($attrs.min) {
        if (Number(result) < $attrs.min) {
          result = $attrs.min
        }
      }
      this.inputVal = result
    }
  },
  mounted () {}
}
</script>
<style lang="less" scoped></style>

去src/index.vue中引入组件


import DiyInt from "@/packages/diy-int.vue"

export default {
  ...
  components: {
    DiyInt
  },
  ...
}


<diy-int v-model="int" :max="100" :min="5">
  <el-button slot="append" icon="el-icon-edit"></el-button>
</diy-int>

你会发现，你自定义的一个组件就实现了。

11、执行npm run build并公布npm

关于vue.js:封装vue20组件基于elementui并发布npm包

评论

发表回复取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

关于vue.js:封装vue20组件基于elementui并发布npm包

评论

发表回复 取消回复

更多文章

DDN HPC 存储硬件架构设计深度分析

探秘IO500：从Lustre并行文件系统出发，开启HPC存储性能新征程

苹果iOS打包的ipa应用无法安装？一篇文章带你了解可能的原因及排查方法

图解Golang：从零开始实现简易版过期LRU缓存

发表回复取消回复