怎样进行Vue2移动端开发环境搭建

本期，边肖将为您带来关于如何构建Vue2移动开发环境的信息。文章内容丰富，从专业角度进行分析和描述。看完这篇文章，希望你能有所收获。

在这里，我们给出了基于Vue2的移动终端的环境构建。移动终端上的每个人都更关心响应布局。我们根据不同尺寸的屏幕进行调整，当然，我们的高光rem也是不可或缺的。与个人电脑终端相比，移动终端没什么特别的。

我会一步一步带领你走进Vue2的世界，拥抱变化，熟悉Vue 1.x的文档，这样你就能快速掌握2.0，因为90%左右的语法都是重复的。2.0更多是基于框架本身的优化，整体设计思路不变。

vue-cli

首先，让我们介绍一下我们的脚手架工具，因为它可以节省我们大部分的配置时间。这里只给出简单的步骤。保证你的命令顺利运行的前提是安装节点和npm版本的vue -cli，这里就不重复升级过程了。

vue-cli的全球安装

Npstallvue-CLI-g还会全局安装一个webpack。

Npstallwebpack-g注意这里可能有漏洞，墙内用户安装失败。没关系，我们先安装淘宝镜像。

nminstall-gcnpm-registry=https://registry.npm.taobao.org然后通过以下命令安装网络包

Cninstallwebpack-g注：下面的橙色给出了npm默认的安装方案。如果安装失败，请自行改为cnpm安装。

在需要创建项目的地方运行。

vueinitwebpack-简单项目名称项目名称不能用中文，也不能创建vue1.0的项目，只需将命令改为

Vuitwebpack-simple # 1.0这里，我们是基于2.x开发的，直接用* * *方法创建项目就可以了。下图是项目创建的截图，需要您添加项目名称、项目描述和作者。

该图给出了下一步应该操作的步骤。我们将一步一步地跟随他们。orange在这里就不一一列举了。

注意：这里安装官方库必须使用npm install，而不是淘宝镜像，会导致部分依赖丢失。

安装后，目录如下。

然后在我们运行我们的项目后，浏览器会自动弹出并显示以下页面。

这里，注意观察。默认情况下，给我们八个链接。根据这些链接，我们可以得到我们想要的学习资源。上面是必要的链接(官方文档和对vue动态的关注)，下面是vue的生态系统，大家亲切地称之为全家桶。

Vue 全家桶

接下来，我们将介绍全家桶的安装(详情可查看初始页面的链接)

一次搞定整桶。

npstallvue-Router Vue-resource vuex-save package . JSON已经加入到我们的族桶中，node_modules目录中有对应的依赖包。请注意，扩展方法现在不能在这里使用，因为我们还没有将其引入到项目中。

Src/main.js修改如下

import vue from ' vue ' importvueresourcefrom ' vue-resource ' importvuerouterfrom ' vue-router ' importvuex from ' vuex ' importppfrom '。/App.vue'Vue.use(VueRes

ource) Vue.use(VueRouter) Vue.use(Vuex)  new Vue({   el: '#app',   render: h => h(App) })

这时我们的项目就能运行对应的扩展方法了

集成 Sass

作为移动端的开发怎么能缺少 css 预编译语言。sass 安装需要几个依赖。

我们干脆在 package.json 把版本写死，然后通过 npm install 安装

在 "devDependencies": {} 中添加下面几个依赖

"node-sass": "^3.8.0", "sass": "^0.5.0", "sass-loader": "^4.0.0",

好，我们 npm install 后，就可以正式使用 sass 啦

目录结构建议

依赖的安装到这里差不多结束了，其它大家需要的可以自定义安装

下面给出我的目录建议供大家参考，

这里的 img 目录放置图片，script 目录放置公共的工具函数，style 目录放置我们的 sass 文件，

你查看 App.vue 文件时不难发现，默认的把样式文件给到了模块里，这样样式一直跟着模块

orange 建议大家不要这样做，因为这样十分不利于样式的模块化，注意区分与模版模块化的区别，

我们单独设置 style 目录，并在目录当中对 sass 进行模块化处理(通过 import 引入 sass 模块)

对应的 App.vue 也变得非常简洁，代码如下

<style lang="sass">   @import "/style/base.scss"; </style>

rem 适配

对于移动端的开发，rem 适配必不可少，我们可以用多种方式实现，下面给出一种方案

在 index.html 中添加如下代码

<script>   let html = document.documentElement;    window.rem = html.getBoundingClientRect().width / 16 ;   html.style.fontSize = window.rem + 'px'; </script>

这里基于宽 320px 的屏幕分成了 16 份，也就是 1rem = 20px，目前大多数设计稿都是根据 iphone6 的宽( 375px  )走的，建议大家在这里分成 25 份，也就是 1rem = 15px，计算起来方便些。

简单说下 rem 原理：根据 html 的 fontSize 属性值为基准，其它所有的 rem 值，根据这个基准计算。

我们根据屏幕宽度用 js 动态修改了 html 的 fontSize 属性值，达到移动端适配的目的

上述就是小编为大家分享的怎样进行Vue2移动端开发环境搭建了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注行业资讯频道。