詳解搭建一個(gè)vue-cli的移動(dòng)端H5開(kāi)發(fā)模板
更新時(shí)間：2020年01月17日 08:56:13 作者：michael
這篇文章主要介紹了詳解搭建一個(gè)vue-cli的移動(dòng)端H5開(kāi)發(fā)模板，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
簡(jiǎn)介
vue-mobile 是是基于 vue-cli 實(shí)現(xiàn)的移動(dòng)端 H5 開(kāi)發(fā)模板，其中已經(jīng)搭建好基本的開(kāi)發(fā)框架，可幫助您實(shí)現(xiàn)快速開(kāi)發(fā)。 技術(shù)棧：vue + vux + axios + less
源碼地址：https://github.com/Michael-lzg/vue-mobile
功能
- 搭建項(xiàng)目目錄
- 配置 css 預(yù)處理器
- 配置 UI 組件庫(kù) vux
- 解決移動(dòng)端適配
- 配置頁(yè)面路由緩存
- axios 請(qǐng)求封裝
- 工具類函數(shù)封裝
- toast 組件封裝
- dialog 組件封裝
- 底部導(dǎo)航組件封裝
- 列表頁(yè) demo
- 表單頁(yè) demo
- 搭建項(xiàng)目目錄
按如下文件目錄搭建項(xiàng)目框架
src 主要源碼目錄 |-- assets 靜態(tài)資源，統(tǒng)一管理 |-- components 公用組件，全局組件 |-- javascript JS相關(guān)操作處理 |-- ajax axios封裝的請(qǐng)求攔截 |-- utils 全局封裝的工具類 |-- datas 模擬數(shù)據(jù)，臨時(shí)存放 |-- router 路由，統(tǒng)一管理 |-- store vuex, 統(tǒng)一管理 |-- views 視圖目錄
配置 css 預(yù)處理器
1.安裝依賴
npm install less less-loader --sava-dev
2.在 build/webpack.base.conf.js 里參照如下代碼進(jìn)行配置
{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader"
}
配置 vux
1.安裝依賴
npm install vux vux-loader --save
2.在 build/webpack.base.conf.js 里參照如下代碼進(jìn)行配置
const vuxLoader = require('vux-loader') //把vux-loader引入
module.exports = vuxLoader.merge(webpackConfig, {
//把新舊配置進(jìn)行merge（放到頁(yè)面最底部）
plugins: ['vux-ui']
})
3.局部注冊(cè)使用
<group>
<cell title="title" value="value" />
</group>
import { Group, Cell } from 'vux' //引入所需組件
export default {
name: 'App',
components: {
//注冊(cè)組件
Group,
Cell
}
}
移動(dòng)端適配
1.安裝依賴
npm install px2rem-loader --save-dev
2.在 build/utils 進(jìn)行如下配置
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`
這是最簡(jiǎn)單的適配方法，后續(xù)跟單獨(dú)對(duì)移動(dòng)端 rem 適配做詳細(xì)解讀。
路由配置
1.通過(guò)配置路由對(duì)象的 meta[keepAlive]值來(lái)區(qū)分頁(yè)面是否需要緩存
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 請(qǐng)求封裝
1.設(shè)置請(qǐng)求攔截和響應(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
})
// 請(qǐng)求攔截器
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'
// 請(qǐng)求顯示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 請(qǐng)求方法
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 實(shí)例上。
// main.js
import { get, post } from './js/ajax'
Vue.prototype.$http = { get, post }
工具類函數(shù)封裝
添加方法到 vue 實(shí)例的原型鏈上
export default {
install (Vue, options) {
Vue.prototype.util = {
method1(val) {
...
},
method2 (val) {
...
},
}
}
2.在 main.js 通過(guò) vue.use()注冊(cè)
import utils from './js/utils' Vue.use(utils)
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue頁(yè)面中使用getElementsByClassName無(wú)法獲取元素的解決
這篇文章主要介紹了vue頁(yè)面中使用getElementsByClassName無(wú)法獲取元素的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue中向data添加新屬性的三種方式小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue項(xiàng)目中使用vue-layer彈框插件的方法
這篇文章主要介紹了vue項(xiàng)目中使用vue-layer彈框插件的方法，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03
本篇文章主要介紹了vue一步步實(shí)現(xiàn)alert功能，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
詳解基于Vue2.0實(shí)現(xiàn)的移動(dòng)端彈窗(Alert, Confirm, Toast)組件
這篇文章主要介紹了詳解基于Vue2.0實(shí)現(xiàn)的移動(dòng)端彈窗(Alert, Confirm, Toast)組件，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue 通過(guò)公共字段,拼接兩個(gè)對(duì)象數(shù)組的實(shí)例
今天小編就為大家分享一篇Vue 通過(guò)公共字段,拼接兩個(gè)對(duì)象數(shù)組的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
這篇文章主要為大家詳細(xì)介紹了Vuex實(shí)現(xiàn)記事本功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
代號(hào)為Naruto的Vue?2.7正式發(fā)布功能詳解
這篇文章主要為大家介紹了代號(hào)為Naruto的Vue?2.7正式發(fā)布功能詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
下面小編就為大家分享一篇Vue2 模板template的四種寫法總結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue實(shí)現(xiàn)動(dòng)態(tài)表格提交參數(shù)動(dòng)態(tài)生成控件的操作
這篇文章主要介紹了vue實(shí)現(xiàn)動(dòng)態(tài)表格提交參數(shù)動(dòng)態(tài)生成控件的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11