• 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 studio中,测试输出数组中最大子数组的和
    我所理解的软件开发模式
    java实现随机输出300题四则运算
    Demo(3月28日)
    关于构建之法中小飞问题的个人看法
    对搭档代码的一些意见
    项目复审
    安卓UI测试(基于android studio环境 espresso框架)
    读构建之法后的一些个人感受
    思考题
  • 原文地址:https://www.cnblogs.com/adbg/p/10898589.html
Copyright © 2020-2023  润新知