詳解搭建一個vue-cli的移動端H5開發(fā)模板
更新時間：2020年01月17日 08:56:13 作者：michael
這篇文章主要介紹了詳解搭建一個vue-cli的移動端H5開發(fā)模板，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
簡介
vue-mobile 是是基于 vue-cli 實現(xiàn)的移動端 H5 開發(fā)模板，其中已經(jīng)搭建好基本的開發(fā)框架，可幫助您實現(xiàn)快速開發(fā)。 技術(shù)棧：vue + vux + axios + less
源碼地址：https://github.com/Michael-lzg/vue-mobile
功能
- 搭建項目目錄
- 配置 css 預處理器
- 配置 UI 組件庫 vux
- 解決移動端適配
- 配置頁面路由緩存
- axios 請求封裝
- 工具類函數(shù)封裝
- toast 組件封裝
- dialog 組件封裝
- 底部導航組件封裝
- 列表頁 demo
- 表單頁 demo
- 搭建項目目錄
按如下文件目錄搭建項目框架
src 主要源碼目錄 |-- assets 靜態(tài)資源，統(tǒng)一管理 |-- components 公用組件，全局組件 |-- javascript JS相關(guān)操作處理 |-- ajax axios封裝的請求攔截 |-- utils 全局封裝的工具類 |-- datas 模擬數(shù)據(jù)，臨時存放 |-- router 路由，統(tǒng)一管理 |-- store vuex, 統(tǒng)一管理 |-- 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 設(shè)置 html 跟字體大小
let cale = window.screen.availWidth > 750 ? 2 : window.screen.availWidth / 375
window.document.documentElement.style.fontSize = `${100 * cale}px`
這是最簡單的適配方法，后續(xù)跟單獨對移動端 rem 適配做詳細解讀。
路由配置
1.通過配置路由對象的 meta[keepAlive]值來區(qū)分頁面是否需要緩存
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.設(shè)置請求攔截和響應(yīng)攔截
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 => {
// 設(shè)置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)
}
)
// 響應(yīng)攔截器
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, 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 }
3.把 get，post 方法掛載到 vue 實例上。
// main.js
import { get, post } from './js/ajax'
Vue.prototype.$http = { get, post }
工具類函數(shù)封裝
添加方法到 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)
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue頁面中使用getElementsByClassName無法獲取元素的解決
這篇文章主要介紹了vue頁面中使用getElementsByClassName無法獲取元素的解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue中向data添加新屬性的三種方式小結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue項目中使用vue-layer彈框插件的方法，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03
本篇文章主要介紹了vue一步步實現(xiàn)alert功能，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
詳解基于Vue2.0實現(xiàn)的移動端彈窗(Alert, Confirm, Toast)組件
這篇文章主要介紹了詳解基于Vue2.0實現(xiàn)的移動端彈窗(Alert, Confirm, Toast)組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
今天小編就為大家分享一篇Vue 通過公共字段,拼接兩個對象數(shù)組的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要為大家詳細介紹了Vuex實現(xiàn)記事本功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要為大家介紹了代號為Naruto的Vue?2.7正式發(fā)布功能詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
下面小編就為大家分享一篇Vue2 模板template的四種寫法總結(jié)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
vue實現(xiàn)動態(tài)表格提交參數(shù)動態(tài)生成控件的操作
這篇文章主要介紹了vue實現(xiàn)動態(tài)表格提交參數(shù)動態(tài)生成控件的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11