Table of contents
1.1. Cancel eslint verification
1.2. Introduction of basic files
1.3. Introduction of iconfont + svg use
1.4. Simplified application of css
1.5. Use ellipses to replace content overflow.
1.6. Bottom navigation jump of non-component library
1.7. Basic version of carousel chart
1.8, background color and rem adaptation
1. Configuration file
1.1. Cancel eslint verification
In the vue.config.js file:
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,//取消eslint校验
})1.2. Introduction of basic files
In the main.js file:
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. Introduction of iconfont + svg use
Official website: iconfont-Alibaba vector icon library
Search for the icons to be used in the project, add them to the shopping cart and download them into a project, get a compressed package, decompress it and put it into the project static resource folder;
Run the demo_index.html file in the project on the website and you can see your icon.
(1) Use of Font class format: <i class='iconfont icon-fangdajing'></i>
(2) Use of Symbol format: The second <use> is the usage of loop rendering
<svg class="icon-font">
<use xlink:href='#icon-chazhaoyonghu'></use>
<use :xlink:href="v.icon"></use>
</svg>The first is the usual black and white icons, and the second is the application of color icons.
1.4. Simplified application of css
As shown in the picture below, the svg color icon above is obviously larger than the icon below, and these 15 small boxes are all rendered by v-for. Use li:nth-child(-n+5) svg {.....} to get the first 5 boxes. On the contrary, li:nth-last-child(-n+4) gets the last four boxes.
.nav-menu ul {
display: flex;
flex-wrap: wrap;
li {
flex: 0 1 20%;
text-align: center;
margin: .625rem 0;
span {
display: block;
}
}
// 前5个尺寸变大
li:nth-child(-n+5) svg {
width: 2.5rem;
height: 2.5rem;
}
// 从第6个起尺寸变小
li:nth-child(n+6) svg {
width: 1.25rem;
height: 1.25rem;
}
}1.5. Use ellipses to replace content overflow.
The width of the mobile terminal is limited. If it doesn’t fit in one line and you don’t want to wrap it, just use an ellipsis instead!
.main-module-1 h4 {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}1.6. Bottom navigation jump of non-component library
Click on the specified navigation and the color changes, using the linkActiveClass attribute
The following are the styles and corresponding views: The style introduces index.scss in main.js
<div class="footer-list">
<ul>
<li v-for="(v, i) in footerList" :key="i">
<router-link :to="v.path">
<i class="iconfont" :class="v.icon"></i>
<span>{
{ v.title }}</span>
</router-link>
</li>
</ul>
</div>
<script>
export default {
data() {
return {
footerList: [
{ title: "首页", icon: "icon-shouye", path: "/index" },
{ title: "会员", icon: "icon-huiyuan", path: "/memeber" },
{ title: "订单", icon: "icon-dingdan", path: "/ordre" },
{ title: "我的", icon: "icon-wode", path: "/my" },
],
};
},
};
</script>
<style lang="scss" >
//最外层的设置，防止页面横向滚动
html,
body {
max-width: 720px;
overflow-x: hidden;
margin: 0 auto;
}
// 底部导航栏
.footer {
height: 3.75rem;
.footer-seat {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 3.75rem;
background-color: beige;
border-top: 1px solid #e5e5e5;
.footer-list {
max-width: 720px;
height: 3.75rem;
margin: 0 auto;
ul {
display: flex;
text-align: center;
align-items: center;
height: 100%;
li {
flex: 1;
i {
font-size: 1.5rem;
}
span {
display: block;
}
}
}
}
}
}
</style>1.7. Basic version of carousel chart
Automatic playback: The currently displayed picture corresponds to the specified subscript of the total picture array, and continues from the first picture after reaching the last picture.
<template>
<div class="banner">
<img v-for="(v, i) in menuList" :key="i" :src="v" v-show="n == i" />
</div>
</template>
<script>
export default {
data() {
return {
n: 0, //初始化
menuList: [
require("@/assets/img/b-1.jpg"),
require("@/assets/img/b-2.jpg"),
require("@/assets/img/b-3.jpg"),
],
};
},
mounted() {
this.play();
},
methods: {
autoplay() {
this.n++;
if (this.n == this.menuList.length) {
this.n = 0;
}
},
play() {
setInterval(this.autoplay, 2000);
},
},
};
</script>1.8, background color and rem adaptation
In the style of App.vue
#app {
height: 100%;
background-color: #efefef;
font-size:.14rem;
}
html,
body {
height: 100%;
}
html{
font-size:100px !important;
}At this time, if you want to set the font to 16px, you should write it as 0.16rem. If the label height is 100px, you should write 1rem.