一、创建vue项目在老版本中创建vue项目的命令是：npminstall-g@vue/cli-initvueinitwebpackmy-projectvueinit的运行效果会同vue-cli@2.x同vuecreatehello-world，然后在命令行窗口可以选择是否使用包含默认less+babel的预设，或者手动选择所需的功能。此外，你还可以使用vueui命令来创建和管理具有图形界面的项目。2、移动端风格适配鉴于移动端屏幕种类繁多，UI图形一般以750像素为输出，简单给出适配规则。前端开发者需要提供一套可用的适配方案，力求能够以最少的工作量实现更完善的适配。常用的适配方案有rem和viewport。px2rempostcss-px-to-viewport等插件可以提供pxtorem和视口处理。rem方案可以通过视口的大小动态设置根元素的字体大小，所有元素根据相对根元素的大小设置样式。视口方案实际上改变了视口的大小，并根据视口与UI地图宽度的比例按比例缩放。这种方式破坏了完美的视口，我们一般使用rem布局。在rem布局方案中，我们需要查询屏幕宽度，然后设置根元素的font-size。在一般的自适应方案中，字体会根据屏幕大小变化，这样当屏幕变宽时，字体就会变大。其实有的时候并不适合我们的使用场景。淘宝只是简单的提供了一个灵活的解决方案，字体大小适中，保持在12px，但是图片的宽高是根据html中的字体变化来设置的。这里设置了rem的基本单位，但是stylewriting中的每一个像素点都是计算两者非常麻烦。使用px2rem插件可以帮助我们自动转换为rem。我们只需要按照UI图写px个像素，然后在vue.config.js文件中配置即可。postcss-px2rem-exclude比px2rem更有用的一点是可以设置不进行转换的黑名单，第三方UI库样式不会被污染。constpx2rem=require('postcss-px2rem-exclude')constpx2remConfig=px2rem({remUnit:75,exclude:/node_modules|floder_name/i//selectorBlackList:['weui','mu']})module.exports={css:{loaderOptions:{postcss:{plugins:[px2remConfig]}}}}第三，图像添加和1像素边框dpr2和dpr3屏幕出现，屏幕分辨率更高，图片更清晰。但是我们在写样式的时候，还是按照css像素来写，而不是设备物理像素。为了最大限度地发挥设备的性能，在图像处理中，一般2x屏及以下加载2x图像，3x屏加载3x图像。使用lessmixin实现mediaquery，加载对应的背景图片。mixin.less.bg-image(@url){背景图像:e(%("url(../assets/%a@2x.png)",e(@url)));@media(-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3){background-image:e(%("url(../assets/%a@3x.png)",e(@url)));}}需要按分辨率添加背景图片的地方：@import"../assets/style/mixin.less";.close{width:42px;高度：42px；.bg-image('关闭');背景位置：中心；背景重复：不重复；background-size:100%100%;}这里只是对背景图片的处理，img标签的图片也有简单的处理方法，srcset标签可以根据屏幕宽度或像素加载相应的图片比率。如果不是对应的值，则加载默认图片。
