vueh5项⽬架构搭建1. vue init webpack
2.添加vuex cnpm i vuex -D
添加vuex demo⽂件，main.js中引⼊store
3.添加axios cnpm i axios -D,(des,rsa公司加解密标准)
添加http.js等⽂件
4.添加less 或者 stylus
4.1  添加less  , cnpm i less less-loader css-loader -D
4.2 添加stylus cnpm install stylus stylus-loader css-loader --save
5.添加fastclick cnpm i fastclick -D  ：解决移动端页⾯点击会延迟300ms的问题
main.js 中添加 fastclick.attach(document.body)
6.添加 vue-lazyload ：图⽚预加载
main.js 中 添加
import VueLazyload from 'vue-lazyload'复制代码
Vue.use(VueLazyload, {
loading: require('@/common/image/default.png')
})复制代码
使⽤⽅式 <img src="" v-lazy >
7. 使⽤eslint ，webpack模块已⾃动添加
8. 全局filter  建⽬录components/filters
Vue.filter("toNumber", function(str) {
if(!str){
return 0
}
return parseFloat(str);
})；复制代码
9.utils ⼯具包 建⽬录components/utils
10 .兼容IOS8  package.json中添加IOS>=8
"browserslist": ["> 1%",
"last 2 versions",
"not ie <= 8",
"IOS >= 8"
]复制代码
11 . 加载模块优化 router/index.js
{  path: '/auth/login',
component:  (resolve) => {require(['@/components/kams/auth/login'], resolve) },
}，复制代码
12 . meta(禁⽤页⾯缓存与viewport设置)
<meta charset="utf-8"><meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <meta name="screen-orientation" content="portrait"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
复制代码
13 <keep-alive></keep-alive>
app.js中
<transition name="router-fade" mode="out-in">
<keep-alive>
<router-view v-if="$a.keepAlive"></router-view>
</keep-alive>
</transition>
<transition name="router-fade" mode="out-in">
<router-view v-if="!$a.keepAlive"></router-view>
</transition>
.router-fade-enter-active, .router-fade-leave-active {
transition: opacity .3s;
}
.router-fade-enter, .router-fade-leave-active {
opacity: 0;
}
复制代码
14. 图⽚分辨率与1像表 问题
less版本：
.bg-image(@url){
background-image: url("../image/@{url}@2x.png");
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
background-image: url("../image/@{url}@3x.png");
}
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
.border-1px{
&::after{
-webkit-transform: scaleY(0.7);
transform: scaleY(0.7);
}
}
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
.border-1px{
&::after{
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
}
复制代码
stylus版本：
bg-image(url)
background-image: url("common/image/"+url+"@2x.png")
@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
background-image url("common/image/"+url+"@3x.png")
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
.border-1px{
&::after{
-webkit-transform: scaleY(0.7);
transform: scaleY(0.7);
}
}
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
.border-1px{
&::after{
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
}
app.vue 中引⼊
<style lang="stylus" rel="stylesheet/stylus">
@require "./common/style/common.styl"
复制代码
15.ployfill ：<script src="//cdn.polyfill.io/v2/polyfill.min.js"></script>
16.1 不使⽤ui框架：⾃定义alertTip loading
16.2 使⽤cube-ui
cnpm install cube-ui --save
17.下拉 上拉 页⾯刷新
18. svg 的使⽤
19.vue-swiper （暂不⽤）
svg和h5的关系20.webpack plugins的使⽤ （略）
21.<transition name="showlist"> 标签的使⽤ （动画效果）    .showlist-enter-active,
.showlist-leave-active {
transition: all 0.3s;
transform: translateY(0);
}
.showlist-enter,
.showlist-leave-active {
opacity: 0;
transform: translateY(-100%);
}复制代码
22.vconsole 调试器
import VConsole from 'vconsole'
Vue.use(new VConsole())复制代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。