postcss-px-to-viewport

1postcss移动端适配：
postcss-px-to-viewport

1 加浏览器前缀
2 在代码里设置px，框架自动设置成rem
3 css全局全命名

yarn add -D postcss-px-to-viewport

webpack别名

移动端布局方案非常重要，写篇博客记录下来 vue.config.js是框架底层编译的，不可随意改名

掌握两种：
1 rem + 根节点vm
2 postcss to viewport 插件 可以直接写Px,插件帮你转成vw,全转成vw
如果需要屏幕越宽展示越多需要px
在vue.config里面，propList:["*"]表示全部转换

一像素问题：
不同的设备像素比最终的逻辑像素，1px，如果设备像素是3,物理像素是3
为了不同设备精细度一样，根据dpr做了语法

const pxtovw = require('postcss-px-to-viewport')
const path = require('path')

module.exports = {
  //代理
  devServer: {
    proxy: {
      //代理,只要是/api路径下的请求,都转发到以下端口路径
      '/api': {
        target: 'http://localhost:3005/',
        //跨域
        changeOringin: true,
        pathRewrite: {
          //配置api代理
          // '^/api/ajax': ''
        }
      },
      '/maoyan':{
        target:'http://m.maoyan.com',
        changeOringin:true,
        pathRewrite:{
          '^/maoyan':''
        }
      }
    }
  },
  css: {
    loaderOptions: {
      css: {
        // 这里的选项会传递给 css-loader
      },
      postcss: {
        // 这里的选项会传递给 postcss-loader
        plugins: [
          new pxtovw({
            unitToConvert: 'px',
            viewportWidth: 375,
            unitPrecision: 5,
            propList: ['*'],
            viewportUnit: 'vw',
            fontViewportUnit: 'vw',
            selectorBlackList: [],
            minPixelValue: 1,
            mediaQuery: false,
            replace: true,
            exclude: [/node_modules/]
          })
        ]
      }
    }
  },
  chainWebpack: config => {
    config.resolve.alias.set('assets', path.resolve(__dirname, './src/assets/'))

    config.resolve.alias.set('views', path.resolve(__dirname, './src/views/'))
  },
  pages: {
    index: {
      // page 的入口
      entry: 'src/main.js',
      // 模板来源,一会需要一个模板两个文件名
      template: 'public/index.html',
      // 在 dist/index.html 的输出
      filename: 'index.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。 index要和上面对应,指定的是入口的js文件名
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    detail: {
      // page 的入口
      entry: 'src/detail.js',
      // 模板来源
      template: 'public/index.html',
      // 在 dist/detail.html 的输出,这里不能叫index.html,否则会被覆盖
      filename: 'detail.html',
      // 当使用 title 选项时，
      // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'detail Page',
      // 在这个页面中包含的块，默认情况下会包含
      // 提取出来的通用 chunk 和 vendor chunk。 index要和上面对应,指定的是入口的js文件名
      chunks: ['chunk-vendors', 'chunk-common', 'detail']
    },
  }
}

json-server

装全局

{
"/api/ajax/hotshowing":"/hotshowing"
}

这样配置以后
"mock":"json-server ./mock/mock.js -r ./mock/routes.json -p 3005"
/api/ajax/hotshowing和/hotshowing都可以访问

装anxios

yarn add axios -S 生产环境的依赖

过滤器实现图片url替换

处理1px问题加横线

export default{
        filters:{
        formatImg(url){
            return url.replace(/w.h/,'64.90');
        }
    }
}                                                         

使用：:src:"item.url | formatImg"

http 不考虑业务 movie是考虑了业务

mintui -S 基于vue.js的ui

import Indicator from 'mint-ui' loading框

Indicator.open();
Indicator.close();

设置网速
谷歌控制台 network slow3G
性能优化可以用这个来测试

better-scroll -S

做项目不要用beta,是最新的版本

再装pullup上拉插件

使用下拉

为什么mouted挂载之后无法执行?

nextTick 将回调延迟到下次循环更新执行

在created里卖,即使没有挂在,用nextTick也可以强制再挂载后执行

this.$nextTick(()=>{
Indicator.close();
this.initScroll;
})

也不能写在mounted里面

滚动条调整

scrollwrapper 要是对的,460
里面的内容要高出wrapper内容

下拉显示和隐藏

json server分页start

_start=0&_limit=

vue inspect > output.js 看源码

nextTick

vue.$nextTick
再nextTick里面,同步的操作执行完了,才执行next%Tick这个异步的钩子函数

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

mounted里面不能保证数据请求

滚动条初始化,需要DOM渲染完成

水平方向

initScroll(){
this.srollX = new BScroll(this.$refs["scrollx],{
scrollX:true,
probeType:3
})
}

vue-cli选项配置 可以查看配置项

多个页面,在pages里面配置两个index,chunk指定当前页面

title:当前title

fill 改变svg颜色

g{
fill{
color:red;
}
}

访问json静态文件

放在public下面

面试 better-scroll 底层实现：

transform:tanslate实现的
事件pointer-events

VUE动画 封装了一个transition组件

keep-alive 面试：vue项目做什么优化？ keep-alive做缓存，不想做状态u缓存，向左请求

两个钩子函数，可以在这里面发请求等操作
activated() 进入某一模块
deactivated() 离开某一模块

项目

https://m.kaola.com/
选一个功能做深
1 keep-alive状态管理
2 transition动画
3 better-scroll滚动