H5移動端開發

開發前準備

環境:

Node.js LTS版本

git 最新版

---

文檔:

本項目技術棧基於

ES2016

VueJS

vux

快速開始

1.克隆項目

    git clone https://gitee.com/Fntys/met_h5.git

2.進入項目

    cd met_h5
    
3.安裝依賴

    npm install
    
4.啓動構建

    npm run dev
    
5.訪問 localhost:9999/#/

Tips ： 若想在手機訪問，請前往 config/index.js下，修改 dev的 host爲本機IP，確保電腦和手機處於同一路由下，訪問該IP便可。

目錄結構

├── build                       //  構建相關
├── config                      //  配置相關
├── dist                        //  打包相關
├── node_modules                //  第三方模塊
├── src                         //  源代碼
│   ├── utils                   //  全局公用方法
│   ├── api                     //  接口方法
│   ├── pages                   //  全部頁面文件 
│   ├── components              //  業務組件 
│   ├── assets                  //  圖片 字體等靜態資源
│   ├── components              //  業務組件 
│   ├── styles                  //  公共樣式文件 
│   ├── icon                    //  SVG圖標文件 
│   ├── router                  //  路由文件 
│   ├── main.js                 //  入口文件 加載組件 初始化等
│   ├── App.vue                 //  入口頁面 
├── static                      //  第三方不打包資源
├── test                        //  測試相關
├── .babelrc                    //  babel-loader 配置
├── .eslintrc.js                //  eslint 配置項
├── .postcssrc.js               //  後處理器
├── .gitignore                  //  git 忽略項
├── index.html                  //  html模板
└── package.json                //  package.json

頁面路由

全局配置

首先，咱們看一下項目的配置文件 /src/main.js 裏面的初始內容以下：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import FastClick from 'fastclick';
import VueRouter from 'vue-router';
import App from './App';
import router from './router'
import './icons' 
import './styles/index.scss'
Vue.use(VueRouter);
/* 全局註冊組件 */
import { Swiper,SwiperItem} from 'vux'
Vue.component('swiper', Swiper)
Vue.component('swiper-item', SwiperItem)
FastClick.attach(document.body);
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
  router,
  render: h => h(App),
}).$mount('#app-box');

這裏咱們引入了：

vue-router                //    Vue官方的路由組件
fastclick                 //    解決移動端點擊300ms延遲的問題
icons                     //    自定義的SVG圖標解決方法
styles/index.scss         //    全局樣式
Swiper,SwiperItem         //    輪播圖組件

路由配置

在router/index.js中，咱們配置了全局路由。

import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/pages/layout/Layout'
Vue.use(Router)
import Layout from '@/pages/layout/Layout'
export const constantRouterMap = [
  {
    path: '/',                                                             //父頁面的路徑
    component: Layout,                                                     //父頁面的組件
    redirect: '/home/index',                                               //父頁面重定向後的路徑
    children: [
      {
        path: '/home/index',                                               //子頁面的路徑
        component: () => import('@/pages/index/index'),                    //子頁面的組件
        meta: { title: '主頁', column: '1' }                               //子頁面的信息
      }
    ]
  }
export default new Router({
  routes: constantRouterMap
})

經過上述代碼咱們配置了一個包含index頁面的首頁路由，繼續向constantRouterMap中添加元素就可配置其餘的頁面的路由。

Tips ： 關於更多路由配置的知識能夠查閱 Vue Router

頁面配置

頁面結構

本項目共有7個頁面，分別爲：

├── pages                            // 頁面文件
│   ├── layout                       //  佈局頁 
│   │   ├──Layout.vue                //  主頁面  
│   │   ├──components                //  組件
│   │   │  ├──AppMain.vue            //  主體內容區域組件
│   │   │  ├──index.js               //  導出組件
│   │   │  ├──MetFooter.vue          //  底部區域組件
│   │   │  ├──MetHeader.vue          //  頭部區域組件
│   ├── about                        //  簡介 
│   │   ├──index.vue                 //  index頁面  
│   ├── index                        //  首頁
│   │   ├──index.vue                 //  主頁面 
│   ├── news                         //  新聞列表頁
│   │   ├──index.vue                 //  主頁面 
│   ├── product                      //  產品列表頁
│   │   ├──index.vue                 //  主頁面 
│   ├── shownews                     //  新聞詳情頁
│   │   ├──index.vue                 //  主頁面
│   ├── showproduct                  //  產品詳情頁
│   │   ├──index.vue                 //  主頁面

新增頁面

1. 新增了頁面pages/abc/index.vue
2. 而後在router/index.js中新增路由：

{
    path: '/abc',                                                        //父頁面路徑
    component: Layout,                                                   //父頁面繼承layout組件
    children: [
      {
        path: 'index',                                                   //子頁面路徑
        name: 'abc',
        component: ()=>import('@/pages/adc/index'),                      //子頁面組件        
        meta: { title: 'abc',column:'1'}
      }
    ]
  }

頁面跳轉

1. 使用<router-link>標籤，好比咱們想從列表頁跳到詳情頁面：<router-link to="/shownews/index"></router-link>，只需在to處填寫詳情頁面路由的path便可。
2. 元素綁定click事件，調用 router.push({...}) 方法。

樣式

樣式編寫採用了 Scss

全局樣式

全局樣式文件存放於/src/styles/中
在/src/main.js中經過import './styles/index.scss'被全局引入

├── styles                             //  公共樣式文件 
│   ├── common.scss                    //  公共樣式 
│   ├── index.scss                     //  全局樣式 
│   ├── mixin.scss                     //  混合器 
│   ├── varable.scss                   //  變量

頁面樣式

因爲頁面大可能是由組件組成，因此一個頁面的樣式被分散到各個組件。如：
src/components/IndexAbout.vue中的

<style lang="scss" scoped>
.index_about {
  .about-img img {
    width: 100%;
    margin-bottom: 20px;
  }
  .about-content p {
    font-size: 13px;
    color: rgb(89, 89, 89);
  }
}
</style>

影響了index頁面的about區塊的樣式。
其中lang="scss"規定編譯器按照何種語法來解釋css語言，這裏咱們是用的scss。
scoped表示它的樣式做用於當下的模塊，很好的實現了樣式私有化的目的，這是一個很是好的機制。

Tips ： 對於高複用的公共組件謹慎使用 scoped屬性

組件

前面咱們說到頁面大多都是組件組成，在src/components/下存放了項目全部組件。

├── components                           //  所有組件 
│   ├── index                            //  首頁組件 
│   │   ├──IndexAbout.vue                //  簡介
│   │   ├──IndexNews.vue                 //  新聞 
│   │   ├──IndexProduct.vue              //  產品 
│   │   ├──IndexService.vue              //  服務 
│   │   ├──index.js                      //  導出組件 
│   ├── inside                           //  內頁組件 
│   │   ├──News.vue                      //  新聞列表
│   │   ├──Product.vue                   //  產品列表 
│   │   ├──ShowNews.vue                  //  新聞詳情頁 
│   │   ├──ShowProduct.vue               //  產品詳情頁 
│   │   ├──index.js                      //  導出組件 
│   ├── common                           //  公共組件 
│   │   ├──Banner.vue                    //  輪播圖 
│   │   ├──Sidebar.vue                   //  側邊欄
│   │   ├──SubcolumnNav.vue              //  二級欄目導航 
│   │   ├──index.js                      //  導出組件

組件新建與引入

1.新建文件，命名採用 PascalCase (駝峯式命名)，如：HelloWorld.vue
2.同時新建index.js文件，將組件暴露出來

export { default as HelloWorld}
from './HelloWorld'

2.在頁面引入你的組件：

import { HelloWorld } from '@/components/xxx/HelloWorld'`  //引入組件
components: {
        HelloWorld                                     //組件註冊
  }

3.在字符串模版中使用<hello-world></hello-world>

Tips ： @是 webpack的 alias，指向 src，目的是讓後續引用的地方減小路徑的複雜度

網絡請求

這裏咱們進行了axios的封裝。
1.在utils/下新建request.js

import axios from 'axios'
import qs from 'qs'
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 30000 // 請求超時時間
})
// request攔截器
service.interceptors.request.use(
  config => {
    if (config.method === 'post') {
      config.data = qs.stringify(config.data)
      config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
    }
    return config
  },
  error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
  }
)
// respone攔截器
service.interceptors.response.use(
  response => {
    if (response.data.status === 401) {
    } else {
      return response
    }
  },
  error => {
    console.log('err' + error) // for debug

    return Promise.reject(error)
  }
)

export default service

2.在api/下的每一個方法中引用

import request from '@/utils/request'
export function getIndexBanner(username) {
    return request({
      url: '/Process/Process/getMemberList',
      method: 'post',
      data: {
        username
      }
    })
  }

3.在其餘地方引入，調用便可

import getIndexBanner from '@/api/index'
getIndexBanner(username)