入門vue

1、與其餘框架的比較
Vue是一個「漸進式框架」（The Progressive Framework）

對比Angular
更靈活的適用場景
一、默認API適合純前端背景的開發者/小塊靈場景
二、配合TypeScript也能夠適合傳統Java後端背景的開發者/大型項目
更低的培訓成本，更快的上手速度
底層的Virtual DOM在高級場景下提供更多的靈活性
大型應用中與TypeScript的整個不如Angular，可是在vue3.0會針對性的加強
對比React
對大部分常見場景都提供了事實標準方案
一、不須要額外自行調研選取方案
二、在必要的狀況下也能夠換用自研方案
模板提供更有好的學習曲線
同事暴露底層Virtual DOM 用於高級場景（也支持JSX）
大型應用中與TypeScript的整個暫時不如React，3.0會針對加強，尤爲是TSX
對標React 16+
一、Vue一樣能夠實現相似於Hooks的邏輯複用機制
二、3.0支持時間分片
與其餘全部框架的區別
自帶的響應式系統（Reactivity System）
一、相似於MobX，但與框架自己的整合更無縫
二、在複雜組件樹中提供比 React 更精確的更新偵測
三、3.0將暴露更多底層響應式API
單文件組件（Single File Components）
一、HTML的天然延伸，符合直覺的代碼組織方式
二、完善的工具鏈
* 預處理支持
* Scoped CSS
* webpack熱更新
* IDE支持（VSCode + Vetur）
* Linter支持（eslint-plugin-vue）
2、官方工具鏈
● 路由：vue-router
● 狀態管理：vuex
● 構建工具腳手架：vue-cli
● 開發者工具：vue-devtools
● IDE 支持：VSCode + Vetur
● 靜態檢查：ESLint + eslint-plugin-vue
● 單元測試：Jest + vue-jest + vue-test-utils
● 文檔/靜態站生成：VuePress

3、優秀的組件庫
● Vuetify
○ 基於 Material Design，功能完整強大，桌面 + 移動
○ 支持 SSR
● Element-UI
○ 知名國產組件庫，來自餓了麼前端團隊
○ 只支持桌面端應用
○ 有現成的控制後臺模版
● iView
○ 另外一個知名國產庫，來自 TalkingData 前端團隊
○ 主要支持桌面端，但也有小程序整合
○ 有現成的控制後臺模版
● Quasar
○ 不單單是組件庫的全平臺解決方案
○ 桌面端 SPA/SSR + 移動端 PWA / Hybrid + 桌面端 Electron。

4、移動端方案
（H5 / Hybrid)
● Vant
○ 來自有讚的純移動端 web 組件庫
● Vux
○ 基於微信 UI 風格的移動端 web 組件庫
● Onsen UI
○ 來自日本，基於 custom elements 支持多個上層框架的 hybrid 移動端方案
● Ionic 4
○ 知名 hybrid 移動端方案，本來只支持 Angular，4.0 開始經過原生 custom elements 支持 Vue
（目前 beta）

 

1、爲何用vue.js

• mvvm（Model-View-ViewModel）模式框架
  
• 漸進式框架
• 高效協同開發

2.常見需求及解決方案
需求 解決方案
聲明式渲染、組件系統 vue
UI組件 ElementUI
客戶端路由 vue-router
大規模狀態管理 vuex
構建工具 webpack
項目腳手架 vue-cli
數據持久化 vue-cookie
圖表 vue-echarts
百度地圖 vue-baidu-map
代碼質量檢查 eslint-plugin-vue
…

2、開發前準備

1.開發工具

推薦webstorm,或是idea。

注：idea須要安裝vuejs的插件。

2.環境搭建

安裝node環境。

安裝成功後在控制檯輸入node -V，會展現出版本號。

$ v10.11.0

3.安裝依賴

安裝須要的依賴文件到node_modules文件夾。

$ npm i

4.項目啓動編譯及其餘操做

以****項目爲例。

在項目的package.json文件中配置了項目操做的命令。

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "test": "npm run unit",
    "lint": "eslint --ext .js,.vue src test/unit",
    "build": "node build/build.js",
    "dll": "webpack --config build/webpack.dll.config.js"
},

eg. 啓動項目對應命令：

$ npm run dev

3、目錄結構

family-doctor-ali項目目錄結構。


build webpack開發和打包的相關設置
config 指定開發和打包中的靜態資源路徑、要壓縮的文件類型、開發使用的端口號等相關配置
dist 編譯結果文件
node_modules 依賴包文件
src 項目主要代碼
static 靜態文件存放位置
test api測試代碼
/.babelrc babel轉換器配置文件
/.eslintignore eslint代碼檢查工具排除文件
/.eslintrc eslint代碼檢查工具配置文件
/.gitignore git上傳忽略文件
/.postcssrc.js css編譯工具配置
/index.html 入口文件
/package.json node項目核心配置
/package-lock.json node包版本鎖定文件
/README.md 項目介紹

 

4、基本用法

1.經常使用指令

（1）v-text

html中使用變量。

<span v-text="msg"></span>
<!-- 等同於 -->
<span>{{msg}}</span>

 

（2） v-if

<span v-if="isFinal">Nice</span>

判斷是否渲染元素。

（3）v-show

判斷是否顯示元素。

<span v-show="isShow">Oops</span>

（4） v-for

遍歷數組來進行渲染。

<div :key='index' v-for="(item,index) in items"></div>

<div :key='item.id' v-for="item of items"></div>

（5）v-bind

動態綁定一個或者多個特性。

<p v-bind:class="[{'is-active':activeClass},errorClass]">message...</p>

（6）v-model

雙向數據綁定的指令。

<!-- 變量userName -->
<input type="text" v-model="userName">
<span>{{userName}}</span>

（7）v-on

用於監聽事件的指令。

<!-- 函數delete -->
<button v-on:click="delete"></button>

5、常見問題

1.vue.js可否與jQuery混用？

能夠，但不必。jquery主要是一個簡化dom操做的組件，而在vue項目中你不須要操做dom。

2.vue.js項目中常見技術問題怎麼解決？

vue中文文檔寫的很詳細，若是出現文檔中沒有的問題能夠去github中vue項目的Issues中尋找答案。

3.vue.js兼容性如何？

包括es6+、typescript、sass、less所有支持。vue項目通常使用webpack打包、babel翻譯，生成的代碼能夠適配低版本瀏覽器。

4.vue.js對於編碼規範有什麼要求？
使用eslint代碼檢查工具，編碼結束後使用命令npm run lint便可進行規範檢查，具體的規則文檔。