Vue.js开发移动端APP之前一直用AngularJS进行开发，最近打算系统学习Vue.js。下面主要是我学习过程中心

之前一直用AngularJS进行开发，最近打算系统学习Vue.js。下面主要是我学习过程中心得的总结和遇到的技术难点：

第一部分：技术准备

Vue-cli 搭建基本项目结构

vue-router 实现路由管理

vue-resource 实现ajax通信

1.Vue-cli 脚手架搭建基本代码框架

1.vue.js 2.x 版本脚手架中没有dev-server.js 如何进行数据模拟点这里 2.新建项目

vue init webpack vuetest(vuetest为项目名称)

3.安装依赖

安装sass:
cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev

安装vuex:
cnpm install vuex --save

2.vue-router 官方插件管理路由官方地址点这里

3.vue-resource Ajax通信官方地址点这里

1、安装依赖包
cnpm install vue-resource --save
2、进行ajax请求
{
  // GET /someUrl
  this.$http.get('/someUrl').then(response => {

    // get body data
    this.someData = response.body;

  }, response => {
    // error callback
  });
}

4.vuex 状态管理

mapState mapActions

第二部分：移动端常用的开发技巧

flex弹性布局
css stickyfooter

1 技巧

1.1 手机可以查看PC端的页面内容（必须保证手机和电脑在同一个局域网下）

1、localhost:8080/#/goods 改成 http://192.168.0.79:8080/#/goods
2、在 https://cli.im/text?c4a9982bce94d4d7e34217b287da6599 将http://192.168.0.79:8080/#/goods 生成二维码 ，通过手机扫描二维码即可看到页面。

1.2 iconfont 和 icomoon

1.3 sticky footer(兼容性最好的一种方法)

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>Sticky footer</title>
		<link rel="stylesheet" href="css/icon.css" />
		<style type="text/css">
			.clearfix {
				display: inline-block;
			}
			
			.clearfix:after {
				display: block;
				content: '';
				height: 0;
				line-height: 0;
				clear: both;
				visibility: hidden;
			}
			
			.detail {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: 100;
				overflow: auto;
				background: rgba(7, 17, 27, 0.8);
			}
			
			.detail-wrapper {
				width: 100%;
				/*让它最小高度能充满整个屏幕*/
				min-height: 100%;
			}
			
			.detail-main {
				margin-top: 64px;
				padding-bottom: 64px;
			}
			
			.detail-close {
				position: relative;
				width: 32px;
				height: 32px;
				clear: both;
				font-size: 32px;
				margin: -64px auto 0 auto;
			}
		</style>
	</head>

	<body>
		<div class="detail">
			<div class="detail-wrapper clearfix">
				<div class="detail-main"></div>
			</div>
			<div class="detail-close">
				<i class="icon-close"></i>
			</div>
		</div>
	</body>

</html>

1.4 CSS书写顺序

1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)

1.5 在文字有单行和多行的时候如何实现垂直居中

1.6 在Vue中导入全局样式(在main.js文件中写入下面的代码)

import './style/common.scss'

2. Vue.js 生命周期

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destoryed

结果：
beforeCreate 创建前状态===============》
lifecycle.html:23 el     : undefined
lifecycle.html:24 data   : undefined
lifecycle.html:25 message: undefined
lifecycle.html:28 created 创建完毕状态===============》
lifecycle.html:29 el     : undefined
lifecycle.html:30 data   : [object Object]
lifecycle.html:31 message: xuxiao is boy
lifecycle.html:34 beforeMount 挂载前状态===============》
lifecycle.html:35 el     : [object HTMLDivElement]
lifecycle.html:36 <div id="app">…</div>
lifecycle.html:37 data   : [object Object]
lifecycle.html:38 message: xuxiao is boy
lifecycle.html:41 mounted 挂载结束状态===============》
lifecycle.html:42 el     : [object HTMLDivElement]
lifecycle.html:43 <div id="app">…</div>
lifecycle.html:44 data   : [object Object]
lifecycle.html:45 message: xuxiao is boy

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>

<div id="app">
     <p>{{ message }}</p>
</div>

<script type="text/javascript">
    
  var app = new Vue({
      el: '#app',
      data: {
          message : "xuxiao is boy" 
      },
       beforeCreate: function () {
                console.group('beforeCreate 创建前状态===============》');
               console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
               console.log("%c%s", "color:red","message: " + this.message)  
        },
        created: function () {
            console.group('created 创建完毕状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //undefined
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化
        },
        beforeMount: function () {
            console.group('beforeMount 挂载前状态===============》');
            console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
            console.log(this.$el);
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
        },
        mounted: function () {
            console.group('mounted 挂载结束状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
               console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
        },
        beforeUpdate: function () {
            console.group('beforeUpdate 更新前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);   
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        updated: function () {
            console.group('updated 更新完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el); 
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        beforeDestroy: function () {
            console.group('beforeDestroy 销毁前状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);    
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message); 
        },
        destroyed: function () {
            console.group('destroyed 销毁完成状态===============》');
            console.log("%c%s", "color:red","el     : " + this.$el);
            console.log(this.$el);  
               console.log("%c%s", "color:red","data   : " + this.$data); 
               console.log("%c%s", "color:red","message: " + this.message)
        }
    })
</script>
</body>
</html>

3. dependencies与devDependencies的区别

–save会把依赖包名称添加到package.json文件dependencies键下，–save-dev则添加到package.json文件devDependencies键下。 devDependencies 里面的插件只用于开发环境，不用于生产环境，而 dependencies 是需要发布到生产环境的。

比如我们写一个项目要依赖于jQuery，没有这个包的依赖运行就会报错，这时候就把这个依赖写入dependencies ；

而我们使用的一些构建工具比如glup、webpack这些只是在开发中使用的包，上线以

后就和他们没关系了，所以将它写入devDependencies。

4. Vue.js使用插件

4.1 Vue.js 使用sass

1、安装sass依赖包
cnpm install --save-dev sass-loader
//sass-loader依赖于node-sass
cnpm install --save-dev node-sass

2、在build文件夹下的webpack.base.conf.js的rules里面添加配置
{
  test: /\.sass$/,
  loaders: ['style', 'css', 'sass']
}

3、在APP.vue中修改style标签
<style lang="scss">

4.2 Vue.js 使用less

1、安装less依赖包
cnpm install less less-loader --save

2、修改webpack.config.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加
{
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader",
},

3、在APP.vue中修改style标签
<style lang="less">

第三部分：遇到的问题

不应该使用箭头函数来定义 method 函数

不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。

//在methods中正确定义函数的方法如下：
methods: {
    showDetail: () => {
      console.log(this.detailShow)
    }
}

Vue.js开发移动端APP