搭建一個vue-cli的移動端H5開發模板

時間 2019-11-29

標籤搭建一個 vue cli 移動 h5 開發模板欄目無線简体版

原文原文鏈接

簡介

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

源碼地址：github.com/Michael-lzg…css

功能

搭建項目目錄
配置 css 預處理器
配置 UI 組件庫 vux
解決移動端適配
配置頁面路由緩存
axios 請求封裝
工具類函數封裝
toast 組件封裝
dialog 組件封裝
底部導航組件封裝
列表頁 demo
表單頁 demo

搭建項目目錄

按以下文件目錄搭建項目框架html

src                               主要源碼目錄
|-- assets                        靜態資源，統一管理
|-- components                    公用組件，全局組件
|-- javascript                    JS相關操做處理
    |-- ajax                      axios封裝的請求攔截
    |-- utils                     全局封裝的工具類
    |-- datas                     模擬數據，臨時存放
|-- router                        路由，統一管理
|-- store                         vuex, 統一管理
|-- views                         視圖目錄
複製代碼

配置 css 預處理器

安裝依賴

npm install less less-loader --sava-dev
複製代碼

在 build/webpack.base.conf.js 裏進行如下配置

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

配置 vux

安裝依賴包

npm install vux vux-loader --save
複製代碼

在 build/webpack.base.conf.js 裏參照以下代碼進行配置

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

局部註冊使用

;<group> <cell title="title" value="value" /> </group> import { Group, Cell } from 'vux' //引入所需組件 export default { name: 'App', components: { //註冊組件 Group, Cell } } 複製代碼

移動端適配

安裝依賴

npm install px2rem-loader --save-dev
複製代碼

在 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)
  }
}
複製代碼

在 main.js 設置 html 跟字體大小

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

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

路由配置

經過配置路由對象的 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)
    }
  }
]
複製代碼

在 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 請求封裝

設置請求攔截和響應攔截

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)
  }
)
複製代碼

封裝 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, 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 }
複製代碼

把 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) {
       ...
      },
  }
}
複製代碼

在 main.js 經過 vue.use()註冊

import utils from './js/utils'
Vue.use(utils)
複製代碼

組件封裝

在開發項目過程當中，一般會用到不少功能和設計相相似的組件，爲了不重複造輪子，咱們常常會用到一些第三方組件，好比 vux，vant。可是這樣會引入太多沒用到的組件，形成打包體積過大。因此咱們有必要封裝一些基礎的組件用於開發。vue

toast 和 dialog 組件封裝 toast 和 dialog 組件基本是每個移動端項目都會用到的，下面我將介紹如何封裝這兩個組件，併發布到 npm 供下載使用。java

必備知識儲備webpack

vue 的基礎知識
Vue.extend 構造器
$mount 手動掛載實例
vue 組件的傳值傳參
理解 Vue 構造函數及 prototype
webpack 打包
npm 基礎知識

最終咱們要達到這樣的效果，從 npm 下載依賴包，直接調用ios

this.$toast({ msg: '手機號碼不能爲空' })

this.$toast({
  msg: '成功提示',
  type: 'success'
})

this.$dialog({
  title: '刪除提示',
  text: '是否肯定刪除此標籤？',
  showCancelBtn: true,
  confirmText: '確認',
  confirm(content) {
    alert('刪除成功')
  }
})
複製代碼