插件：npm i axios less less-loader vue-router@3 amfe-flexible postcss postcss-pxtorem vant@2
移动端的适配
使用 postcss postcss-pxtorem 这个插件是用来把px转换成rem
使用amfe-flexible 插件兼容不同设备
使用步骤
1.下载这两个插件
2.在mian.js中引入 amfe-flexible，import 'amfe-flexible'
3.在文件根目录下新建postcss.config.js
解决第三方组件库兼容问题
vant组件库的设计稿是按照375px来开发的。因此在viewportWidth为750px时会出现转换问题。
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*'],
}}}
App.vue
<template>
<div id="app">
<!-- 移动端的适配 开发的 手机上打开的页面就是H5 -->
<!-- Vant 是一个轻量、可靠的移动端组件库，于 2017 年开源 -->
<!-- $route当前页面路由信息 -->
<div class="tabbar flex-sp" v-if="!$route.meta.flag">
<div class="tabbar-item flex-column" @click="changeTab(1)">
<img class="img-box" v-if="$route.path=='/index'" src="../src/assets/images/home-selected.png" alt="">
<img class="img-box" v-else src="../src/assets/images/home-unselected.png" alt="">
<div class="title">首页</div>
</div>
<div class="tabbar-item flex-column" @click="changeTab(2)">
<img class="img-box" v-if="$route.path=='/category'" src="../src/assets/images/category-selected.png" alt="">
<img class="img-box" v-else src="../src/assets/images/category-unselected.png" alt="">
<div class="title">分类</div>
</div>
<div class="tabbar-item flex-column" @click="changeTab(3)">
<img class="img-box" v-if="$route.path=='/mine'" src="../src/assets/images/mine-selected.png" alt="">
<img class="img-box" v-else src="../src/assets/images/mine-unselected.png" alt="">
<div class="title">我</div>
</div>
</div>
<!-- <van-button type="primary">主要按钮</van-button> -->
<div id="default_drag_return" @click="topreturn()">
<van-icon name="back-top" />
</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
components: {
},
methods:{
changeTab(type){
let that = this;
if(type==1){
that.$router.push({
path:'/index'
})
}else if(type==2){
that.$router.push({
path:'/category'
})
}else{
let token = localStorage.getItem('token')
if(token){
that.$router.push({
path:'/mine'
})
}else{
that.$router.push({
path:'/login'
})
}
}
},
},
created(){
console.log('this.$route',this.$route);
},
mounted(){
}
}
</script>
<style lang="less" scoped>
#app{
background-color: #f4f4f4;
.tabbar{
position: fixed;
bottom: 0;
left: 0;
z-index: 9;
width: 100%;
height: 50px;
background-color: white;
.tabbar-item{
.img-box{
width: 25px;
height: 25px;
}
}
}
#default_drag_return{
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 25px;
background:rgba(255, 255, 255);
position: fixed;
z-index: 999;
bottom: 70px;
right: 20px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
color:#000000;
}
}
</style>
main.js
// App.vue是根组件
// main.js是入口js文件
// components 存放公共组件（就是以前写官网的头部和底部）
// 所有可执行的命令都在package.json中的scripts中
import Vue from 'vue'
import App from './App.vue'
import { Popup, Toast, Checkbox, CheckboxGroup, Icon, Button, Tab, Tabs, Swipe, SwipeItem ,List, Cell, TreeSelect } from 'vant';
Vue.use(Popup);
Vue.use(Toast);
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Icon);
Vue.use(TreeSelect);
Vue.use(Cell);
Vue.use(Button);
Vue.use(Tab);
Vue.use(Tabs);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(List);
Vue.config.productionTip = false
import 'amfe-flexible'
import router from './router'
import './styles/base.css'
import store from './store';
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app')
vue.config.js
// vue-cli的全局配置文件 --需要遵从commonjs规范
// vue-cli里面给你集成了webpack打包工具
// 热重载 只对src以外的东西都需要重新启动项目
// spa（单页面应用）
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave:false,
devServer:{
proxy:{
'/api':{ // /api代理
// 代理的目标
target:"https://x.dscmall.cn/api",
ws:false,
changeOrigin:true,
pathRewrite:{
'^/api':""
}
}
}
}
})
babel.config.js
// babel配置文件--babel是一个JS编译器，
// 兼容低版本浏览器，引入babel，将es6转为es5
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
],
presets: [
'@vue/cli-plugin-babel/preset'
]
}
postcss.config.js
// 解决第三方组件库兼容问题
// vant组件库的设计稿是按照375px来开发的。
// 因此在viewportWidth为750px时会出现转换问题
module.exports = {
plugins: {
'postcss-pxtorem': { // 插件
rootValue: 37.5, // 1rem=37.5px
propList: ['*'], // 所有的文件都进行转换
}
}
}
