Vue.js開發移動端APP

Cassie1492949236626發表於2018-04-18
Vue.jsAPP

之前一直用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)
    }
}
複製程式碼

相關文章