Detailed explanation of building a vue-cli mobile H5 development template

Introduction

vue-mobile is a mobile H5 development template based on vue-cli. The basic development framework has been built to help you achieve rapid development. Technology stack: vue + vux + axios + less

Source code address:/Michael-lzg/vue-mobile

Function

Build a project catalog
Configure the css preprocessor
Configure UI Component Library vux
Solve mobile adaptation
Configure page routing cache
axios request encapsulation
Tool-class function encapsulation
toast component packaging
dialog component encapsulation
Bottom navigation component packaging
List page demo
Form page demo
Build a project catalog

Build the project framework as follows file directory

src                Main source code directory
|-- assets            Static resources，Unified management
|-- components          Common Components，Global Components
|-- javascript          JSRelated operation processing
  |-- ajax           axiosEncapsulated request interception
  |-- utils           Globally encapsulated tool classes
  |-- datas           Simulate data，Temporary storage
|-- router            routing，Unified management
|-- store             vuex, Unified management
|-- views             View Directory

Configure the css preprocessor

1. Installation dependencies

npm install less less-loader --sava-dev

2. In build/, refer to the following code to configure it

{
 test: /\.less$/,
 loader: "style-loader!css-loader!less-loader"
}

Configure vux

1. Installation dependencies

npm install vux vux-loader --save

2. In build/, refer to the following code to configure it

const vuxLoader = require('vux-loader') //Introduce vux-loader into = (webpackConfig, {
 //Comge the new and old configurations (put them at the bottom of the page) plugins: ['vux-ui']
})

3. Local registration and use

&lt;group&gt;
 &lt;cell title="title" value="value" /&gt;
&lt;/group&gt;

import { Group, Cell } from 'vux' //Introduce required componentsexport default {
 name: 'App',
 components: {
  //Register component  Group,
  Cell
 }
}

Mobile adaptation

1. Installation dependencies

npm install px2rem-loader --save-dev

2. Configure the following in build/utils

const px2remLoader = {
 loader: 'px2rem-loader',
 options: {
  remUnit: 100
 }
}

function generateLoaders(loader, loaderOptions) {
 const loaders =  ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

 if (loader) {
  ({
   loader: loader + '-loader',
   options: ({}, loaderOptions, {
    sourceMap: 
   })
  })
 }

 // Extract CSS when that option is specified
 // (which is the case during production build)
 if () {
  return ({
   use: loaders,
   fallback: 'vue-style-loader'
  })
 } else {
  return ['vue-style-loader'].concat(loaders)
 }
}

3. Set html and font size in

let cale =  > 750 ? 2 :  / 375
 = `${100 * cale}px`

This is the easiest adaptation method, and the subsequent detailed explanation of the mobile rem adaptation is made separately.

Routing configuration

1. Distinguish whether the page needs to be cached by configuring the meta[keepAlive] value of the routing object.

routes: [
 {
  path: '/',
  name: 'index',
  meta: { keepAlive: true }, //Cache required  component: resolve =&gt; {
   require(['../views/index'], resolve)
  }
 },
 {
  path: '/list',
  name: 'listr',
  meta: { keepAlive: false }, //No need for cache  component: resolve =&gt; {
   require(['../views/list'], resolve)
  }
 }
]

2. Make cache judgment

<div >
 <router-view v-if="!$"></router-view>
 <keep-alive>
  <router-view v-if="$"></router-view>
 </keep-alive>
</div>

axios request encapsulation

1. Set request interception and response interception

const PRODUCT_URL = ''
const MOCK_URL = ''
let http = ({
 baseURL: .NODE_ENV === 'production' ? PRODUCT_URL : MOCK_URL
})
// Request an interceptor(
 config =&gt; {
  // Set token, Content-Type  var token = ('UserLoginToken')
  ['token'] = token
  ['Content-Type'] = 'application/json;charset=UTF-8'
  // Request to display loading effect  if ( === true) {
   vm.$()
  }
  return config
 },
 error =&gt; {
  vm.$()
  return (error)
 }
)
// Response Interceptor(
 res =&gt; {
  vm.$()
  // Token is invalid, log in again  if ( === 401) {
   // Log in again  }
  return res
 },
 error =&gt; {
  vm.$()
  return (error)
 }
)

2. Encapsulate the get and post request methods

function get(url, data, lodaing) {
 return new Promise((resolve, reject) => {
  http
   .get(url)
   .then(
    response => {
     resolve(response)
    },
    err => {
     reject(err)
    }
   )
   .catch(error => {
    reject(error)
   })
 })
}

function post(url, data, loading) {
 return new Promise((resolve, reject) => {
  http
   .post(url, data, { loading: loading })
   .then(
    response => {
     resolve(response)
    },
    err => {
     reject(err)
    }
   )
   .catch(error => {
    reject(error)
   })
 })
}

export { get, post }

3. Mount the get and post methods on the vue instance.

// 
import { get, post } from './js/ajax'
.$http = { get, post }
Tool-class function encapsulation
Add method to vue On the prototype chain of the instance
export default {
 install (Vue, options) {
   = {
   method1(val) {
    ...
   },
   method2 (val) {
    ...
   },
 }
}

2. Register through ()

import utils from './js/utils'
(utils)

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.