Mobile Vue project Build (ii) configuration environment Vue-router routing Vux UI framework Axios request Wait ~ ~

First of all, the configuration environment plug-in for this project, because it is the mobile side, so a part of the consideration is the mobile side:

Routing Vue-router Routing

Routing is a very important thing in the Vue project, and when it's built, it's a good choice.

Ui Framework Vux

• The UI framework integrates the Vux
• Vux Mobile UI Component library developed based on Weui and Vue (2.x), mainly serving the page
• Official website:https://vux.li/#/

What is the UI library network, see what you are the development environment choose what kind of, before the PC side when I chose element is hungry UI framework, very useful, because this is the public number of development so selected Vux

Style

　Less

Less Less-loader can compile less source code

Style I choose less, also can choose SASS Online there are a lot of tutorials to search the installed

Yaml-loader

If you encounter a voice file, you can read the language file

Fastclick

Mobile-click Delay 300- second processing

There is a 300s problem with the click Delay on the mobile side, this is mainly to deal with this problem

Send Request

After Vue has been updated to 2.0, Vue-resource is no longer updated, and the solid items pick Axios send the request.

concurrent requests, interceptor processing is also used with the Axios interceptor, here's a simple example, see Baidu for details on how to use

Axios How to use

Eg: Send a Get request

Axios.get ('/user ', {

params:{

id:12345

}

})

. Then (function (response) {

Console.log (response);

})

. catch (function (err) {

Console.log (ERR);

});

Mobile page self-adapting

Mobile is the most important is self-adaptation, with this convenient many

• Px2remloader Usage
• directly write px, after compiling will be converted directly to rem--except for the following two cases, other lengths with this
• Adding/No/ at the back of PX does not convert PX and will be output as-is. -General border needs this
• Adding/px/ at the back of PX will generate three sets of code depending on the DPR. --The general font needs this

　　　　

Eg:

. example{

width:150px;

height:64px; /*px*/

font-size:28px; /*px*/

border:1px solid #ddd; /*no*/

}

• * Write units directly in components write PX and then check in the browser to see the unit is REM

Vuex

Centralized Storage Management , medium and large projects must be used, Important!!!

Waterfall Flow

Vue-waterfall

Because the project needs to be loaded, just in passing.

First write the META tag on the mobile viewport

index.html portal page <meta name= "viewport" content= "width=device-width,initial-scale=1,user-scalable=0" >

The above are introduced, the project inside what is installed, the purpose is what, the following is a step-by-step installation of ~ ~

All CNPM are configured in Package.json, and the dependencies we install are within the node_modules. If you remove Node_modules, then NPM install is based on Package.json inside some to generate node_modules dependency package.

Leave this folder open, download one, and see if there is a successful download.

1.Vux

CNPM Install Vux--save

Like this is no hint, nor error, the explanation is normal! Then look at the Package.json inside there is no increase, such as the installation is OK.

So the usage of the configuration, this article does not speak, next article, this is only about installation.

Followed by

In build/webpack.base.conf.js configuration:

1.const Vuxloader = require (' Vux-loader ')

2. Module.exports Assignment Variable const webpackconfig ={inside the code does not move}

3. Place the following code at the bottom of the page

Module.exports = Vuxloader.merge (Webpackconfig, {
Plugins: [' vux-ui ', ' progress-bar ', ' Duplicate-style ']
})

Installing Vux-loader

Use the command cnpm install vux-loader-d

2.less

cnpm Install less less-loader--save-dev

3.Yaml-loader

CNPM Install Yaml-loader--save-dev

4. Remove the click Delay for 300 seconds

CNPM Install Fastclick--save

Configure inside the main.js

Const Fastclick = require (' Fastclick ')
Fastclick.attach (document.body) //Remove click Delay for 300 seconds

5.Axios

CNPM Install Axios--save

6.lib-flexible.js and REM for mobile-page Adaptive

1. Installing Lib-flexible.js Cnpm Install lib-flexible -save

2. Introduction of lib-flexible in Project portal file Main.jsimport ' lib-flexible '

3. Installing Px2rem-loader

CNPM Install Px2rem-loader --save-dev

4. Configure Px2rem-loader

First locate the Build/utils.js file and add the following configuration to the Utils.js

Const Cssloader = {
Loader: ' Css-loader ',
Options: {
Minimize:process.env.NODE_ENV = = = ' Production ',
SourceMap:options.sourceMap,
importloaders:2//the number of applications loader in Css-loader, the default is 0, if not add @import external CSS files will not be converted to normal, do not take effect to increase the number, must be restarted
}
}

Const Px2remloader = {
Loader: ' Px2rem-loader ',
Options: {
REMUNIT:75//Design draft 1/10, assuming the design is 750px
}
}

Locate the Generateloaders method, which is configured as follows in the function

So the basic configuration is complete, restart the project can use Lib-flexible+rem to write mobile page, directly write PX, browser view will be REM

There are several more next time to write ~ ~ ~

Mobile Vue project Build (ii) configuration environment Vue-router routing Vux UI framework Axios request Wait ~ ~