Vue2 移动端开发环境搭建

   <p><img src="https://simg.open-open.com/show/038f914a4a081ae5f179292681e04112.jpg"></p>    <p>本文给出基于 Vue2 的移动端环境搭建，移动端大家更多想到的是响应布局，我们根据不同大小的屏幕进行适配，当然少不了我们的重头戏 rem，移动端相比 pc 端就没什么特别的了。</p>    <p>我会一步一步带领大家进入 Vue2 的世界，拥抱变化，熟悉 Vue 1.x 的根据文档可以迅速掌握 2.0，因为其中大约 90% 的语法是重复的。2.0 更多是基于框架本身的优化，整体设计思想是不变的。</p>    <h2><strong>vue-cli</strong></h2>    <p>首先还是介绍我们的脚手架工具，因为它能让我们省去大部分的配置时间，这里只给出简单步骤，保证你的命令顺利运行的前提是安装最新版本的 node 和 npm，这里不赘述升级流程</p>    <p>全局安装 vue-cli</p>    <pre>  npm install vue-cli -g  </pre>    <p>借此也全局安装一个 webpack</p>    <pre>  npm install webpack -g  </pre>    <p>注意这里可能会有坑，墙内的用户安装失败，没关系，我们先安装淘宝镜像</p>    <pre>  npm install -g cnpm --registry=https://registry.npm.taobao.org  </pre>    <p>然后通过以下命令安装 webpack</p>    <pre>  cnpm install webpack -g  </pre>    <p>注：下面 orange 默认给出 npm 的安装方案，安装失败请自行转为 cnpm 安装</p>    <p>在需要创建工程的位置运行</p>    <pre>  vue init webpack-simple 工程名字<工程名字不能用中文>  </pre>    <p>或者创建 vue1.0 的项目，只需将命令换成</p>    <pre>  vue init webpack-simple#1.0  </pre>    <p>这里我们基于 2.x 开发的，直接使用第一种方法创建工程即可，下图是创建工程时的截图，需要你添加 Project name ， Project description ， Author .</p>    <p><img src="https://simg.open-open.com/show/75b5276fa9521e7d86802f19f994176f.jpg"></p>    <p>图中已经给出下一步应该操作的步骤，我们按照步骤一步一步执行，这里 orange 不给大家一步一步列出。</p>    <p>注意：这里一定要使用 npm install 安装官方库，而不要使用淘宝镜像，会导致部分依赖丢失。</p>    <p>安装完成后，目录如下图。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/60a76adbd5da73e29ad772d605d60805.jpg"></p>    <p>然后我们运行我们的项目后浏览器会自动弹出，并展示以下页面</p>    <p><img src="https://simg.open-open.com/show/0b9e55768289d62ab6772c5a7eb3d25f.jpg"></p>    <p>这里注意观察，默认给我们八个链接，可以根据这几个链接获得我们想要的学习资源，上面是必要的的链接（官方文档以及关注 vue 动态），下面是 vue 的生态系统，大家亲切的叫它们为全家桶。</p>    <h2><strong>Vue 全家桶</strong></h2>    <p>我们接下来介绍全家桶的安装（使用详情大家可以去初始页面的链接查看）</p>    <p>一句命令搞定全家桶</p>    <pre>  npm install vue-router vue-resource vuex --save  </pre>    <p>package.json 已经加入了我们的全家桶，node_modules 目录下也有对应的依赖包，注意这里现在还不能用扩展之后的方法，因为我们没引入到项目中来。</p>    <p>src/main.js 修改如下</p>    <pre>  import Vue from 'vue'  import VueResource from 'vue-resource'  import VueRouter from 'vue-router'  import Vuex from 'vuex'    import App from './App.vue'    Vue.use(VueResource)  Vue.use(VueRouter)  Vue.use(Vuex)    new Vue({    el: '#app',    render: h => h(App)  })  </pre>    <p>这时我们的项目就能运行对应的扩展方法了</p>    <h2><strong>集成 Sass</strong></h2>    <p>作为移动端的开发怎么能缺少 css 预编译语言。sass 安装需要几个依赖。</p>    <p>我们干脆在 package.json 把版本写死，然后通过 npm install 安装</p>    <p>在 "devDependencies": {} 中添加下面几个依赖</p>    <pre>  "node-sass": "^3.8.0",  "sass": "^0.5.0",  "sass-loader": "^4.0.0",  </pre>    <p>好，我们 npm install 后，就可以正式使用 sass 啦</p>    <h2><strong>目录结构建议</strong></h2>    <p>依赖的安装到这里差不多结束了，其它大家需要的可以自定义安装</p>    <p>下面给出我的目录建议供大家参考，</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/562389b77d179c8bf02a3659d2e0f5f3.jpg"></p>    <p>这里的 img 目录放置图片，script 目录放置公共的工具函数，style 目录放置我们的 sass 文件，</p>    <p>你查看 App.vue 文件时不难发现，默认的把样式文件给到了模块里，这样样式一直跟着模块</p>    <p>orange 建议大家不要这样做，因为这样十分不利于样式的模块化，注意区分与模版模块化的区别，</p>    <p>我们单独设置 style 目录，并在目录当中对 sass 进行模块化处理（通过 import 引入 sass 模块）</p>    <p>对应的 App.vue 也变得非常简洁，代码如下</p>    <pre>  <style lang="sass">   @import "/style/base.scss";  </style>  </pre>    <h2><strong>rem 适配</strong></h2>    <p>对于移动端的开发，rem 适配必不可少，我们可以用多种方式实现，下面给出一种方案</p>    <p>在 /src/script/util.js 中添加如下代码</p>    <pre>  export function setREM() {    let html = document.documentElement;      window.rem = html.getBoundingClientRect().width / 16 ;    html.style.fontSize = window.rem + 'px';  }  </pre>    <p>这里基于宽 320px 的屏幕分成了 16 份，也就是 1rem = 20px，目前大多数设计稿都是根据 iphone6 的宽（ 375px ）走的，建议大家在这里分成 25 份，也就是 1rem = 15px，计算起来方便些。</p>    <p>然后在 App.vue 的 script 部分中这样引入</p>    <pre>  import { setREM } from './script/util';  </pre>    <p>保证你的 App.vue 是接下来所有开发模块的父级模块，切换页面通过路由实现</p>    <p>简单说下 rem 原理：根据 html 的 fontSize 属性值为基准，其它所有的 rem 值，根据这个基准计算。</p>    <p>我们根据屏幕宽度用 js 动态修改了 html 的 fontSize 属性值，达到移动端适配的目的</p>    <p> </p>    <p>来自：http://orangexc.xyz/2016/10/18/Vue2-mobile-terminal-development-environment-to-build/</p>    <p> </p>