开发 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