基于Vue2的移动端开发环境搭建详解


Posted in Javascript onNovember 03, 2016

前言

vue2.0发布了,那么还在用vue1.x的你,是不是也有所心动呢?下面这篇文章就给大家详细介绍基于Vue2的移动端开发环境搭建的详细步骤,下面来一起看看吧。

一、vue-cli

首先还是介绍我们的脚手架工具,因为它能让我们省去大部分的配置时间,这里只给出简单步骤,保证你的命令顺利运行的前提是安装最新版本的 node 和 npm,这里不赘述升级流程

全局安装 vue-cli

npm install vue-cli -g

借此也全局安装一个 webpack

npm install webpack -g

注意这里可能会有坑,墙内的用户安装失败,没关系,我们先安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后通过以下命令安装 webpack

cnpm install webpack -g

注:下面 orange 默认给出 npm 的安装方案,安装失败请自行转为 cnpm 安装

在需要创建工程的位置运行

vue init webpack-simple 工程名字<工程名字不能用中文>

或者创建 vue1.0 的项目,只需将命令换成

vue init webpack-simple#1.0

这里我们基于 2.x 开发的,直接使用第一种方法创建工程即可,下图是创建工程时的截图,需要你添加 Project nameProject descriptionAuthor.

基于Vue2的移动端开发环境搭建详解

图中已经给出下一步应该操作的步骤,我们按照步骤一步一步执行,这里 orange 不给大家一步一步列出。

注意:这里一定要使用 npm install 安装官方库,而不要使用淘宝镜像,会导致部分依赖丢失。
安装完成后,目录如下图。

基于Vue2的移动端开发环境搭建详解

然后我们运行我们的项目后浏览器会自动弹出,并展示以下页面

基于Vue2的移动端开发环境搭建详解

这里注意观察,默认给我们八个链接,可以根据这几个链接获得我们想要的学习资源,上面是必要的的链接(官方文档以及关注 vue 动态),下面是 vue 的生态系统,大家亲切的叫它们为全家桶。

二、Vue 全家桶

我们接下来介绍全家桶的安装(使用详情大家可以去初始页面的链接查看)

一句命令搞定全家桶

npm install vue-router vue-resource vuex --save

package.json 已经加入了我们的全家桶,node_modules 目录下也有对应的依赖包,注意这里现在还不能用扩展之后的方法,因为我们没引入到项目中来。

src/main.js 修改如下

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)
})

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

三、集成 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 啦

四、目录结构建议

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

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

基于Vue2的移动端开发环境搭建详解

这里的 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 属性值,达到移动端适配的目的

总结

以上就是这篇文章的全部内容了,本文作为移动端配置的基础篇,深入了解框架后才能继续构建网站,希望这是一个好的开始,有了这个架子再填充代码就方便了许多,不用再去考虑开发环境问题了。希望本文的内容对有需要的朋友们能有所帮助。

Javascript 相关文章推荐
善用事件代理,警惕闭包的性能陷阱。
Jan 20 Javascript
Extjs Gird 支持中文拼音排序实现代码
Apr 15 Javascript
javascript实现的网站访问量统计代码
Dec 20 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
javascript中this指向详解
Apr 23 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
AngularJs  unit-testing(单元测试)详解
Sep 02 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
Feb 10 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
Dec 19 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
JS中数组与对象的遍历方法实例小结
Aug 14 Javascript
Vue时间轴 vue-light-timeline的用法说明
Oct 29 Javascript
AngularJS控制器之间的通信方式详解
Nov 03 #Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 #Javascript
AngularJS创建自定义指令的方法详解
Nov 03 #Javascript
JavaScript遍历Json串浏览器输出的结果不统一问题
Nov 03 #Javascript
3种不同的ContextMenu右键菜单实现代码
Nov 03 #Javascript
利用纯Vue.js构建Bootstrap组件
Nov 03 #Javascript
jQuery下拉菜单的实现代码
Nov 03 #Javascript
You might like
Zend的AutoLoad机制介绍
2012/09/27 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
php 算法之实现相对路径的实例
2017/10/17 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
js移除事件 js绑定事件实例应用
2012/11/28 Javascript
JavaScript创建类/对象的几种方式概述及实例
2013/05/06 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
js中函数调用的两种常用方法使用介绍
2014/07/17 Javascript
深入探讨JavaScript String对象
2015/03/09 Javascript
JavaScript动态添加列的方法
2015/03/25 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
微信JS-SDK选取手机照片上传功能
2017/04/21 Javascript
layui 上传插件 带预览 非自动上传功能的实例(非常实用)
2019/09/23 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
[27:28]Ti4 冒泡赛第二天 iG vs NEWBEE 1
2014/07/15 DOTA
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
用Python编写生成树状结构的文件目录的脚本的教程
2015/05/04 Python
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
python学习之面向对象【入门初级篇】
2017/01/21 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
详解python读取image
2019/04/03 Python
python基于FTP实现文件传输相关功能代码实例
2019/09/28 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
python GUI库图形界面开发之PyQt5工具栏控件QToolBar的详细使用方法与实例
2020/02/28 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
C++面试题目
2013/06/25 面试题
C#笔试题
2015/07/14 面试题
四年的大学生生活自我评价
2013/12/09 职场文书
大学军训感言1000字
2014/02/25 职场文书
小学数学课后反思
2014/04/23 职场文书
社会实践的活动方案
2014/08/22 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
高三英语复习计划
2015/01/19 职场文书