基於Vue+VueRouter+ModJS+Fis3快速搭建H5項目總結

 

技術選型

• 框架 - Vue+VueRouter
• 相比較於react/angular/avalon ?
• 簡單輕量，社區配套完整
• 模塊化 - ModJS
• 相比較於require/seajs/browserify/webpack ?
• commonjs規范
• 構建工具 - Fis3
• 相比較於grunt/glup/webpack ?
• 插件完善，配置簡單清晰

目錄結構規范

MVVM開發模式

• 數據驅動
• 雙向綁定
• 組件化開發

構建處理任務

• less編譯
• 資源內嵌
• 模塊化
• ⽂件監聽
• ⾃動刷新
• 合並壓縮
• 緩存處理
• domain

一套代碼，多個環境共存

• 開發環境
• 測試環境
• 線上環境

 

## 安裝

```

npm install -g fis3

npm install

 

## 本地開發和調試

```

fis3 server start //啟動本地服務器

fis3 release -wL //發布到本地服務器，並開啟監聽和自動刷新

```

## 發布

```

fis3 release test //生成代碼到output/test，對應測試環境

fis3 release prod //生成代碼到output/prod，對應線上環境

```

此H5項目中重點知識總結

1，README.MD 安裝調試發布，技術選型，目錄結構

2，fis3   

官網http://fis.baidu.com/

FIS3 是面向前端的工程構建工具。解決前端工程中性能優化、資源加載（異步、同步、按需、預加載、依賴管理、合並、內嵌）、模塊化開發、自動化工具、開發規范、代碼部署等問題。

3， vue.js

①，vue 的v-if和v-for

②，computed計算屬性

③，綁定class，<div v-bind:class="{ active: isActive }"></div>

④，監聽事件

<div id="example-2">
  <!-- `greet` 是在下面定義的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

⑤vue組件的創建和注冊，例子及page-header組件,

 

Vue.js的組件的使用有3個步驟：創建組件構造器、注冊組件和使用組件。

　　

4，vue生命周期-鈎子函數

 

beforecreated：el 和 data 並未初始化 
created:完成了 data 數據的初始化，el沒有
beforeMount：完成了 el 和 data 初始化 
mounted ：完成掛載

執行了destroy操作，后續就不再受vue控制了。

beforecreate : 舉個栗子：可以在這加個loading事件 
created ：在這結束loading，還做一些初始化，實現函數自執行 
mounted ： 在這發起后端請求，拿回數據，配合路由鈎子做一些事情
beforeDestory： 你確認刪除XX嗎？ destoryed ：當前組件已被刪除，清空相關內容

5，vue路由

<router-view></router-view>的理解

主要是構建 SPA (單頁應用) 時，方便渲染你指定路由對應的組件。你可以 router-view 當做是一個容器，它渲染的組件是你使用 vue-router 指定的。比如：

 

6，<router-link :to="'/carsearch/'" reload></router-link>

<router-link> 組件支持用戶在具有路由功能的應用中（點擊）導航。 通過 to 屬性指定目標地址，默認渲染成帶有正確鏈接的 <a> 標簽，可以通過配置 tag 屬性生成別的標簽.。另外，當目標路由成功激活時，鏈接元素自動設置一個表示激活的 CSS 類名。

 

7，http://element.eleme.io/     vue組件庫