转自：https://www.jspang.com/detailed?id=61#toc288
转载技术胖博客知识点作为笔记
- 1.rem适配方案，现在比较主流的移动端web适配方案。 三行JS代码完成适配：
- 2.编写后台服务接口配置文件
- 3.使用插件调试get,post请求（类似postman功能）
- 4.利用VSCode的vue VSCode Snippets插件来来写vue的模板如下：
- 5页面很大的时候，我们作的移动适配方案会呈现很大的字体，这不是我们想要的。所以加一个判断，解决页面字体过大的问题。 在 index.html的script里加入判断页面的语句。
- 6正确引入图片 *
- 7 引入 vue-awesome-swiper 的两种方式
- 8.watch用法大家也要掌握好，在需要等待数据时，非常好用。
- 9.toFixed() 方法可把 Number 四舍五入为指定小数位数的数字
1.rem适配方案，现在比较主流的移动端web适配方案。 三行JS代码完成适配：
//得到手机屏幕的宽度
let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
//得到html的Dom元素
let htmlDom = document.getElementsByTagName('html')[0];
//设置根元素字体大小
htmlDom.style.fontSize= htmlWidth/20 + 'px';
2.编写后台服务接口配置文件
在开发中我们现在直接把数据接口文件写到了axios中，这样写如果地址改变或者接口改变，我们需要进入业务逻辑代码进行修改，维护起来会非常的麻烦。那这节课我们就把项目中用到的接口都单独拿出来，作一个接口配置文件serviceAPI.config.js。
编写接口配置文件
项目src目录下建立serviceAPI.config.js,然后打开编写如下代码。
const BASEURL = "https://www.easy-mock.com/mock/5ae2eeb23fbbf24d8cd7f0b6/SmileVue/"
const URL = {
getShoppingMallInfo:BASEURL+'index',
getGoodsInfo:BASEURL+'getGoodsInfo'
}
module.exports = URL
编写好后，我们可以直接在要使用的文件中用import的形式引入。
import url from '@/serviceAPI.config.js'
引入后就可以直接使用了。
axios({
url: url.getShoppingMallInfo,
method: 'get',
})
总结：这节课的内容虽然很短，但是这是作配置文件的一种方法，在项目中你想作任何配置文件完全可以使用这节所学的内容。希望小伙伴们可以把这种最基本的方法学会，并应用在工作中。
3.使用插件调试get,post请求（类似postman功能）
到VSCode插件中搜索REST Client,搜索到，点击install进行安装。
REST Client
简单的使用
创建一个 .http文件
你可以在任意你喜欢的地方新建一个接口测试文件，
编写测试接口文件
最简单的方法，就是直接写上请求方式和要请求的地址，例如下面的就可以请求到我博客首页的数据列表。
GET https://apiblog.jspang.com/default/getArticleList
当然你也可以再增加一些内容，让你的请求更标准些。比如加入HTTP传输协议版本，还比如你提交的是一个POST数据表达，你可以要求表达的数据是以json的形式提交，你就可以加入下面的代码。
GET https://apiblog.jspang.com/default/getArticleList HTTP/1.1
content-type: application/json
{
"data":"胖哥是最帅的"
}
发送请求，测试接口
点击Send Request，或者右键选择Send Request,都可以发送请求，如果一切顺利就会得到请求的结果。
4.利用VSCode的vue VSCode Snippets插件来来写vue的模板如下：
<template>
<div>
{
{
msg}}
</div>
</template>
<script>
export default {
data () {
return {
msg: 'Shopping Mall'
}
}
}
</script>
5页面很大的时候，我们作的移动适配方案会呈现很大的字体，这不是我们想要的。所以加一个判断，解决页面字体过大的问题。 在 index.html的script里加入判断页面的语句。
if(htmlWidth>750){
htmlWidth=750}
当页面宽度大于750px时，我们就把页面的宽度设置成750像素。
6正确引入图片 *
有很多小伙伴都在引入图片时摘了跟头，有的是开发时引入错误，有的是开发完成后，build时路径不对了。如果用require引入图片，在不作任何配置的情况下就可以基本解决你的图片路径问题。 先把图片用require引进到页面中：
export default {
data() {
return {
locationIcon: require('../../assets/images/location.png')
}
},
}
然后通过绑定属性的方法插入图片
<van-col span="3"><img :src="locationIcon" width="100%" /></van-col>
这时候进行预览，图片已经正常显示在浏览器中了。
7 引入 vue-awesome-swiper 的两种方式
全局引入
可以直接使用全局引入，引入代码如下：
import Vue from 'vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// require styles
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper, /* { default global options } */)
以组件形式引入
这种方式是在需要的页面以component 的形式引入，好处就是依赖性不强。
import 'swiper/dist/css/swiper.css'
import {
swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
components: {
swiper,
swiperSlide
}
}
8.watch用法大家也要掌握好，在需要等待数据时，非常好用。
由于组件中的数据是从远程拿到的，所以刚开始数据是为空的，所以组件渲染不出来。我们需要加入watch属性来监听传递过来值的变化，当变化时，我们给1，2，3副图片进行赋值操作。 最后根据赋值来改造我们template的html结构。
<template>
<div>
<!--floor one area-->
<div class="floor">
<div class="floor-anomaly">
<div class="floor-one"><img :src="floorData0.image" width="100%" /></div>
<div>
<div class="floor-two"><img :src="floorData1.image" width="100%" /></div>
<div><img :src="floorData2.image" width="100%" /></div>
</div>
</div>
<div class="floor-rule">
<div v-for="(item ,index) in floorData.slice(3)" :key="index">
<img :src="item.image" width="100%"/>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props:['floorData'],
data() {
return {
floorData0:{
},
floorData1:{
},
floorData2:{
}
}
},
created(){
//这里写得不到数据，应为数据是延迟返回的
},
watch:{
floorData:function(val){
console.log(this.floorData)
this.floorData0=this.floorData[0]
this.floorData1=this.floorData[1]
this.floorData2=this.floorData[2]
}
}
}
</script>
<style scoped>
.floor-anomaly{
display: flex;
flex-direction:row;
background-color: #fff;
border-bottom:1px solid #ddd;
}
.floor-anomaly div{
width:10rem;
box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.floor-one{
border-right:1px solid #ddd;
}
.floor-two{
border-bottom:1px solid #ddd;
}
.floor-rule{
display: flex;
flex-direction: row;
flex-wrap:wrap;
background-color: #fff;
}
.floor-rule div{
-webkit-box-sizing: border-box;
box-sizing: border-box;
width:10rem;
border-bottom:1px solid #ddd;
}
.floor-rule div:nth-child(odd){
border-right: 1px solid #ddd;
}
</style>
9.toFixed() 方法可把 Number 四舍五入为指定小数位数的数字
因为过滤器都是需要在很多组建中进行使用的，所以要编写一个比较通用的方法。先在src文件夹下建立一个filter文件夹，然后在filter文件夹下建立一个moneyFilter.js文件。 这时候有可以编写格式化钱的方法，其实很简单，我们这里用了toFixed()方法。
export function toMoney(money){
let newMoney = money;
if(newMoney){
newMoney = newMoney.toFixed(2)
}else{
newMoney=0
newMoney=newMoney.toFixed(2)
}
return newMoney
}
换一种优雅写法：
export function toMoney(money = 0){
return money.toFixed(2)
}