H5移动端开发
开发前准备
环境:
Node.js LTS版本
git 最新版
文档:
本项目技术栈基于
快速开始
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 // 主页面
新增页面
- 新增了页面
pages/abc/index.vue
- 然后在
router/index.js
中新增路由:
{ path: '/abc', //父页面路径 component: Layout, //父页面继承layout组件 children: [ { path: 'index', //子页面路径 name: 'abc', component: ()=>import('@/pages/adc/index'), //子页面组件 meta: { title: 'abc',column:'1'} } ] }
页面跳转
- 使用
<router-link>
标签,比如我们想从列表页跳到详情页面:<router-link to="/shownews/index"></router-link>
,只需在to
处填写详情页面路由的path
即可。 - 元素绑定
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)
相关推荐
-
看一眼就学会的 HTML 小游戏搭建! html5
2019-5-11
-
基于HTML5 WebGL实现 json工控风机叶轮旋转 html5
2020-6-22
-
H5与App的通讯方式 html5
2019-10-30
-
解决 canvas 将图片转为base64报错: Uncaught DOMException: Failed to execute ‘toDataURL’ on ‘HTMLCanvasElement’: Tainted canvases may not be exported html5
2019-3-9
-
【腾讯bugly干货分享】HTML 5 视频直播一站式扫盲 html5
2020-6-22
-
移动端 h5 照片的处理 html5
2019-3-9
-
关于响应式布局,你必须要知道的 html5
2018-11-5
-
10 个你不知道你需要的 HTML 元素 html5
2019-5-11
-
基于HTML5 Canvas 实现矢量工控风机叶轮旋转 html5
2020-6-22
-
HTML5 进阶系列:拖放 API 实现拖放排序 html5
2017-12-11