開箱即用 vue全家桶+vant移動端解決方案

作者：花花小仙女

轉發鏈接：https://mp.weixin.qq.com/s/c9uAYkWJu-zvKfELh_3V0A

前言

基于 vue-cli4.0+webpack 4+vant ui + sass+ rem 適配方案+axIOS 封裝，構建手機端模板腳手架，開箱即用，讓開發變得更簡單。

先夸一下自己，收到了很多人的好評。這次好好整理一文，你們的鼓勵就是我前進的動力。

github：https://github.com/sunniejs/vue-h5-template

Node 版本要求

Vue CLI它需要 Node.js 8.9 或更高版本 (推薦 8.11.0+)。你可以使用 nvm 或nvm-windows 在同一臺電腦中管理多個 Node 版本。

本示例 Node.js 12.14.1

啟動項目

git clone https://github.com/sunniejs/vue-h5-template.git

cd vue-h5-template

npm install

npm run serve

√ Vue-cli4
√ 配置多環境變量
√ rem 適配方案
√ VantUI 組件按需加載
√ Sass 全局樣式
√ Vuex 狀態管理
√ Axios 封裝及接口管理
√ Vue-router
√ Webpack 4 vue.config.js 基礎配置
√ 配置 proxy 跨域
√ 配置 alias 別名
√ 配置打包分析
√ 配置 externals 引入 cdn 資源
√ 去掉 console.log
√ splitChunks 單獨打包第三方模塊
√ 添加 IE 兼容
√ Eslint+Pettier 統一開發規范

? 配置多環境變量

package.json 里的 scripts 配置 serve stage build，通過 --mode xxx 來執行不同環境

通過 npm run serve 啟動本地 , 執行 development
通過 npm run stage 打包測試 , 執行 staging
通過 npm run build 打包正式 , 執行 production

"scripts": {
  "serve": "vue-cli-service serve --open",
  "stage": "vue-cli-service build --mode staging",
  "build": "vue-cli-service build",
}

配置介紹

以 VUE_App_ 開頭的變量，在代碼中可以通過 process.env.VUE_APP_ 訪問。比如,VUE_APP_ENV = 'development' 通過process.env.VUE_APP_ENV 訪問。除了 VUE_APP_* 變量之外，在你的應用代碼中始終可用的還有兩個特殊的變量NODE_ENV 和BASE_URL

在項目根目錄中新建.env.*

.env.development 本地開發環境配置

NODE_ENV='development'
# must start with VUE_APP_
VUE_APP_ENV = 'development'

.env.staging 測試環境配置

NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'staging'

.env.production 正式環境配置

 NODE_ENV='production'
# must start with VUE_APP_
VUE_APP_ENV = 'production'

這里我們并沒有定義很多變量，只定義了基礎的 VUE_APP_ENV development staging production變量我們統一在 src/config/env.*.js 里進行管理。

這里有個問題，既然這里有了根據不同環境設置變量的文件，為什么還要去 config 下新建三個對應的文件呢？修改起來方便，不需要重啟項目，符合開發習慣。

config/index.js

// 根據環境引入不同配置 process.env.NODE_ENV
const config = require('./env.' + process.env.VUE_APP_ENV)
module.exports = config

配置對應環境的變量，拿本地環境文件 env.development.js 舉例，用戶可以根據需求修改

// 本地環境配置
module.exports = {
  title: 'vue-h5-template',
  baseUrl: 'http://localhost:9018', // 項目地址
  baseApi: 'https://test.xxx.com/api', // 本地api請求地址
  APPID: 'xxx',
  APPSECRET: 'xxx'
}

根據環境不同，變量就會不同了

// 根據環境不同引入不同baseApi地址
import {baseApi} from '@/config'
console.log(baseApi)

? rem 適配方案

不用擔心，項目已經配置好了 rem 適配, 下免僅做介紹：

Vant 中的樣式默認使用px作為單位，如果需要使用rem單位，推薦使用以下兩個工具:

postcss-pxtorem 是一款 postcss 插件，用于將單位轉化為 rem
lib-flexible 用于設置 rem 基準值

PostCSS 配置

下面提供了一份基本的 postcss 配置，可以在此配置的基礎上根據項目需求進行修改

// https://github.com/michael-ciniawsky/postcss-load-config
module.exports = {
  plugins: {
    autoprefixer: {
      overrideBrowserslist: ['Android 4.1', 'iOS 7.1', 'Chrome > 31', 'ff > 31', 'ie >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

更多詳細信息：vant

新手必看，老鳥跳過

很多小伙伴會問我，適配的問題。

我們知道 1rem 等于html 根元素設定的 font-size 的 px 值。Vant UI 設置 rootValue: 37.5,你可以看到在 iphone 6 下看到（1rem 等于 37.5px）：

<html data-dpr="1" style="font-size: 37.5px;"></html>

切換不同的機型，根元素可能會有不同的font-size。當你寫 css px 樣式時，會被程序換算成 rem 達到適配。

因為我們用了 Vant 的組件，需要按照 rootValue: 37.5 來寫樣式。

舉個例子：設計給了你一張 750px * 1334px 圖片，在 iPhone6 上鋪滿屏幕,其他機型適配。

當rootValue: 70 , 樣式 width: 750px;height: 1334px; 圖片會撐滿 iPhone6 屏幕，這個時候切換其他機型，圖片也會跟著撐滿。
當rootValue: 37.5 的時候，樣式 width: 375px;height: 667px; 圖片會撐滿 iPhone6 屏幕。

也就是 iphone 6 下 375px 寬度寫 CSS。其他的你就可以根據你設計圖，去寫對應的樣式就可以了。

當然，想要撐滿屏幕你可以使用 100%，這里只是舉例說明。

<img class="image" src="https://imgs.solui.cn/weapp/logo.png" />

<style>  /* rootValue: 75 */
  .image {
    width: 750px;
    height: 1334px;
  }
  /* rootValue: 37.5 */
  .image {
    width: 375px;
    height: 667px;
  }</style>

? VantUI 組件按需加載

項目采用 Vant 自動按需引入組件 (推薦) 下面安裝插件介紹：

babel-plugin-import 是一款 babel 插件，它會在編譯過程中將import 的寫法自動轉換為按需引入的方式

安裝插件

npm i babel-plugin-import -D

在babel.config.js 設置

// 對于使用 babel7 的用戶，可以在 babel.config.js 中配置
const plugins = [
  [
    'import',
    {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    },
    'vant'
  ]
]
module.exports = {
  presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'usage', corejs: 3}]],
  plugins
}

使用組件

項目在 src/plugins/vant.js 下統一管理組件，用哪個引入哪個，無需在頁面里重復引用

// 按需全局引入 vant組件
import Vue from 'vue'
import {Button, List, Cell, Tabbar, TabbarItem} from 'vant'
Vue.use(Button)
Vue.use(Cell)
Vue.use(List)
Vue.use(Tabbar).use(TabbarItem)

? Sass 全局樣式

首先你可能會遇到 node-sass 安裝不成功，別放棄多試幾次！！！

目錄結構，在 src/assets/css/文件夾下包含了三個文件

├── assets
│   ├── css
│   │   ├── index.scss               # 全局通用樣式
│   │   ├── mixin.scss               # 全局mixin
│   │   └── variables.scss           # 全局變量

每個頁面自己對應的樣式都寫在自己的 .vue 文件之中

<style lang="scss">  /* global styles */</style>

<style lang="scss" scoped>  /* local styles */</style>

vue.config.js 配置注入 sass 的 mixin variables 到全局，不需要手動引入 ,配置$cdn通過變量形式引入 cdn 地址

const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)
const defaultSettings = require('./src/config/index.js')
module.exports = {
  css: {
    extract: IS_PROD,
    sourceMap: false,
    loaderOptions: {
      scss: {
        // 注入 `sass` 的 `mixin` `variables` 到全局, $cdn可以配置圖片cdn
        // 詳情: https://cli.vuejs.org/guide/css.html#passing-options-to-pre-processor-loaders
        prependData: `
          @import "assets/css/mixin.scss";
          @import "assets/css/variables.scss";
          $cdn: "${defaultSettings.$cdn}";
          `
      }
    }
  }
}

在 main.js 中引用全局樣式（發現在上面的，prependData 里設置@import "assets/css/index.scss";并沒有應用全局樣式這里在 main.js 引入）

設置 js 中可以訪問 $cdn,.vue 文件中使用this.$cdn訪問

// 引入全局樣式
import '@/assets/css/index.scss'

// 設置 js中可以訪問 $cdn
// 引入cdn
import {$cdn} from '@/config'
Vue.prototype.$cdn = $cdn

在 css 和 js 使用

<script>  console.log(this.$cdn)</script>
<style lang="scss" scoped>  .logo {
    width: 120px;
    height: 120px;
    background: url($cdn+'/weapp/logo.png') center / contain no-repeat;
  }</style>

? Vuex 狀態管理

目錄結構

├── store
│   ├── modules
│   │   └── app.js
│   ├── index.js
│   ├── getters.js

main.js 引入

import Vue from 'vue'
import App from './App.vue'
import store from './store'
new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})

使用

<script>  import {mapGetters} from 'vuex'
  export default {
    computed: {
      ...mapGetters(['userName'])
    },

    methods: {
      // Action 通過 store.dispatch 方法觸發
      doDispatch() {
        this.$store.dispatch('setUserName', '真乖，趕緊關注公眾號，組織都在等你~')
      }
    }
  }</script>

? Vue-router

本案例采用 hash 模式，開發者根據需求修改 mode base

注意：如果你使用了 history 模式，vue.config.js 中的 publicPath 要做對應的修改

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)
export const router = [
  {
    path: '/',
    name: 'index',
    component: () => import('@/views/home/index'), // 路由懶加載
    meta: {
      title: '首頁', // 頁面標題
      keepAlive: false // keep-alive 標識
    }
  }
]
const createRouter = () =>
  new Router({
    // mode: 'history', // 如果你是 history模式 需要配置 vue.config.js publicPath
    // base: '/app/',
    scrollBehavior: () => ({y: 0}),
    routes: router
  })

export default createRouter()

更多:Vue Router

? Axios 封裝及接口管理

utils/request.js 封裝 axios ,開發者需要根據后臺接口做修改。

service.interceptors.request.use 里可以設置請求頭，比如設置 token
config.hideloading 是在 api 文件夾下的接口參數里設置，下文會講
service.interceptors.response.use 里可以對接口返回數據處理，比如 401 刪除本地信息，重新登錄

import axios from 'axios'
import store from '@/store'
import {Toast} from 'vant'
// 根據環境不同引入不同api地址
import {baseApi} from '@/config'
// create an axios instance
const service = axios.create({
  baseURL: baseApi, // url = base api url + request url
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

// request 攔截器 request interceptor
service.interceptors.request.use(
  config => {
    // 不傳遞默認開啟loading
    if (!config.hideloading) {
      // loading
      Toast.loading({
        forbidClick: true
      })
    }
    if (store.getters.token) {
      config.headers['X-Token'] = ''
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)
// respone攔截器
service.interceptors.response.use(
  response => {
    Toast.clear()
    const res = response.data
    if (res.status && res.status !== 200) {
      // 登錄超時,重新登錄
      if (res.status === 401) {
        store.dispatch('FedLogOut').then(() => {
          location.reload()
        })
      }
      return Promise.reject(res || 'error')
    } else {
      return Promise.resolve(res)
    }
  },
  error => {
    Toast.clear()
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)
export default service

接口管理

在src/api 文件夾下統一管理接口

你可以建立多個模塊對接接口, 比如 home.js 里是首頁的接口這里講解user.js
url 接口地址，請求的時候會拼接上 config 下的 baseApi
method 請求方法
data 請求參數 qs.stringify(params) 是對數據系列化操作
hideloading 默認 false,設置為 true 后，不顯示 loading ui 交互中有些接口不需要讓用戶感知

import qs from 'qs'
// axios
import request from '@/utils/request'
//user api

// 用戶信息
export function getUserInfo(params) {
  return request({
    url: '/user/userinfo',
    method: 'get',
    data: qs.stringify(params),
    hideloading: true // 隱藏 loading 組件
  })
}

如何調用

// 請求接口
import {getUserInfo} from '@/api/user.js'

const params = {user: 'sunnie'}
getUserInfo(params)
  .then(() => {})
  .catch(() => {})

? Webpack 4 vue.config.js 基礎配置

如果你的 Vue Router 模式是 hash

publicPath: './',

如果你的 Vue Router 模式是 history 這里的 publicPath 和你的 Vue Routerbase 保持一直

publicPath: '/app/',

const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)

module.exports = {
  publicPath: './', // 署應用包時的基本 URL。vue-router hash 模式使用
  //  publicPath: '/app/', // 署應用包時的基本 URL。  vue-router history模式使用
  outputDir: 'dist', //  生產環境構建文件的目錄
  assetsDir: 'static', //  outputDir的靜態資源(js、css、img、fonts)目錄
  lintOnSave: false,
  productionSourceMap: false, // 如果你不需要生產環境的 source map，可以將其設置為 false 以加速生產環境構建。
  devServer: {
    port: 9020, // 端口號
    open: false, // 啟動后打開瀏覽器
    overlay: {
      //  當出現編譯器錯誤或警告時，在瀏覽器中顯示全屏覆蓋層
      warnings: false,
      errors: true
    }
    // ...
  }
}

? 配置 proxy 跨域

如果你的項目需要跨域設置，你需要打開 vue.config.js proxy 注釋并且配置相應參數

注意：你還需要將 src/config/env.development.js 里的 baseApi 設置成 '/'

module.exports = {
  devServer: {
    // ....
    proxy: {
      //配置跨域
      '/api': {
        target: 'https://test.xxx.com', // 接口的域名
        // ws: true, // 是否啟用websockets
        changOrigin: true, // 開啟代理，在本地創建一個虛擬服務端
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  }
}

使用例如: src/api/home.js

export function getUserInfo(params) {
  return request({
    url: '/api/userinfo',
    method: 'get',
    data: qs.stringify(params)
  })
}

? 配置 alias 別名

const path = require('path')
const resolve = dir => path.join(__dirname, dir)
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)

module.exports = {
  chainWebpack: config => {
    // 添加別名
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('api', resolve('src/api'))
      .set('views', resolve('src/views'))
      .set('components', resolve('src/components'))
  }
}

? 配置打包分析

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
  chainWebpack: config => {
    // 打包分析
    if (IS_PROD) {
      config.plugin('webpack-report').use(BundleAnalyzerPlugin, [
        {
          analyzerMode: 'static'
        }
      ])
    }
  }
}

npm run build

? 配置 externals 引入 cdn 資源

這個版本 CDN 不再引入，我測試了一下使用引入 CDN 和不使用,不使用會比使用時間少。網上不少文章測試 CDN 速度快，這個開發者可以實際測試一下。

另外項目中使用的是公共 CDN 不穩定，域名解析也是需要時間的（如果你要使用請盡量使用同一個域名）

因為頁面每次遇到<script>標簽都會停下來解析執行，所以應該盡可能減少<script>標簽的數量 HTTP請求存在一定的開銷，100K 的文件比 5 個 20K 的文件下載的更快，所以較少腳本數量也是很有必要的

暫時還沒有研究放到自己的 cdn 服務器上。

const defaultSettings = require('./src/config/index.js')
const name = defaultSettings.title || 'vue mobile template'
const IS_PROD = ['production', 'prod'].includes(process.env.NODE_ENV)

// externals
const externals = {
  vue: 'Vue',
  'vue-router': 'VueRouter',
  vuex: 'Vuex',
  vant: 'vant',
  axios: 'axios'
}
// CDN外鏈，會插入到index.html中
const cdn = {
  // 開發環境
  dev: {
    css: [],
    js: []
  },
  // 生產環境
  build: {
    css: ['https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.css'],
    js: [
      'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js',
      'https://cdn.jsdelivr.net/npm/vue-router@3.1.5/dist/vue-router.min.js',
      'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js',
      'https://cdn.jsdelivr.net/npm/vuex@3.1.2/dist/vuex.min.js',
      'https://cdn.jsdelivr.net/npm/vant@2.4.7/lib/index.min.js'
    ]
  }
}
module.exports = {
  configureWebpack: config => {
    config.name = name
    // 為生產環境修改配置...
    if (IS_PROD) {
      // externals
      config.externals = externals
    }
  },
  chainWebpack: config => {
    /**
     * 添加CDN參數到htmlWebpackPlugin配置中
     */
    config.plugin('html').tap(args => {
      if (IS_PROD) {
        args[0].cdn = cdn.build
      } else {
        args[0].cdn = cdn.dev
      }
      return args
    })
  }
}

在 public/index.html 中添加

    <!-- 使用CDN的CSS文件 -->
    <% for (var i in
      htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.css) { %>
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
    <% } %>
     <!-- 使用CDN加速的JS文件，配置在vue.config.js下 -->
    <% for (var i in
      htmlWebpackPlugin.options.cdn&&htmlWebpackPlugin.options.cdn.js) { %>
      <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>

? 去掉 console.log

保留了測試環境和本地環境的 console.log

npm i -D babel-plugin-transform-remove-console

在 babel.config.js 中配置

// 獲取 VUE_APP_ENV 非 NODE_ENV，測試環境依然 console
const IS_PROD = ['production', 'prod'].includes(process.env.VUE_APP_ENV)
const plugins = [
  [
    'import',
    {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    },
    'vant'
  ]
]
// 去除 console.log
if (IS_PROD) {
  plugins.push('transform-remove-console')
}

module.exports = {
  presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'entry'}]],
  plugins
}

? splitChunks 單獨打包第三方模塊

module.exports = {
  chainWebpack: config => {
    config.when(IS_PROD, config => {
      config
        .plugin('ScriptExtHtmlWebpackPlugin')
        .after('html')
        .use('script-ext-html-webpack-plugin', [
          {
            // 將 runtime 作為內聯引入不單獨存在
            inline: /runtime..*.js$/
          }
        ])
        .end()
      config.optimization.splitChunks({
        chunks: 'all',
        cacheGroups: {
          // cacheGroups 下可以可以配置多個組，每個組根據test設置條件，符合test條件的模塊
          commons: {
            name: 'chunk-commons',
            test: resolve('src/components'),
            minChunks: 3, //  被至少用三次以上打包分離
            priority: 5, // 優先級
            reuseExistingChunk: true // 表示是否使用已有的 chunk，如果為 true 則表示如果當前的 chunk 包含的模塊已經被抽取出去了，那么將不會重新生成新的。
          },
          node_vendors: {
            name: 'chunk-libs',
            chunks: 'initial', // 只打包初始時依賴的第三方
            test: /[\/]node_modules[\/]/,
            priority: 10
          },
          vantUI: {
            name: 'chunk-vantUI', // 單獨將 vantUI 拆包
            priority: 20, // 數字大權重到，滿足多個 cacheGroups 的條件時候分到權重高的
            test: /[\/]node_modules[\/]_?vant(.*)/
          }
        }
      })
      config.optimization.runtimeChunk('single')
    })
  }
}

? 添加 IE 兼容

之前的方式會報 @babel/polyfill is deprecated. Please, use required parts of core-js andregenerator-runtime/runtime separately

@babel/polyfill 廢棄，使用 core-js 和 regenerator-runtime

npm i --save core-js regenerator-runtime

在 main.js 中添加

// 兼容 IE
// https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#babelpolyfill
import 'core-js/stable'
import 'regenerator-runtime/runtime'

配置 babel.config.js

const plugins = []

module.exports = {
  presets: [['@vue/cli-plugin-babel/preset', {useBuiltIns: 'usage', corejs: 3}]],
  plugins
}

? Eslint+Pettier 統一開發規范

該文件 .prettierrc 里寫屬于你的 pettier 規則

{
   "printWidth": 120,
   "tabWidth": 2,
   "singleQuote": true,
   "trailingComma": "none",
   "semi": false,
   "wrap_line_length": 120,
   "wrap_attributes": "auto",
   "proseWrap": "always",
   "arrowParens": "avoid",
   "bracketSpacing": false,
   "jsxBracketSameLine": true,
   "useTabs": false,
   "overrides": [{
       "files": ".prettierrc",
       "options": {
           "parser": "json"
       }
   }]
}

鳴謝

vue-cli4-config： https://github.com/staven630/vue-cli4-config

vue-element-admin：https://github.com/PanJiaChen/vue-element-admin

mdnice：https://mdnice.com

作者：花花小仙女

轉發鏈接：https://mp.weixin.qq.com/s/c9uAYkWJu-zvKfELh_3V0A

日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

開箱即用 vue全家桶+vant移動端解決方案前言Node 版本要求啟動項目目錄? 配置多環境變量配置介紹? rem 適配方案PostCSS 配置? VantUI 組件按需加載安裝插件使用組件? Sa

前言

Node 版本要求

啟動項目

目錄

? 配置多環境變量

配置介紹

? rem 適配方案

PostCSS 配置

? VantUI 組件按需加載

安裝插件

使用組件

? Sass 全局樣式

? Vuex 狀態管理

? Vue-router

? Axios 封裝及接口管理

接口管理

如何調用

? Webpack 4 vue.config.js 基礎配置

? 配置 proxy 跨域

? 配置 alias 別名

? 配置打包分析

? 配置 externals 引入 cdn 資源

? 去掉 console.log

? splitChunks 單獨打包第三方模塊

? 添加 IE 兼容

? Eslint+Pettier 統一開發規范

鳴謝

數獨大挑戰2018-06-03

答題星2018-06-03

全階人生考試2018-06-03

運動步數有氧達人2018-06-03

每日養生app2018-06-03

體育訓練成績評定2018-06-03

日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

開箱即用 vue全家桶+vant移動端解決方案前言Node 版本要求啟動項目目錄? 配置多環境變量配置介紹? rem 適配方案PostCSS 配置? VantUI 組件按需加載安裝插件使用組件? Sa

前言

Node 版本要求

啟動項目

目錄

? 配置多環境變量

配置介紹

? rem 適配方案

PostCSS 配置

? VantUI 組件按需加載

安裝插件

使用組件

? Sass 全局樣式

? Vuex 狀態管理

? Vue-router

? Axios 封裝及接口管理

接口管理

如何調用

? Webpack 4 vue.config.js 基礎配置

? 配置 proxy 跨域

? 配置 alias 別名

? 配置 打包分析

? 配置 externals 引入 cdn 資源

? 去掉 console.log

? splitChunks 單獨打包第三方模塊

? 添加 IE 兼容

? Eslint+Pettier 統一開發規范

鳴謝

數獨大挑戰2018-06-03

答題星2018-06-03

全階人生考試2018-06-03

運動步數有氧達人2018-06-03

每日養生app2018-06-03

體育訓練成績評定2018-06-03

? 配置打包分析