H5 引入vue、vant组件开发_html-js-css

文章目录一、定义初始架构公共资源下载二、引入vue三、引入axios四、引入vant五、其他1. md5.js2.适配移动端开发 flexible + rem3.CSS3 @media 查询

一、定义初始架构

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>checktitle>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="apple-mobile-web-app-capable" content="yes">

 
 <link rel="stylesheet" href="style/web.css">
head>

<body>
  <div id="app">
  div>
  
  <script src="js/common/vue.min.js">script>
 	   
  <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">

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

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

五、其他 1. md5.js

使用md5进行加密

  
  <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 是非常有用的。

/* d框适配尺寸 */
// 大于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;
  }
}

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1296905.html

H5 引入vue、vant组件开发

发表评论

评论列表（0条）