通過vue-cli腳架的搭建,我們得到一個初始化的項目,我們刪除對應不需要的文件,比如裏面的logo,鏈接,hellWord文件,等到一個沒有其他的框架,然後我們就要來搭建項目,怎麼要搭建項目纔可以方便維護和擴展,這裏我們來討論的是APP的目錄,
思路就是幾種
- 根據模塊來劃分,比如一般的APP都有首頁,個人中心,產品,登錄,等等模塊,可以按照大模塊來劃分
- 根據功能來劃分,比如登錄裏面包含註冊,找回密碼; 綁定信息裏面包含修改,增加,刪除,查看
- 根據導航來劃分,比如側邊欄,tabbar欄,樓層欄等等
- 根據需求來劃分,比如登錄交互需求,產品交互需求,信息交互需求等等
這裏我們按照常規的APP,tabbar頁面->tabbar頁面->對應的子頁面這樣的項目需求來構建項目
第一步:根據tabbar搭建對應的目錄,這裏我們就做兩級目錄,剩下的頁面不創建目錄,直接創建頁面
這裏的tabbar有五個,所以我們對應的要在腳架的scr目錄下的components創建對應的文件夾以及對應的VUE文件,以及一個入口文件,這個入口文件是做一下邏輯操作處理,比如校驗token,判斷跳轉等待;
配置路由
import Vue from 'vue'
import Router from 'vue-router'
import home from '@/components/home/hone';
import index from '@/components/index/index';
import store from '@/components/store/store';
import ore from '@/components/ore/ore';
import mine from '@/components/mine/mine';
import transaction from '@/components/transaction/transaction';
Vue.use(Router)
export default new Router({
routes: [{
path: '/',
name: 'index',
component: index,
children: [{
path: 'home',
name: 'home',
component: home,
},
{
path: 'store',
name: 'store',
component: store
},
{
path: 'ore',
name: 'ore',
component: ore
},
{
path: 'transaction',
name: 'transaction',
component: transaction
},
{
path: 'mine',
name: 'mine',
component: mine
}
]
},
]
})
寫個tabbar,填充,因爲是APP,所以用到REM,這裏我們配置一下 px2rem
老規矩 引入對應的依賴,這裏的依賴是
lib-flexible
px2rem-loader
//命令
npm i lib-flexible px2rem-loader --save-dev
找到目錄下面的build->utils.js文件,添加下面三個
exports.cssLoaders = function(options) {
options = options || {}
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap,
importLoaders: 1 //在css-loader前應用的loader的數目,默認爲0.
//如果不加這個 @import的外部css文件將不能正常轉換
//如果不行 請試着調大數字
//更改後必須調大數字 否則無效
}
}
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 37.5 //設計稿的1/10 ,我們假設設計稿是350px
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
// generate loader string to be used with extract text plugin
function generateLoaders(loader, loaderOptions) {
// const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader]
const loaders = options.usePostCSS ? [cssLoader, postcssLoader,] : [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)
}
}
這裏有個坑,因爲項目同時引入了sass和px2rem,而項目會先編譯sass,把裏面的註釋給過濾後,再通過px2rem進行轉換,這就會造成原來不想要編譯成rem的也會被編譯成,/*no*/,/*px*/不生效,而有個寫法讓PX還是PX.就是不要編譯的像素寫成大寫的,這樣就不會被編譯,比如px寫成PX,不過這樣的話,px2rem幫我們轉換dpf模式的三套代碼就也不生效了,暫時找不到方法,歡迎大家給思路或者有辦法可以告訴我
迴歸正傳,寫首頁的tabbar,配合路由,實現tabbar功能
<template>
<div>
<router-view></router-view>
<div class="tab">
<div class="tab-item" v-for="(item,index) in tab" :key="index">
<router-link :to="item.url">
<img class="icon" :src="item.icon" alt="" >
<p>{{item.title}}</p>
</router-link>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tab: [
{
icon: require('../../assets/tabbar/home.png'),
icon_select : require('../../assets/tabbar/home_selected.png'),
title: '首頁',
url : '/home',
},
{
icon: require('../../assets/tabbar/store.png'),
icon_select : require('../../assets/tabbar/store_selected.png'),
title: '商家',
url : 'store',
},
{
icon: require('../../assets/tabbar/ore.png'),
icon_select : require('../../assets/tabbar/ore_selected.png'),
title: '礦池',
url : 'ore',
},
{
icon: require('../../assets/tabbar/transaction.png'),
icon_select : require('../../assets/tabbar/transaction_selected.png'),
title: '交易',
url : 'transaction',
},
{
icon: require('../../assets/tabbar/mine.png'),
icon_select : require('../../assets/tabbar/mine_selected.png'),
title: '我的',
url : 'mine',
}
]
}
}
}
</script>
<style scoped lang="scss">
.tab {
width: 100vw;
height: 98px;
position: fixed;
bottom: 0;
right: 0;
left: 0;
display: flex;
background: #143258;
.tab-item {
flex: 1;
a{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 20px;
color: #fff;
.icon{
width: 33px;
height: 33px;
margin-bottom: 10px;
}
}
}
}
</style>
這裏有個問題要注意 就是圖片引入 如果寫在data裏面必須通過require纔可以拿到圖片 不然是加載不出來的
剩下的內容就自己去補充和填充,這裏就不多介紹了
歡迎大家來補充和糾正