@import"/style/base.scss";本文给出了基于Vue2的移动端环境搭建。在移动端，大家考虑更多的是响应式布局。我们根据不同尺寸的屏幕进行适配。当然，我们的重头戏rem，移动端和PC端相比没什么特别的。我将带领大家一步步走进Vue2的世界，拥抱变化，根据文档熟悉Vue1.x，快速掌握2.0，因为大约90%的语法是重复的。2.0更多是基于框架本身的优化，整体设计思路不变。vue-cli首先介绍我们的脚手架工具，因为它可以让我们节省大部分的配置时间，这里只是简单的步骤，保证你的命令顺利运行的前提是安装最新版本的node和npm，升级过程此处不再赘述。全局安装vue-clinpminstallvue-cli-g安装一个webpacknpminstallwebpack-g。请注意，这里可能存在陷阱。墙内用户安装失败。没关系。先安装淘宝镜像npminstall-gcnpm--registry=https://registry.npm.taobao.org然后通过以下命令安装webpackcnpminstallwebpack-g注：下面橙色给出的是默认的npm安装方案。如果安装失败，请切换到cnpm安装，在需要创建项目的位置运行vueinitwebpack-simple。项目名称<项目名称不能是中文>或者创建一个vue1.0项目，把命令替换成vueinitwebpack-simple#1.0这里我们是基于2.x开发的，使用第一种方法直接创建项目，如下图是创建项目时的截图。您需要添加项目名称、项目描述和作者。下一步如图所示。我们一步一步来，橘子这里就不一一列举了。注意：这里必须使用npminstall安装官方库，不能使用淘宝镜像，会导致部分依赖丢失。安装完成后，目录如下图。然后我们运行我们的项目后，浏览器会自动弹出，显示如下页面。注意这里。默认情况下，我们有八个链接。我们可以根据这些链接获取我们想要的学习资源。以上是必备链接（官方文档和关注vue动态），下面是vue的生态系统，大家亲切的称之为全家桶。Vue全家桶我们接下来会介绍Family全家桶的安装（可以到初始页面的链接查看使用详情）。获取FamilyFamilyBucket的一个命令。对应的依赖包，注意这里不能使用扩展的方法，因为我们没有在项目中引入。src/main.js修改如下.use(Vuex)newVue({el:'#app',render:h=>h(App)})这时候我们的项目就可以运行对应的扩展方法了。集成Sass作为移动端开发可以缺少css预编译语言。sass安装需要几个依赖项。我们只是在package.json中硬编码版本，然后在“devDependencies”中添加以下依赖项：{}vianpminstall"node-sass":"^3.8.0","sass":"^0.5.0","sass-loader":"^4.0.0",好了，我们npminstall之后，就可以正式使用sass了。目录结构提示依赖安装到这里差不多就结束了，其他需要的可以自定义如下这里是我的目录建议，供大家参考。这里的img目录是放图片的，script目录是放公共实用函数的，style目录是放我们sass文件的。查看App.vue文件就可以很容易的发现。默认情况下，样式文件是给到模块中的，样式一直跟在orange模块后面。我建议你不要这样做，因为它不利于样式的模块化。注意模板模块化和样式的区别。我们单独设置style目录，将目录下的sass模块化处理（通过import引入sass模块）对应的App.vue也变得非常简洁，代码如下@import"/style/base.scss";rem适配移动端的开发，rem适配必不可少，我们可以通过多种方式实现。这里有一个解决方案，在index.html中添加如下代码这里将屏幕按照320px的宽度分成16份，即1rem=20px。目前大部分设计稿都是以iphone6的宽度（375px）为准，我这里建议大家分成25份，即1rem=15px，计算起来比较方便。简单说一下rem的原理：根据html的fontSize属性的值，其他所有的rem值都是按照这个基准计算的。我们使用js根据屏幕宽度动态修改html的fontSize属性值，达到移动端适配的目的。将本文总结为移动端配置的基础篇。只有对框架有了深刻的理解之后，我们才能继续建设网站。我希望这是一个好的开始。这个架子后面填代码就方便多了，不用考虑开发环境。欢迎关注orange的个人博客http://orangexc.xyz/
