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)