乐趣区

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

jiezi

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

退出移动版