怎么搭建一個(gè)vue-cli的移動(dòng)端H5開發(fā)模板
小編給大家分享一下怎么搭建一個(gè)vue-cli的移動(dòng)端H5開發(fā)模板，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
專注于為中小企業(yè)提供成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)河北免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了上千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
簡(jiǎn)介
vue-mobile 是是基于 vue-cli 實(shí)現(xiàn)的移動(dòng)端 H5 開發(fā)模板，其中已經(jīng)搭建好基本的開發(fā)框架，可幫助您實(shí)現(xiàn)快速開發(fā)。 技術(shù)棧：vue + vux + axios + less
源碼地址：https://github.com/Michael-lzg/vue-mobile
功能
搭建項(xiàng)目目錄
配置 css 預(yù)處理器
配置 UI 組件庫 vux
解決移動(dòng)端適配
配置頁面路由緩存
axios 請(qǐng)求封裝
工具類函數(shù)封裝
toast 組件封裝
dialog 組件封裝
底部導(dǎo)航組件封裝
列表頁 demo
表單頁 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（放到頁面最底部）
plugins: ['vux-ui']
})3.局部注冊(cè)使用
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.通過配置路由對(duì)象的 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 做緩存判斷
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 通過 vue.use()注冊(cè)
import utils from './js/utils'
Vue.use(utils)
看完了這篇文章，相信你對(duì)“怎么搭建一個(gè)vue-cli的移動(dòng)端H5開發(fā)模板”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
標(biāo)題名稱：怎么搭建一個(gè)vue-cli的移動(dòng)端H5開發(fā)模板
本文來源：
http://weahome.cn/article/ghssdp.html
重慶分公司
重慶分公司
