开发 Vue 组件

随着 Vue 越来越火热, 相关组件库也非常多啦, 只用轮子怎么够, 还是要造起来!!!

1 环境配置

首先使用 vue-cli 脚手架, 生成基本项目;

npm install vue-cli -g# mvue 是本次项目名称vue init webpack mvue

如果要开发一个 npm 安装包, 还修改 package.json 的 main 选项

"main": "dist/mvue.js"

意思是我们将提供编译压缩后 mvue.js 文件给其他开发者使用;

2. webpack

在前端领域内, 可谓是没 webpack 不成活; 手写太麻烦, 就直接给大家文件了, 以下是我们的 webpack.config.js 文件:

var path = require('path');var webpack = require('webpack');module.exports = {    entry: {        main: './src/mvue.js'    },    output: {        path: path.resolve(__dirname, '../dist'),        publicPath: '/dist/',        filename: 'mvue.js',        library: 'mvue',        libraryTarget: 'umd',        umdNamedDefine: true    },    externals: {        vue: {            root: 'Vue',            commonjs: 'vue',            commonjs2: 'vue',            amd: 'vue'        }    },    resolve: {        extensions: ['', '.js', '.vue']    },    module: {        loaders: [{            test: /\.vue$/,            loader: 'vue'        }, {            test: /\.js$/,            loader: 'babel',            exclude: /node_modules/        }, {            test: /\.css$/,            loader: 'style!css!autoprefixer'        }, {            test: /\.less$/,            loader: 'style!css!less'        }, {            test: /\.(gif|jpg|png|woff|svg|eot|ttf)\??.*$/,            loader: 'url?limit=8192'        }, {            test: /\.(html|tpl)$/,            loader: 'vue-html'        }]    },    plugins: [        new webpack.DefinePlugin({            'process.env': {                NODE_ENV: '"production"'            }        }),        new webpack.optimize.UglifyJsPlugin({            compress: {                warnings: false            }        }),        new webpack.optimize.OccurenceOrderPlugin()    ]}

重点是 entry 和 output, 指定入口文件和输出文件;
因为我们要写的是分页组件, 所以已经在 components 目录下创建了 page.vue;
接下来 我们编写 webpack 入口文件:

import Page from './components/page';const mvue = {  Page};// 导出 install 函数// Vue.use() 会调用这个函数const install = function(Vue, opts = {}) {  // 如果安装过就忽略  if (install.installed) return;  // 指定组件 name  Vue.component(Page.name, Page);}// 自动安装 方便打包成压缩文件, 用<script scr=''></script>的方式引用if (typeof window !== 'undefined' && window.Vue) {  install(window.Vue);}// 把模块导出module.exports = {  install,  Page}

在入口文件中, 我们提供了对外公开的组件, install 函数, install 在 vue 组件开发中至关重要, vue 组件的调用方式是 Vue.use(***), 这个函数就会调用组件的 install 函数;
接下来就是各种组件的编写了!
以分页组件为例子, 首先我们要指定 props, 并对其类型进行验证,

  props: {    current: {      type: Number,      default: 1    },    total: {      type: Number,      default: 1    },     currentChange: {      type: Function    }  }

一共接受三个参数 分别是:

当前索引, 总条目, 回调函数

export default {  name: 'mvue-page',  props: {    current: {      type: Number,      default: 1    },    total: {      type: Number,      default: 1    },     currentChange: {      type: Function    }  },  mounted () {    this.insertPage()  },  data () {    return {      currentIndex: this.current,      pageShowArray: [],      displayCount: 7    }  },  methods: {// 翻页    insertPage () {      let self = this      self.pageShowArray = []      for (var i = 1; i <= self.total; i++) {        this.pageShowArray.push(i)      }      // 小型分页      if (this.total <= this.displayCount) { return; }      let begin = this.currentIndex - 3       let end = this.currentIndex + 3      begin = begin <= 1 ? 1 : begin      end = end <= this.displayCount ? this.displayCount : end      begin = begin >= this.total - this.displayCount ? this.total - this.displayCount : begin      end = end >= this.total ? this.total : end      let arr = this.pageShowArray.slice(begin - 1, end)      this.$set(this, 'pageShowArray', arr)    },// 上一页   pre () {      if (this.currentIndex <= this.displayCount) {return;}      this.setIndex(this.currentIndex - this.displayCount)      this.insertPage()    },// 下一页    next () {      if (this.currentIndex >= this.total) {return;}      this.setIndex(this.currentIndex + this.displayCount)      this.insertPage()    },// item 点击    itemClick (current) {      this.setIndex(current)      this.insertPage()// 触发回调      this.currentChange(current)    },    setIndex (current) {      let temp = current      if (temp <= 1) { temp = 1}      if (temp >= this.total) { temp = this.total}      this.$set(this, 'currentIndex', temp)    }  }}

调用方式

...  html code<mvue-page :current="2" :total="40" :currentChange='currentChange'></mvue-page>... js code// 两种方式选一个即可// 按需加载import {Page} from 'mvue'Vue.use(Page)// 全部加载import mvue from '../dist/mvue.js'Vue.use(mvue);

如上, 一个简单的分页组件已经有些模样, 接下来使用 webpack 打包;

// 对应 config 文件webpack webpack.config.js

发布

npm publish