> 本文系原創，轉載請附帶作者資訊。專案地址： https://github.com/momozjm/vant-project.git ## 前言 在專案開發過程中，一個新的專案需要我們從零開始搭建框架，這個時候我們就可以用網上很多的腳手架進行開發，但是我們在業務開發時，還需要對專案的架構進行完善。如果有一個類似於`ant design pro`這種型別的專案可以拿來即用，不需要過多的配置，就可以進行開發的話，豈不是美滋滋。
所以說為了便於後期的快速開發，我決定利用`vue-cli+vant`來打造一個移動端開發的模板，後期進行迭代，完善功能。 ## 專案功能模組（不斷更新中...）  ## 專案程式碼 整個專案的腳手架是用`vue-cli`生成的，具體的生成方式可以自己網上查閱。下面我就簡單介紹一下專案中添加了哪些功能模組
**一、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' ``` **二、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 } ``` **三、vuex** 在views下新建了一個About.vue。在此元件中走了一遍非同步獲取資料的流程（介面是亂寫的，報404）。大致流程為：頁面觸發action ---> action中非同步回去資料並commit一個mutations ---> mutations中修改state裡的值 ---> 檢視更新 1:About.vue ``` ``` 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: {} // }) // } ``` **四、Vant** 新建一個頁面添加了下拉重新整理和上拉載入功能。後續會以元件的形式再封裝一些常用的功能。 `Vant`沒有在`main.js`裡全域性註冊，而是使用動態引入的方式。根目錄新建`.babelrc` ``` { "plugins": [ ["import", { "libraryName": "vant", "libraryDirectory": "es", "style": true }] ] } ``` **五、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的基本功能，總體上的目標算是達到了，後續也會迭代新增一些元件或者功能。整個過程中算是對自己架構能力進行一些鍛鍊。 感謝你的閱讀，如有修改或者建議的地方，歡迎提