簡介

vue-mobile 是是基於 vue-cli 實現的移動端 H5 開發模板，其中已經搭建好基本的開發框架，可幫助您實現快速開發。 技術棧：vue + vux + axios + less

原始碼地址：https://github.com/Michael-lzg/vue-mobile

功能

• 搭建專案目錄
• 配置 css 前處理器
• 配置 UI 元件庫 vux
• 解決移動端適配
• 配置頁面路由快取
• axios 請求封裝
• 工具類函式封裝
• toast 元件封裝
• dialog 元件封裝
• 底部導航元件封裝
• 列表頁 demo
• 表單頁 demo
• 搭建專案目錄

按如下檔案目錄搭建專案框架

src                主要原始碼目錄
|-- assets            靜態資源，統一管理
|-- components          公用元件，全域性元件
|-- javascript          JS相關操作處理
  |-- ajax           axios封裝的請求攔截
  |-- utils           全域性封裝的工具類
  |-- datas           模擬資料，臨時存放
|-- router            路由，統一管理
|-- store             vuex,統一管理
|-- views             檢視目錄

配置 css 前處理器

1.安裝依賴

npm install less less-loader --sava-dev

2.在 build/webpack.base.conf.js 裡參照如下程式碼進行配置

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

配置 vux

1.安裝依賴

npm install vux vux-loader --save

2.在 build/webpack.base.conf.js 裡參照如下程式碼進行配置

const vuxLoader = require('vux-loader') //把vux-loader引入
module.exports = vuxLoader.merge(webpackConfig,{
 //把新舊配置進行merge（放到頁面最底部）
 plugins: ['vux-ui']
})

3.區域性註冊使用

<group>
 <cell title="title" value="value" />
</group>

import { Group,Cell } from 'vux' //引入所需元件
export default {
 name: 'App',components: {
  //註冊元件
  Group,Cell
 }
}

移動端適配

1.安裝依賴

npm install px2rem-loader --save-dev

2.在 build/utils 進行如下配置

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

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

 if (loader) {
  loaders.push({
   loader: loader + '-loader',options: Object.assign({},loaderOptions,{
    sourceMap: options.sourceMap
   })
  })
 }

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

3.在 main.js 設定 html 跟字型大小

let cale = window.screen.availWidth > 750 ? 2 : window.screen.availWidth / 375
window.document.documentElement.style.fontSize = `${100 * cale}px`

這是最簡單的適配方法，後續跟單獨對移動端 rem 適配做詳細解讀。

路由配置

1.通過配置路由物件的 meta[keepAlive]值來區分頁面是否需要快取

routes: [
 {
  path: '/',name: 'index',meta: { keepAlive: true },//需要快取
  component: resolve => {
   require(['../views/index'],resolve)
  }
 },{
  path: '/list',name: 'listr',meta: { keepAlive: false },//不需要快取
  component: resolve => {
   require(['../views/list'],resolve)
  }
 }
]

2.在 app.vue 做快取判斷

<div id="app">
 <router-view v-if="!$route.meta.keepAlive"></router-view>
 <keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
 </keep-alive>
</div>

axios 請求封裝

1.設定請求攔截和響應攔截

const PRODUCT_URL = 'https://xxxx.com'
const MOCK_URL = 'http://xxxx.com'
let http = axios.create({
 baseURL: process.env.NODE_ENV === 'production' ? PRODUCT_URL : MOCK_URL
})
// 請求攔截器
http.interceptors.request.use(
 config => {
  // 設定token，Content-Type
  var token = sessionStorage.getItem('UserLoginToken')
  config.headers['token'] = token
  config.headers['Content-Type'] = 'application/json;charset=UTF-8'
  // 請求顯示loading效果
  if (config.loading === true) {
   vm.$loading.show()
  }
  return config
 },error => {
  vm.$loading.hide()
  return Promise.reject(error)
 }
)
// 響應攔截器
http.interceptors.response.use(
 res => {
  vm.$loading.hide()
  // token失效，重新登入
  if (res.data.code === 401) {
   // 重新登入
  }
  return res
 },error => {
  vm.$loading.hide()
  return Promise.reject(error)
 }
)

2.封裝 get 和 post 請求方法

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,loading) {
 return new Promise((resolve,reject) => {
  http
   .post(url,{ loading: loading })
   .then(
    response => {
     resolve(response)
    },err => {
     reject(err)
    }
   )
   .catch(error => {
    reject(error)
   })
 })
}

export { get,post }

3.把 get，post 方法掛載到 vue 例項上。

// main.js
import { get,post } from './js/ajax'
Vue.prototype.$http = { get,post }
工具類函式封裝
新增方法到 vue 例項的原型鏈上
export default {
 install (Vue,options) {
  Vue.prototype.util = {
   method1(val) {
    ...
   },method2 (val) {
    ...
   },}
}

2.在 main.js 通過 vue.use()註冊

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。