Vue.js开发移动端APP-白红宇

之前一直用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-devcnpm install sass-loader --save-dev安装vuex:cnpm install vuex --save复制代码

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

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

1、安装依赖包cnpm install vue-resource --save2、进行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/#/goods2、在 https://cli.im/text?c4a9982bce94d4d7e34217b287da6599 将http://192.168.0.79:8080/#/goods 生成二维码 ，通过手机扫描二维码即可看到页面。复制代码

1.2 iconfont 和 icomoon

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

			
    		
    		
    		Sticky footer		
    						
    			
     				
      
			
     
			
     				
      			
     
		
    
	复制代码

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     : undefinedlifecycle.html:24 data   : undefinedlifecycle.html:25 message: undefinedlifecycle.html:28 created 创建完毕状态===============》lifecycle.html:29 el     : undefinedlifecycle.html:30 data   : [object Object]lifecycle.html:31 message: xuxiao is boylifecycle.html:34 beforeMount 挂载前状态===============》lifecycle.html:35 el     : [object HTMLDivElement]lifecycle.html:36 
    
     …
    
lifecycle.html:37 data   : [object Object]lifecycle.html:38 message: xuxiao is boylifecycle.html:41 mounted 挂载结束状态===============》lifecycle.html:42 el     : [object HTMLDivElement]lifecycle.html:43 
    
     …
    
lifecycle.html:44 data   : [object Object]lifecycle.html:45 message: xuxiao is boy复制代码

        
        
         
     {
   { message }}
    
复制代码

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-sasscnpm install --save-dev node-sass2、在build文件夹下的webpack.base.conf.js的rules里面添加配置{  test: /\.sass$/,  loaders: ['style', 'css', 'sass']}3、在APP.vue中修改style标签

4.2 Vue.js 使用less

1、安装less依赖包cnpm install less less-loader --save2、修改webpack.config.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加{    test: /\.less$/,    loader: "style-loader!css-loader!less-loader",},3、在APP.vue中修改style标签

第三部分：遇到的问题

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

不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined。//在methods中正确定义函数的方法如下：methods: {    showDetail: () => {      console.log(this.detailShow)    }}复制代码