vue.js手机app实战1:初始配置详情

在本系列中，vue.js2将用于在移动端制作webapp的单个页面，页面很少，大约7或8个。不过麻雀虽然小而全，但会使用轮播、下拉刷新、上拉加载、图片懒加载等常见效果。还有一些关于css的描述，比如不同分辨率的适配、flex布局和编写mixin来处理2x和3x图形的SCS。

初始工作：

通过vue-cli安装webpack模板后，会自动生成很多文件，通常我们只关心src/目录中的东西。个人习惯在src下新建一个基础目录来存储一般的css和js，比如样式重置css和所有的js工具函数。

下载文件后，npm运行开发

启动服务，你会看到熟悉的hellowue。既然是做手机页面，就把chrome切换到手机模式(打开开发工具，ctrl shift m或者点击左上角的手机)

至于移动终端如何适应不同的手机屏幕，估计每个人都有自己的做法。我用淘宝的flexible.js根据不同类型缩放调整html字体大小，用rem布局。使用的方法也很简单，只需要导入Js文件，github地址。

这里简单介绍一下如何计算rem:

如果设计草图是640，并且有一个宽度为200px的div，css应该是宽度： (200/640) * 10=3.125 rem

如果设计草图是750，并且有一个宽度为200px的div，css应该是宽度： (200/750) * 10=2.666 rem

可以发现，如果每次测量一个DIV宽度，必须用计算器计算，太慢了。

如果是使用scss，可以写一个函数来处理(函数下面的75px来自设计稿的大小，如果设计稿是750，就是75；)

@ function torem($ px){ @ return $ px/75px * 1 rem；}如果使用威震编辑器，可以在https://github.com/flashlizi/cssrem,下载一个插件，写起来更方便；

字体的处理：

我们还是用px写字体，但是需要根据不同的比例写不同的大小。例如，在安卓系统中，字体大小是14px，所以iphone6的大小应该是28，Iphone6s应该是42px。Flexible.js会根据屏幕缩放比例给html添加data-dpr属性，这样就可以通过scss编写mixin来处理字体了

@ mixin FZ($ font-size){ font-size : $ font-size；[data-DPR=' 2 ']{ font-size : $ font-size * 2；}[data-DPR=' 3 ']{ font-size : $ font-size * 3；}}需要使用字体的地方，@ include FZ(16px)；

图像处理：

通常，为了适应保留和非保留屏幕，我们会准备不同的图片大小，即2X和3x图片。我的方法是在[data-dpr='3']下使用3x图片，其他情况下统一使用2x图片。

现在，为了方便起见，写一个mixin来处理：(假设放在2x文件夹和3x文件夹下)

@mixin dpr-img($url，$name，$type: '。jpg '){ background-image : URL($ URL ' 2x/' $ name ' @ 2x ' $ type)；[data-DPR=' 3 ']{ background-image : URL($ URL ' 3x/' $ name ' @ 3x ' $ type)；} }

第一个参数是2x和3x文件夹所在的路径，第二个参数是文件名，第三个参数是文件类型。默认值为。jpg结尾。

有些代码块在编写CSS时可能会频繁使用，所以也可以写成mixin，比如单行文本溢出和多行文本溢出：

@ mixin t-overflow($ line :1){ @ if $ line==1 { overflow :隐藏；文本-overflow:省略号；white-space : nowrap；} @ else { display :-web kit-box；-web kit-line-clamp : $ line；-web kit-box-oriented :垂直；飞越：隐藏；文本-overflow:省略号；}}例如，左右垂直中心：

@mixin表中心{ display : table-cell；垂直对齐：中间；文本对齐：中心；} @ mixin flex-center { display : flex；justice-content : center；align-items:居中；}字体图标处理：

页面通常有很多小图标。为了减少请求，以前可能会合并雪碧，但我现在基本不用了。相反，我使用字体图标。我使用阿里的在线字体图标，上传svg到阿里字体库或者直接使用阿里的图标，选择图标添加到项目中。生成地址后，导入到项目中就可以使用了。

在App.vue中：

@ import URL('//at . alic dn.com/t/font _ nfzwlroyg2vuzk 9 . CSS ')；写出主要成分：

页面上下有四个选项卡，点击时会切换对应的组件，所以Main组件的结构是这样的

模板div路由器-视图/路由器-视图脚-导航/脚-导航/div/模板脚-导航底部导航的布局如下：

template div class=' foot-nav-container ' ul class=' bottom-nav ' router-link tag=' Li ' to='/index ' class=' bottom-nav _ _ Li icon font icon-寿野bottom-nav _ _ Li-home '/router-link router-link tag=' Li ' to='/search ' bottom-nav _ _ Li icon font icon-ss bottom-nav _ _ Li-search '/router-link router-link router-link tag=' Li ' to='/car ' class=' bottom-nav _ _ Li icon font icon-shop但需要注意的是，点击购物车时，购物车页面底部需要有结算按钮，所以购物车页面上没有导航，这意味着购物车的路由配置不会放在面路由的子代下。

写一条路线：

{ path:'/'，redirect:'/home' }，{ path:'/home '，component:Main，children:[ { path:'/'，redirect:'/index' }，{ path:'/index '，component:Index }，{ path:'/search '，component:Search }，{ path 3: '/VIP '，component 333:当路由为空时，它将被重定向到归属路由，索引路由将被设置为归属路由下的默认路由。我们将汽车设置为单独的路线，而不是家，所以当我们点击导航购物车时，它会从家的路线切换到汽车路线。由于底部路线放在首页路线下，购物车页面上的导航将不存在，所以基本配置差不多完成。

在这一节中，首先设置基本结构，然后编写每页的内容。

目前已经写了几页，项目已经上传到https://github.com/linrunzheng/vueApp的github

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。