<p><code></p> <p><span class="img-wrap"><img data-src="/img/remote/1460000007202600?w=2788&amp;h=868" src="/img/remote/1460000007202600?w=2788&amp;h=868" alt="" title="" style="cursor: pointer; display: inline;"></span></p> <p>本文给出基于 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>2 的移动端环境搭建,移动端大家更多想到的是响应布局,我们根据不同大小的屏幕进行适配,当然少不了我们的重头戏 rem,移动端相比 pc 端就没什么特别的了。</p> <p>我会一步一步带领大家进入 <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>2 的世界,拥抱变化,熟悉 <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> 1.x 的根据文档可以迅速掌握 2.0,因为其中大约 90% 的语法是重复的。2.0 更多是基于框架本身的优化,整体设计思想是不变的。</p> <h2 id="articleHeader0">vue-cli</h2> <p>首先还是介绍我们的脚手架工具,因为它能让我们省去大部分的配置时间,这里只给出简单步骤,保证你的命令顺利运行的前提是安装最新版本的 <a href="http://www.js-code.com/tag/node" title="node" target="_blank">node</a> 和 npm,这里不赘述升级流程</p> <p>全局安装 vue-cli</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install vue-cli -g" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash" style="word-break: break-word; white-space: initial;">npm install vue-cli -g</code></pre> <p>借此也全局安装一个 webpack</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install webpack -g" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> webpack -g</code></pre> <blockquote> <p>注意这里可能会有坑,墙内的用户安装失败,没关系,我们先安装淘宝镜像</p> </blockquote> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install -g cnpm --registry=https://registry.npm.taobao.org" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code style="word-break: break-word; white-space: initial;">npm install -g cnpm --registry=<span class="hljs-string">https:</span><span class="hljs-comment">//registry.npm.taobao.org</span></code></pre> <p>然后通过以下命令安装 webpack</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="cnpm install webpack -g" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash" style="word-break: break-word; white-space: initial;">cnpm install webpack -g</code></pre> <blockquote> <p>注:下面 orange 默认给出 npm 的安装方案,安装失败请自行转为 cnpm 安装</p> </blockquote> <p>在需要创建工程的位置运行</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="vue init webpack-simple 工程名字<工程名字不能用中文>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash" style="word-break: break-word; white-space: initial;">vue init webpack-simple 工程名字&lt;工程名字不能用中文&gt;</code></pre> <p>或者创建 vue1.0 的项目,只需将命令换成</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="vue init webpack-simple#1.0" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs nginx"><code style="word-break: break-word; white-space: initial;"><span class="hljs-attribute">vue</span> init webpack-simple<span class="hljs-comment">#1.0</span></code></pre> <p>这里我们基于 2.x 开发的,直接使用第一种方法创建工程即可,下图是创建工程时的截图,需要你添加 <code>Project name</code>,<code>Project description</code>,<code>Author</code>.</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000007202601?w=1756&amp;h=1180" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>图中已经给出下一步应该操作的步骤,我们按照步骤一步一步执行,这里 orange 不给大家一步一步列出。</p> <blockquote> <p>注意:这里一定要使用 npm install 安装官方库,而不要使用淘宝镜像,会导致部分依赖丢失。</p> </blockquote> <p>安装完成后,目录如下图。</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000007202602?w=920&amp;h=1072" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>然后我们运行我们的项目后浏览器会自动弹出,并展示以下页面</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000007202603?w=2196&amp;h=1992" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>这里注意观察,默认给我们八个链接,可以根据这几个链接获得我们想要的学习资源,上面是必要的的链接(官方文档以及关注 vue 动态),下面是 vue 的生态系统,大家亲切的叫它们为全家桶。</p> <h2 id="articleHeader1">Vue 全家桶</h2> <p>我们接下来介绍全家桶的安装(使用详情大家可以去初始页面的链接查看)</p> <p>一句命令搞定全家桶</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install vue-router vue-resource vuex --save" title="" data-original-title="复制"></span> </div> </p></div> <pre class="bash hljs"><code class="bash" style="word-break: break-word; white-space: initial;">npm install vue-router vue-resource vuex --save</code></pre> <p>package.json 已经加入了我们的全家桶,<a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>_modules 目录下也有对应的依赖包,注意这里现在还不能用扩展之后的方法,因为我们没引入到项目中来。</p> <p>src/main.js 修改如下</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="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)<br /> })" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> VueResource <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-resource'</span> <span class="hljs-keyword">import</span> VueRouter <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-router'</span> <span class="hljs-keyword">import</span> Vuex <span class="hljs-keyword">from</span> <span class="hljs-string">'vuex'</span> <span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./App.vue'</span> Vue.use(VueResource) Vue.use(VueRouter) Vue.use(Vuex) <span class="hljs-keyword">new</span> Vue({ <span class="hljs-attr">el</span>: <span class="hljs-string">'#app'</span>, <span class="hljs-attr">render</span>: <span class="hljs-function"><span class="hljs-params">h</span> =&gt;</span> h(App) })</code></pre> <p>这时我们的项目就能运行对应的扩展方法了</p> <h2 id="articleHeader2">集成 Sass</h2> <p>作为移动端的开发怎么能缺少 css 预编译语言。sass 安装需要几个依赖。</p> <p>我们干脆在 package.json 把版本写死,然后通过 <code>npm install</code> 安装</p> <p>在 <code>"devDependencies": {}</code> 中添加下面几个依赖</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="&quot;node-sass&quot;: &quot;^3.8.0&quot;, &quot;sass&quot;: &quot;^0.5.0&quot;, &quot;sass-loader&quot;: &quot;^4.0.0&quot;," title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="js"><span class="hljs-string">"node-sass"</span>: <span class="hljs-string">"^3.8.0"</span>, <span class="hljs-string">"sass"</span>: <span class="hljs-string">"^0.5.0"</span>, <span class="hljs-string">"sass-loader"</span>: <span class="hljs-string">"^4.0.0"</span>,</code></pre> <p>好,我们 <code>npm install</code> 后,就可以正式使用 sass 啦</p> <h2 id="articleHeader3">目录结构建议</h2> <p>依赖的安装到这里差不多结束了,其它大家需要的可以自定义安装</p> <p>下面给出我的目录建议供大家参考,</p> <p><span class="img-wrap"><img data-src="/img/remote/1460000007202604?w=888&amp;h=1608" src="https://static.segmentfault.com/v-5cc2cd8e/global/img/squares.svg" alt="" title="" style="cursor: pointer;"></span></p> <p>这里的 img 目录放置图片,script 目录放置公共的工具函数,style 目录放置我们的 sass 文件,</p> <p>你查看 <code>App.vue</code> 文件时不难发现,默认的把样式文件给到了模块里,这样样式一直跟着模块</p> <p>orange 建议大家不要这样做,因为这样十分不利于样式的模块化,注意区分与模版模块化的区别,</p> <p>我们单独设置 style 目录,并在目录当中对 sass 进行模块化处理(通过 <code>import</code> 引入 sass 模块)</p> <p>对应的 App.vue 也变得非常简洁,代码如下</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <style lang=&quot;sass&quot;> @import &quot;/style/base.scss&quot;; </style> <p>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">style</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">"sass"</span>&gt;</span><span class="css"> @<span class="hljs-keyword">import</span> <span class="hljs-string">"/style/base.scss"</span>; </span><span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span></code></pre> <h2 id="articleHeader4">rem 适配</h2> <p>对于移动端的开发,rem 适配必不可少,我们可以用多种方式实现,下面给出一种方案</p> <p>在 <code>index.html</code> 中添加如下代码</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<script> <a href="http://www.js-code.com/tag/let" title="let" target="_blank">let</a> html = document.documentElement;</p> <p> window.rem = html.getBoundingClientRect().width / 16 ; html.style.fontSize = window.rem + 'px'; </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="xml hljs"><code class="html"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a></span> html = <span class="hljs-built_in">document</span>.documentElement; <span class="hljs-built_in">window</span>.rem = html.getBoundingClientRect().width / <span class="hljs-number">16</span> ; html.style.fontSize = <span class="hljs-built_in">window</span>.rem + <span class="hljs-string">'px'</span>; </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <p>这里基于宽 320px 的屏幕分成了 16 份,也就是 1rem = 20px,目前大多数设计稿都是根据 iphone6 的宽( 375px )走的,建议大家在这里分成 25 份,也就是 1rem = 15px,计算起来方便些。</p> <p>简单说下 rem 原理:根据 html 的 fontSize 属性值为基准,其它所有的 rem 值,根据这个基准计算。</p> <p>我们根据屏幕宽度用 js 动态修改了 html 的 fontSize 属性值,达到移动端适配的目的</p> <h2 id="articleHeader5">总结</h2> <p>本文作为移动端配置的基础篇,深入了解框架后才能继续构建网站,希望这是一个好的开始,有了这个架子再填充代码就方便了许多,不用再去考虑开发环境问题了。</p> <blockquote> <p>文章出自 orange 的 个人博客 <a href="http://orangexc.xyz/" rel="nofollow noreferrer" target="_blank">http://orangexc.xyz/</a></p> </blockquote> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_26337.html