利用vue-cli + vant搭建一個移動端開發模板

本文系原創，轉載請附帶做者信息。項目地址： https://github.com/momozjm/vant-project.git

前言

在項目開發過程當中，一個新的項目須要咱們從零開始搭建框架，這個時候咱們就能夠用網上不少的腳手架進行開發，可是咱們在業務開發時，還須要對項目的架構進行完善。若是有一個相似於ant design pro這種類型的項目能夠拿來即用，不須要過多的配置，就能夠進行開發的話，豈不是美滋滋。

因此說爲了便於後期的快速開發，我決定利用vue-cli+vant來打造一個移動端開發的模板，後期進行迭代，完善功能。

項目功能模塊（不斷更新中...）

項目代碼

整個項目的腳手架是用vue-cli生成的，具體的生成方式能夠本身網上查閱。下面我就簡單介紹一下項目中添加了哪些功能模塊

1、rem的適配

使用postcss-pxtorem與flexable.js結合的形式，適配各種機型。此配置是以2倍屏的基礎來配置的，也就是說你的設計圖也是以2倍屏設計的，這樣設計圖上的px值是多少你就能夠直接拷過來，省去了px轉rem的換算。

1：postcss-pxtorem的配置：在vue.config.js中添加以下代碼(須要本身新建vue.config.js文件)

css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 37.5, // 換算的基數
            propList: ['*'],
          }),
        ]
      }
    }
  }

2：flexable.js。文件路徑src>utils>flexable.js(我通常把項目須要的公共方法或者配置放在utils文件夾下)

!function (n) {
    var e = n.document,
        t = e.documentElement,
        i = 750,
        d = i / 100,
        o = "orientationchange" in n ? "orientationchange" : "resize",
        a = function () {
            var n = t.clientWidth || 320; n > 750 && (n = 750);
            t.style.fontSize = n / d + "px"
        };
    e.addEventListener && (n.addEventListener(o, a, !1), e.addEventListener("DOMContentLoaded", a, !1))
}(window)

3:在main.js中引入flexable.js

import '@/utils/flexable'

2、axios請求封裝

1：request.js。文件路徑src>utils>request.js

import axios from 'axios'

// 建立 axios 實例
const service = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL, // api base_url
  timeout: 6000 // 請求超時時間
})

const err = (error) => {
  if (error.response) {
    if (error.response.status !== 200) {
      console.log(error)
      return
    }
  }
  return Promise.reject(error)
}

// request interceptor
service.interceptors.request.use(config => {
  // const token = 'token'
  // if (token) {
  //   config.headers['Access-Token'] = token // 讓每一個請求攜帶自定義 token 請根據實際狀況自行修改
  // }
  return config
}, err)

// response interceptor
service.interceptors.response.use((response) => {
  return response.data
}, err)


export {
  service as axios
}

3、vuex

在views下新建了一個About.vue。在此組件中走了一遍異步獲取數據的流程（接口是亂寫的，報404）。大體流程爲：頁面觸發action ---> action中異步回去數據並commit一個mutations ---> mutations中修改state裏的值 ---> 視圖更新

1:About.vue

<template>
  <div class="about">
    <Button type="primary" @click="getDetail" id="detail">點擊調用接口獲取詳情</Button>
    <router-link to="/">Home</router-link>
    <router-link to="/scroll">Scroll</router-link>
  </div>
</template>
<script>
import { mapState, mapActions } from "vuex";
import { Button } from "vant";
export default {
  computed: {
    ...mapState("about", ["detail"])
  },
  created() {
    // this.getDetail();
  },
  methods: {
    ...mapActions("about", ["getDetail"])
  },
  components: {
    Button
  }
};
</script>
<style lang="less">
.about {
  height: 100vh;
  font-size: 14px;
}
#detail {
  font-size: 14px;
}
</style>

2：index.js。文件文職@>store>index.js

import Vue from 'vue'
import Vuex from 'vuex'
import about from './modules/about'
// import scroll from './modules/scroll'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    about,
    // scroll
  },
})

3：about.js。文件位置@>store>modules>about.js

import { getDetailApi } from '@/api/api'

const state = {
  detail: {}
}

const mutations = {
  setDetail: (state, data) => {
    state = {
      ...state,
      detail: data
    }
  }
}

const actions = {
  getDetail({ commit }) {
    getDetailApi().then(res => {
      commit('setDetail', res)
    })
  },
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

4:api.js。 文件位置@>api>api.js

import { axios } from '@/utils/request'

const api = {
  // 獲取詳情
  detail: '/detail'
}

export function getDetailApi(parameter) {
  console.log(parameter)
  return axios({
    url: api.detail,
    method: 'get'
  })
}

// export function getDetail() {
//   return axios({
//     url: api.detail,
//     method: 'post',
//     data: {}
//   })
// }

4、Vant

新建一個頁面添加了下拉刷新和上拉加載功能。後續會以組件的形式再封裝一些經常使用的功能。

Vant沒有在main.js裏全局註冊，而是使用動態引入的方式。根目錄新建.babelrc

{
    "plugins": [
      ["import", {
        "libraryName": "vant",
        "libraryDirectory": "es",
        "style": true
      }]
    ]
  }

5、webpack配置

vue-cli3之後生成的項目，修改webpack都要在項目根目錄新建一個vue.config.js來修改你的配置

module.exports = {
  lintOnSave: true,
  // 生產環境打包資源路徑
  publicPath: '/',
  outputDir: "dist",
  assetsDir: "static",
  // postcss-pxtorem配置
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 37.5, // 換算的基數
            propList: ['*'],
          }),
        ]
      }
    }
  },
  // 代理
  devServer: {
    // development server port 8000
    // port: 8000,
    // // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
    // proxy: {
    //   "/api": {
    //     // target: "http://xx.xx.xx.xx:xxxx/",
    //     changeOrigin: true,
    //     pathRewrite: {
    //       '^/api': '/'
    //     }
    //   }
    // }
  },
  // 生產環境去掉sourceMap
  productionSourceMap: false,
}

總結

這個框架只具有開發vue + vant的基本功能，整體上的目標算是達到了，後續也會迭代添加一些組件或者功能。整個過程當中算是對本身架構能力進行一些鍛鍊。

感謝你的閱讀，若有修改或者建議的地方，歡迎提出哦。