Ways to use third-party UI component libraries in Mpvue projects

Brief introduction

Little program has been on the line for more than a year, since the Mpvue (based on the Vue.js Small program development Framework, from the bottom of the support vue.js grammar and building tools system) has been in existence for several months.

Front-end technology is changing, and the UI framework for small programs is endless.

For example:

Weui: A set of basic style libraries that are consistent with the native visual experience, designed by the official design team for internal Web pages and small programs, making user perception more unified. (GitHub)

Zanui: There is a realistic version of the applet that likes the mobile Web UI specification Zanui. (GitHub)

IView Weapp: Small program UI component library that is produced by the same organization as the IView (open source UI component library based on Vue.js). (GitHub)

Objective

Plugins used by the project:

Mpvue-entry: Centralized page configuration, automatically generate the entry file of each page, optimize the directory structure, support the new page hot update. (GitHub)

Mpvue-router-patch: Use Vue-router-compatible routing notation in Mpvue. (GitHub)

How do I configure the use of a third-party UI component library in Mpvue?

(PS: This article uses the iview Weapp example)

1. Clone the third-party component library from GitHub to local;

2. Copy the Dist folder in Iview-weapp (where I renamed iview to differentiate) into the output directory of the Mpvue project (the default is dist, the compiled Vue code is here);

In the iview directory, all components

3. Open the Router/routes.js in the Mpvue project and write the appropriate configuration where you want to use the component

4. Using components in the Vue page

5. The effect is as follows

Specific examples:

Use: Search This section is implemented using the applet input component, in the following example, focus and bindinput two attributes are used, since Mpvue supports vue.js syntax and building tools system from the bottom, So you can use Vue's V-model for two-way data binding, as in the following example:

?

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465 6667686970717273747576777879808182838485868788

<template> <div class="page"> <div class="page__hd">  <div class="page__title">SearchBar</div>  <div class="page__desc">搜索栏</div> </div> <div class="page__bd">  <div class="weui-search-bar">  <div class="weui-search-bar__form">   <div class="weui-search-bar__box">   <icon class="weui-icon-search_in-box" type="search" size="14"></icon>   <input type="text" class="weui-search-bar__input" placeholder="搜索" v-model="inputVal" :focus="inputShowed" @input="inputTyping" />   <div class="weui-icon-clear" v-if="inputVal.length > 0" @click="clearInput">    <icon type="clear" size="14"></icon>   </div>   </div>   <label class="weui-search-bar__label" :hidden="inputShowed" @click="showInput">   <icon class="weui-icon-search" type="search" size="14"></icon>   <div class="weui-search-bar__text">搜索</div>   </label>  </div>  <div class="weui-search-bar__cancel-btn" :hidden="!inputShowed" @click="hideInput">取消</div>  </div>  <div class="weui-cells searchbar-result" v-if="inputVal.length > 0">  <navigator url="" class="weui-cell" hover-class="weui-cell_active">   <div class="weui-cell__bd">   <div>实时搜索文本</div>   </div>  </navigator>  <navigator url="" class="weui-cell" hover-class="weui-cell_active">   <div class="weui-cell__bd">   <div>实时搜索文本</div>   </div>  </navigator>  <navigator url="" class="weui-cell" hover-class="weui-cell_active">   <div class="weui-cell__bd">   <div>实时搜索文本</div>   </div>  </navigator>  <navigator url="" class="weui-cell" hover-class="weui-cell_active">   <div class="weui-cell__bd">   <div>实时搜索文本</div>   </div>  </navigator>  </div> </div> </div></template><script>export default { data() { return {  inputShowed: false,  inputVal: "" } }, methods: { showInput() {  this.inputShowed = true; }, hideInput() {  this.inputVal = ‘‘;  this.inputShowed = false }, clearInput() {  this.inputVal = ‘‘; }, inputTyping(e) {  console.log(e);  this.inputVal = e.mp.detail.value } }}</script><style scoped>.searchbar-result { margin-top: 0; font-size: 14px;}.searchbar-result:before { display: none;}.weui-cell { padding: 12px 15px 12px 35px;}</style>

Effect:

Ways to use third-party UI component libraries in Mpvue projects