ijijin-view(Vue)

开始

ijijin-view是根据开发频率抽离业务封装而成的前端组件库，这里是VueJs的移动端版本，适用于移动端业务开发。

一期(v1.x)组件包含：弹窗、通知、按钮、图标、tab栏、轮播图、滚动通知、输入框、选择器、下拉刷新及上拉弹窗。

1.准备工作

1.1 开发环境

  • nodejs v8.9+环境
  • webpack 3+
  • vue cli（推荐3.0版本）或自定义webpack打包环境（需less及vue loader）

1.2 知识储备

  • vue 2.5+
  • less
  • rem单位（换算 1rem：75px）
  • ES2015

在开始之前，推荐先学习VueJs和 ES2015。 本篇文档假设你已了解关于 HTML、CSS和JavaScript的基本知识，并且已经完全掌握了VueJs的正确开发方式（重点掌握Vue组件部分）。如果你刚开始学习前端或者VueJs，本框架作为开发第一步或许不是最好的主意。

2.使用

安装依赖

    npm i ijijin-view --save-dev

如果网络环境不佳，可以使用 cnpm

一般在 webpack 入口页面 main.js 中如下配置：

    import 'ijijin-view/vue'

    // 或
    require('ijijin-view/vue');

2.1 直接使用

    <template>
        <div>
            <v-button type="red">按钮</v-button>
            <v-icon type="heart"/>
        </div>
    </template>

2.2 按需使用组件

    <template>
        <pull-refresh v-model="loading" @refresh="loadTest">
            <v-button type="red">按钮</v-button>
            <v-icon type="heart"/>
        </pull-refresh>
    </template>

    <script>
        import PullRefresh from 'ijijin-view/PullRefresh'

        export default {
            data () {
                return {
                    loading: false
                }
            },
            components: {
                'pull-refresh': PullRefresh
            },
            methods: {
                /**
                 * 加载测试
                 */
                loadTest () {
                    setTimeout(() => {
                        this.loading = false;
                    }, 2000);
                }
            }
        }
    </script>

若想体验效果，可在移动端打开体验地址， 其示例原码可戳ijijin-view_demo

3 提示

  • 不支持浏览器直接使用；
  • 本组件库样式由less处理，vue-cli3需设置为less处理，非vue-cli需在webpack配置文件里配置less-loader，涉及到样式修改或调整可见“二次开发”内容；
  • 使用:prop传递数据 数字、布尔值或函数时，必须带:

vue-cli3及node_modules忽略注意

v0.9版本并未对组件进行编译，如webpack配置里对js设置了node_modules忽略，请先修改以避免ES6语法导致的不兼容，若使用vue-cli3版本构建工具，请在vue.config.jd配置如下代码：

	module.exports = {
		//...
		chainWebpack: config => {
			config.module
				.rule('ijijin')
				.test(/\.js$/)
				.include
				.add(/ijijin-view/)
				.end()
				.use('babel')
				.loader('babel-loader')
				.options({
					presets: [
						['@babel/preset-env', { modules: false }]
					]
				});
		},
		//...
	};

← 全局组件 →