H5 引入vue、vant组件开发

文章目录

一、定义初始架构

web-vue
	--images			// 放置静态图片
	--js				// js文件
		--common		// 引入公共js文件
		--http.js		// 封装的axios请求
	--style				// css文件
		--common		// 引入公共css文件
	--web.html			// 主页面

在这里插入图片描述

公共资源下载

提供本人下载的公共js、css；跳转网盘直接 普通下载 即可

https://url09.ctfile.com/f/36780409-581356137-404684?p=9873（访问密码：9873）

二、引入vue

vue官网： https://cn.vuejs.org/v2/guide/installation.html
CDN引入 vue.min.js

<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
  <title>check</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="apple-mobile-web-app-capable" content="yes">

 <!-- 自定义css -->
 <link rel="stylesheet" href="style/web.css">
</head>

<body>
  <div id="app">
  </div>
  
  <script src="js/common/vue.min.js"></script>
 	   <!-- 自定义js -->
  <script src="js/http.js"></script>
  <script src="js/web.js"></script>
</body>
</html>

// web.js
new Vue({
    
    
  el: '#app',
  data() {
    
    
    return {
    
    
			header: ''
    }
  },
  computed:{
    
     },
  mounted(){
    
    
    this.setHeaderData()
  },
  methods:{
    
    
    // 请求头数据
    setHeaderData(){
    
    
    	 this.header = 3
    }
  }
})

三、引入axios

官方网站：http://www.axios-js.com/zh-cn/docs/
CDN引入 axios.min.js

  <script src="js/common/axios.min.js"></script>

// http.js

// 基础路径
const BaseUrl = 'http://***.com/'
// 创建axios
const service = axios.create({
    
    
  timeout: 50000 // 请求超时时间
})

/**
 * get请求
 */
function get(url, header){
    
    
  return request(url, 'get', header, null)
}
/**
 * post 请求
 */
function post(url, header, data){
    
    
  return request(url, 'post', header, data)
}


function request(url, method, header, data){
    
    
  return new Promise((resolve, rej)  => {
    
    
    service({
    
    
      url: BaseUrl + url,
      method: method,
      headers:{
    
    
        // 自定义header
      },
      data: data
    }).then(res => {
    
    
      resolve(res.data)
    }).catch(err => {
    
    
      console.log('err', err)
      rej(err)
    })
  })
}

//  取url问号后参数
/**
*  http://localhost:9000/static?location='上海'  
*  name传入location  返回'上海'
*/
function getQueryString(name) {
    
     
  var temp = window.location.href.split('?')[1];
  var pram = new URLSearchParams('?'+temp);
  return pram.get(name);
}

四、引入vant

引入的vue2.0版本，所以需要引入对应的vant2版本。
官网： https://vant-contrib.gitee.io/vant/v2/#/zh-CN/quickstart
通过CDN引入

<!-- 引入样式文件 -->
 <link rel="stylesheet" href="style/index.css">
<!-- 引入 Vue 和 Vant 的 JS 文件 -->
 <script src="js/common/vant.min.js"></script>

// web.js
new Vue({
    
    
  el: '#app',
  mounted(){
    
    
  	// h5使用vant组件时有些需要加vant.前缀
    vant.Toast('提示')
  }
})

五、其他

1. md5.js

使用md5进行加密

  <!-- CDN引入 -->
  <script src="js/common/md5.min.js"></script>

// md5()方法直接使用
const md = md5('hhhh' + 333)

2.适配移动端开发 flexible + rem

CDN引入flexible.js flexible.css

  <link rel="stylesheet" href="style/flexible.css">
  <script src="js/common/flexible.js"></script>

按照设计稿宽为750px

html body{
    
    
  /* 因为1em=75px，所以10em=750px */
  width: 10rem;
  max-width: 750px;
}

vscode 有一个 px 转换为 rem 的插件。
在这里插入图片描述我们需要按照设计稿进行尺寸设置，还需要进行 px 到 rem 的换算
css中默认悬停转换 px换算完的rem数值

3.CSS3 @media 查询

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。

@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。

/* 弹框适配尺寸 */
// 大于360以上背景使用此颜色
@media only screen and (min-width: 360px){
    
    
  .reward_info{
    
    
    background-color: red;
  }
}
// 大于750以上背景使用此颜色
@media only screen and (min-width: 750px) {
    
    
  .reward_info{
    
    
    background-color: blue;
  }
}
// 大于820以上背景使用此颜色
@media only screen and (min-width: 820px) {
    
    
  .reward_info{
    
    
    background-color: green;
  }
}

六、实例

1.签到

在这里插入图片描述

链接：https://download.csdn.net/download/Peanutfight/87383979