vue移动端项h5通用技巧

一、配置文件：

1.1、取消eslint校验，在vue.config.js文件里：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,//取消eslint校验
})

1.2、基础文件引入，在main.js文件里:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './vantui'//按需引入vant
// css样式重置
import '@/assets/css/reset.css'
import '@/assets/css/index.scss'
import '@/assets/font/iconfont.css' //引入iconfont样式，图标们才会出现
import '@/assets/font/iconfont.js' //引入iconfont彩色图标（symbol）
 
Vue.config.productionTip = false
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

1.3、iconfont引入+svg使用，

1.4、内容溢出用省略号替代：

移动端宽度有限，如果一行放不下，又不想换行，就用省略号代替！

 .main-module-1 h4 {
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
}

1.8、背景颜色以及rem适配：

#app {
  height: 100%;
  background-color: #efefef;
  font-size:.14rem;
}
html,
body {
  height: 100%;
}
html{
 font-size:100px !important;
}

此时，要对字体设置16px,则应写成0.16rem,标签高度为100px,就写1rem。