1. vantintroduce

Vant – a lightweight, reliable library of Vue applets on mobile. Developed and maintained by Youzan Company. Provides a series of beautiful, high-quality mobile components. Vant website

2. How to use it in ordinary small programvantcomponent

Before using

Make sure that you have studied the app’s mini programs and custom components before using Vant retry

The installation

Method 1. Install using NPM (recommended)

Applets already support using NPM to install third-party packages, see NPM support

# npm
npm i vant-weapp -S --production

# yarn
yarn add vant-weapp --production
Copy the code
Method two: download the code

Download the source code for Vant Pervasive P directly through Git, and copy the dist or lib directories to your own projects

git clone https://github.com/youzan/vant-weapp.git
Copy the code

Using the component

In the case of a button component, you just need to import the custom component corresponding to the button into the JSON file

Some applets require that the ES6 to ES5 option be turned off. You can import ES5 versions of components in the lib directory

es6

"usingComponents": {
  "van-button": "/path/to/vant-weapp/dist/button/index"
}
Copy the code

es5

"usingComponents": {
  "van-button": "/path/to/vant-weapp/lib/button/index"
}
Copy the code

You can then use components directly in WXML

<van-button type="primary"> button < / van - button >Copy the code
Preview the sample applet in developer tools
Install project dependencies
npm install

Perform component compilation
npm run dev
Copy the code

Use 3.mpvue

Mpvue (see Github address) is a front-end framework for developing applets using vue.js. The framework is based on vue. js core, and MPvue modifies the runtime and Compiler implementation of vue. js to enable it to run in the environment of small programs, thus introducing a whole set of vue. js development experience for small program development.

Initialize onempvueproject

If vuE-CLI is not installed, install vue-CLI first

 npm install --global vue-cli
Copy the code
Create ampvue-quickstartTemplate for the new project
 vue init mpvue/mpvue-quickstart my-project
Copy the code
Install dependencies
cd my-project

# npm
npm install
npm run dev

#yarn
yarn
yarn start
Copy the code

In 4.mpvueIn the use ofless

downloadlessTo the project
npm install less less-loader --save
Copy the code
The importloader

Add a rule to webpack.base.conf.js rules

{
    test: /.less$/,
    loader: "style-loader! css-loader! less-loader"
},
Copy the code

inmpvueIn the use ofaxios

axiosintroduce

Axios is an easy-to-use, concise, and efficient HTTP library that uses Promise to manage asynchrony, moving away from the traditional callback approach and supporting advanced features such as interceptors

The installationaxios
# npm
npm install axios
# yarn
yarn add axios
Copy the code
useaxios
import axios from 'axios'

function get (url,params) {
  return axios({
    method:'get',
    url:url,
    params:params
  })
}
function post (url,params) {
  return axios({
    method:'post',
    url:url,
    data:params
  })
}
Copy the code
foraxiosConfiguring interceptors
// Axios interceptorfunction Instance() {/ / request interceptor axios. Interceptors. Request. Use (function ( request ) {
    // request.headers.token = 'token=11124654654687'; // console.log(request) // The request succeededreturn request
  }, function( error ) { // console.log(error); // The request failedreturnPromise.reject(error); }); / / add the response interceptor axios. Interceptors. Response. Use (function(response) {console.log(response.data.data) // The response succeededreturn response;
  }, function( error ) { // console.log(error); // The response failedreturn Promise.reject(error);
  });
}
Copy the code
axiosConfigure the request function
axios.defaults.timeout = 30000;
axios.defaults.headers.post[ 'Content-Type' ] = 'application/x-www-form-urlencoded; charset=UTF-8';
axios.defaults.adapter = function (config) {
  return new Promise((resolve, reject) => {
    // console.log(config,'adapter')
    let data = config.method === 'get'? Config.params: qs.stringify(config.data) // wx applet initiates a request accordinglylogWx. request({url:config.url, method:config.method, data:data, success (res)=>{wx.request({url:config.url, method:config.method, data:data, success (res)=>{return resolve(res)},
      fail:(err)=>{return reject(err)}
    })
  })
}
Copy the code

In 5.mpvueIn the configurationeslint

For esLint configuration, go to the Webpack project to create code specifications using ESLint

Pay attention to the front end of the public account