Vue.js開發移動端APP

時間 2019-12-08

標籤 vue.js vue 開發移動 app 欄目 JavaScript 简体版

原文原文鏈接

以前一直用AngularJS進行開發，最近打算系統學習Vue.js。下面主要是我學習過程當中心得的總結和遇到的技術難點：javascript

第一部分：技術準備

Vue-cli 搭建基本項目結構

vue-router 實現路由管理

vue-resource 實現ajax通訊

1.Vue-cli 腳手架搭建基本代碼框架

1.vue.js 2.x 版本腳手架中沒有dev-server.js 如何進行數據模擬點這裏 2.新建項目css

vue init webpack vuetest(vuetest爲項目名稱)
複製代碼

3.安裝依賴html

安裝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通訊官方地址點這裏

一、安裝依賴包
cnpm install vue-resource --save
二、進行ajax請求
{
  // GET /someUrl
  this.$http.get('/someUrl').then(response => {

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

  }, response => {
    // error callback
  });
}
複製代碼

4.vuex 狀態管理

mapState mapActionsvue

第二部分：移動端經常使用的開發技巧

flex彈性佈局
css stickyfooter

1 技巧

1.1 手機能夠查看PC端的頁面內容（必須保證手機和電腦在同一個局域網下）

一、localhost:8080/#/goods 改爲 http://192.168.0.79:8080/#/goods
二、在 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 是須要發佈到生產環境的。java

好比咱們寫一個項目要依賴於jQuery，沒有這個包的依賴運行就會報錯，這時候就把這個依賴寫入dependencies ；node

而咱們使用的一些構建工具好比glup、webpack這些只是在開發中使用的包，上線以webpack

後就和他們不要緊了，因此將它寫入devDependencies。git

4. Vue.js使用插件

4.1 Vue.js 使用sass

一、安裝sass依賴包
cnpm install --save-dev sass-loader
//sass-loader依賴於node-sass
cnpm install --save-dev node-sass

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

三、在APP.vue中修改style標籤
<style lang="scss">
複製代碼

4.2 Vue.js 使用less

一、安裝less依賴包
cnpm install less less-loader --save

二、修改webpack.config.js文件，配置loader加載依賴，讓其支持外部的less,在原來的代碼上添加
{
    test: /\.less$/,
    loader: "style-loader!css-loader!less-loader",
},

三、在APP.vue中修改style標籤
<style lang="less">
複製代碼

第三部分：遇到的問題

不該該使用箭頭函數來定義 method 函數

不該該使用箭頭函數來定義 method 函數 (例如 plus: () => this.a++)。理由是箭頭函數綁定了父級做用域的上下文，因此 this 將不會按照指望指向 Vue 實例，this.a 將是 undefined。

//在methods中正肯定義函數的方法以下：
methods: {
    showDetail: () => {
      console.log(this.detailShow)
    }
}
複製代碼