Vue2.0 之写一个自己的组件

端端君
8,588 阅读4分钟
原文链接： github.com

最近在研究vue 2.0，看了很多组件库，当需求很多的时候，一个或两个组件库可能不能够满足我们的需求，自己能够手写一个组件的能力很有必要。看了官网和几个教程，发现写的不是令人满意，我决定写一份简单明了的教程，希望对你有帮助。

代码使用

  1. npm install (如果太慢建议 cnpm install)
  2. npm run dev # 项目初始化 # ## 1.初始化一个vue的项目 新手推荐先使用vue的脚手架(vue-cli),除非你已经很了解webpack了（关于webpack后续我也会写一些，敬请关注）。

vue-cli有几个模版，我们先使用一个简单点的webpack-simple。

 vue init webpack-simple my_component

一路回车敲下去，会生成一个项目，里面包含了package.json，webpack.config.js,src目录和一些其他文件

2.项目的配置

本文先假设你对npm的的配置和webpack了解，它们的配置不在本文的讨论内容中，直接粘贴我的配置信息即可。

package.json:

{
  "name": "my_component",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "Darcy_Wang <wangziangis@gmail.com>",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "vue": "^2.1.0"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "file-loader": "^0.9.0",
    "style-loader": "^0.13.1",
    "vue-loader": "^10.0.0",
    "vue-template-compiler": "^2.1.0",
    "webpack": "^2.2.0",
    "webpack-dev-server": "^2.2.0"
  }
}

webpack.config.js:

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      },
      {
        test:/\.css$/,
        loader:'style-loader!css-loader'
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.common.js'
    }
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}

组件

vue中的组件是最重要的概念，它表现为一个单体文件，以‘.vue’为扩展名,里面包含：

  • template (html标签，组件的整体结构)
  • script (javascript脚本，用于定义组件，实现组件的内部逻辑)
  • style（css样式,一般都是scoped,防止样式污染全局）。

其中script比较重要，作为一个vue的组件它主要包含以下几个基本部分：

  • name (组件的名称，使用组件时将把name作为标签名<name></name>）
  • props (组件的属性,用于接收传入的参数,在组件中可以用this.prop_name方式引用)
  • data (组件的初始化数据，定义一个返回一个对象的函数)
  • methods (组件的方法)
  • created,mounted等 (组件的生命周期函数)

组件还需要编写一个install方法，用于安装这个组件到Vue的对象中，执行Vue.use(component)，会调用这个方法

1.组件的编写

下面以一个简单的分页组件为例，介绍组件的编写。

首先,创建组件文件。

在src下创建一个components文件夹，包含文件夹page，page中包含index.js,page.vue如下目录结构：

src
-components
--page
---index.js
---page.vue

components用于放置组件的集合，page包含组件的文件，index.js组件的注册文件，page.vue组件的内容

然后编写组件的具体内容

直接参考以下代码：

<template>
    <div class="pagenation">
        <ul>
            <li @click="pre"> < </li>
            <li v-for="item in show_page_numbers" :class="{active: item==current_index}" @click="setIndex(item)">{{item}}</li>
            <li @click="next"> > </li>
        </ul>
    </div>
</template>
<script>
    export default {
        name:'pagenation',
        props:{
            current: {
                type: Number,
                default: 1
            },
            total: {
                type: Number
            },
            currentChange: {
                type: Function
            }
        },
        data: function(){
            return {
                show_page_numbers:[],
                display_limit:8,
                current_index: this.current
            }
        },
        mounted(){
            this.refreshPage();
        },
        methods:{
            refreshPage(){
                this.show_page_numbers=[];

                for(let i=1; i<=this.total; i++){
                    this.show_page_numbers.push(i);
                }

                if (this.total <= this.display_limit) { return; }
                let begin = this.current_index - 3 
                let end = this.current_index + 3
                begin = begin <= 1 ? 1 : begin
                end = end <= this.display_limit ? this.display_limit : end
                begin = begin >= this.total - this.display_limit ? this.total - this.display_limit : begin
                end = end >= this.total ? this.total : end

                let arr = this.show_page_numbers.slice(begin-1,end);
                this.show_page_numbers = arr;

            },
            pre(){
                console.log("lll");
                let current = this.current_index;
                if(current<=1){
                    return;
                }
                this.setIndex(current-1);

            },
            next(){
                console.log("kkk");
                let current = this.current_index;
                if(current>=this.total){
                    return;
                }
                this.setIndex(current+1);
            },
            setIndex(index){
                this.current_index = index;
                this.refreshPage();
            }
        }
    }
</script>
<style scoped>
  li{
    list-style: none;
    display: inline-block;
    margin: 5px -0.5px;
    border: 1px solid #2c3e50;
    padding: 5px;
    min-width: 30px;
    min-height: 30px;
    line-height: 200%;
    cursor: pointer;
    transition: all 0.3s;
    user-select: none;  
  }
  .active, li:hover{
    background-color: rgba(65, 182, 131, .5);
    color: #ffffff;
    border-color: rgba(65, 182, 131, .5);
  }  
  a{
    display: inline-block;
    color: inherit;
  } 
  .clearfix{
    clear: both;
  }
</style>

最后编写组件的注册文件

index.js文件如下：

import page from './page.vue'

page.install = function(Vue){
    Vue.component('pagenation', page);
}

export default page

至此，一个组件已经开发完成了，下面就差使用啦

2.组件的使用

组件的使用有好几种方式，下面仅介绍一种简单的方式。 在使用组件的那个文件中先把组件导入，然后调用Vue.use(),对，就是这么简单。 比如在App.vue中使用该组件。

在script中写如下代码：

import page from './components/page'
import Vue from 'vue'

Vue.use(page);

在template中写如下代码：

<pagenation :current="2" :total="40" :currentChange="whenChange"></pagenation>

App.vue最终这个样子:

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1></h1>
    <pagenation :current="2" :total="40" :currentChange="whenChange"></pagenation>
  </div>
</template>

<script>
import page from './components/page'
import Vue from 'vue'

Vue.use(page);

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods:{
    whenChange(item){
      console.log(item);
    }
  }
}
</script>

<style>

</style>

保存，根目录下运行npm run dev，你已经在使用自己的组件了

初次之外修改下，package.json，添加一个"main":"dist/your_component_compile_path"，运行npm publish你就可以把这个模块发布到npm上，别人可以通过npm install your_component_name方式安装你的组件

avatar
文章
阅读
粉丝