zoukankan      html  css  js  c++  java
  • vue移动端立项

    步骤一:使用vue-cli模板创建新项目:vue init webpack ‘vue-test’  点击查看

    步骤二:引入SCSS

    npm  install sass-loader -D

    npm install node-sass -D

    组件使用

    <style scoped lang="scss">
    执行完上面操作就可以直接在组件使用scss

    使用 sass-resources-loader 实现全局变量、方法注入

     npm install sass-resources-loader -D

    修改build/utils.js

    return {
        css: generateLoaders(),
        postcss: generateLoaders(),
        less: generateLoaders('less'),
        sass: generateLoaders('sass', { indentedSyntax: true }),
        scss: generateLoaders('sass').concat(
          {
            loader: 'sass-resources-loader',
            options: {
              resources: path.resolve(__dirname, '../src/assets/scss/index.scss')
            }
          }
        ),
        stylus: generateLoaders('stylus'),
        styl: generateLoaders('stylus')
      }

     步骤三:添加fastclick支持,处理移动端click事件300毫秒延迟

    npm install fastclick -S
     
    在main.js引入
    import FastClick from 'fastclick'
    FastClick.attach(document.body)

    步骤四:引入淘宝适配lib-flexible

    npm install lib-flexible -S
     
    在main.js引入
     
    import 'lib-flexible'
     
    步骤五:安装px2rem-loader,px自动转rem
    npm install px2rem-loader -D
    修改build/utils.js
    将px2rem-loader添加到cssLoaders中
    const px2remLoader={
      loader:'px2rem-loader',
      options:{
        remUnit:75
      }
    }

     同时,在generateLoaders方法中添加px2remLoader

    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

    步骤六:打包之后静态资源显示空白及static文件路径报错

    1、修改了config/index.js文件build下的assetsPublicPath '/' 改为'./'

    2、修改build/utils.js 中,增加一个 pablicPath 的配置

     

    步骤七:模拟app页面切换效果

    新建transition.scss
    .slide-left-enter-active,
    .slide-right-enter-active{
      -webkit-transition: all 0.2s linear;
      transition: all 0.2s linear;
    }
    // slide-left
    .slide-left-enter,
    .slide-left-leave-active {
      opacity: 0;
      -webkit-transform: translate3d(-50%, 0, 0);
      transform: translate3d(-50%, 0, 0);
    }
    // slide-right
    .slide-right-enter,
    .slide-right-leave-active {
      opacity: 0;
      -webkit-transform: translate3d(50%, 0, 0);
      transform: translate3d(50%, 0, 0);
    }
    
    .slide-left-active,
    .slide-right-active{
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }

    在main.js加入

    // 用于App.vue状态为前进还是后退
    window.addEventListener('popstate', function (e) {
      router.isBack = true
    }, false)

    在App.vue加入,data定义transitionName

    <transition :name="transitionName" mode="out-in">
        <router-view></router-view>
    </transition>
    data () {
        return {
          transitionName: ''
        }
      },
      watch: {
        $route (to, from) {
          // 切换动画
          let isBack = this.$router.isBack // 监听路由变化时的状态为前进还是后退
          if (isBack) {
            this.transitionName = 'slide-left'
          } else {
            this.transitionName = 'slide-right'
          }
          this.$router.isBack = false
        }
      }

     步骤八:index.html meta标签设置

    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, minimum-scale=1, maximum-scale=3, user-scalable=no, width=device-width, viewport-fit=cover">
    <meta name="screen-orientation" content="portrait">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no" />
    <!--uc强制竖屏-->
    <meta name="x5-orientation" content="portrait">
    <!-- 禁用页面缓存 -->
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="expires" content="0" />

     nginx 设置

      add_header Cache-Control "no-cache,no-store"   // 禁用页面缓存

    暂时就这样,后面再补充
     
  • 相关阅读:
    监控里的主码流和子码流是什么意思
    监控硬盘容量计算
    一个能让你了解所有函数调用顺序的Android库
    电工选线
    oracle linux dtrace
    list all of the Oracle 12c hidden undocumented parameters
    Oracle Extended Tracing
    window 驱动开发
    win7 x64 dtrace
    How to Use Dtrace Tracing Ruby Executing
  • 原文地址:https://www.cnblogs.com/adbg/p/10898589.html
Copyright © 2011-2022 走看看