【入門篇】前端框架Vue.js知識介紹

一、Vue.js介紹

MVVM（Model-View-ViewModel）是一種軟體架構設計模式，它源于MVC（Model-View-Controller）模式，它是一種思想，一種組織和管理代碼的藝術，它利用資料系結、屬性依賴、路由事件、命令等特性實作高效靈活的架構，

MVVM的核心是資料驅動即ViewModel，ViewModel是View和Model的關系映射，在MVVM中View和Model是不可以直接進行通信的，它們之間是通過ViewModel這個中介充當著觀察者的角色來進行中轉的，ViewModel向上與視圖層View進行雙向資料系結，向下與Model通過介面請求進行資料互動，起到承上啟下的作用，

MVVM的出現促進了前端開發和后端開發邏輯的分離，大大提高了開發效率，

Vue.js（讀音 /vju?/, 類似于 view）是一個MVVM架構的庫，是一套構建用戶界面的漸進式輕量級JavaScript框架，它以資料驅動和組件化的思想構建，

Vue.js與其他重量級框架不同的是，它采用自底向上增量開發的設計，它簡潔、易于理解且能快速上手，

Vue.js的目標是通過盡可能簡單的 API 實作回應的資料系結和組合的視圖組件， 

Vue.js是通過操作資料來實作頁面的更新，JQuery是通過操作DOM來改變頁面的顯示，

相關網站：https://cn.vuejs.org、http://doc.vue-js.com

二、Vue技術堆疊

基于Vue的技術堆疊是可以構建強大的前端專案的，

官網：https://nodejs.org/en/

Node.js 是一個基于Chrome V8 引擎的 JavaScript 運行環境， 它是一個讓 JavaScript 運行在服務端的開發平臺，它讓 JavaScript 成為與PHP、Python、Perl、Ruby 等服務端語言平起平坐的腳本語言，發布于2009年5月，由Ryan Dahl開發，實質是對Chrome V8引擎進行了封裝的開源Web服務器專案，

Node.js 是JavaScript人運行環境，類比Java中的jvm，

Node.js教程：https://www.runoob.com/nodejs/nodejs-tutorial.html

NPM：包管理器（NodePackageManager)，

NPM是一個管理包的工具，可以這樣來理解：有一個代碼倉庫，所有人都把代碼（如：jQuery）提交（npm publish）到這個代碼庫中來，其他人要使用這些代碼就去下載（npm install），下載完的代碼會在 node_modules 目錄中，然后就可以使用了，

Node.js都已經集成了NPM，只要安裝Node.js就可以了，

查看node.js和npm的版本：

NPM常用命令：

安裝：

npm install [<name><version>][-g]/[--save][-dev]

更新：

npm update [<name><version>][-g]/[--save][-dev]

卸載：

npm uninstall [<name><version>][-g]/[--save][-dev]

搜索：

npm search [<name><version>][-g]/[--save][-dev]

發布：

npm adduser  // npm賬號注冊，以郵箱方式

npm publish <name>  // npm模塊發布

引數說明：

--save  // 將模塊依賴關系寫入到package.json檔案的dependencies引數中

-dev  // 將模塊依賴關系寫入到package.json檔案的devDependencies引數中

-g  // 全域安裝

@+version  // 安裝指定版本

更多查看NPM官網：https://docs.npmjs.com/cli/npm

安裝淘寶 NPM 鏡像：

大家都知道國內直接使用 npm 的官方鏡像是非常慢的，推薦使用淘寶 NPM 鏡像，這樣就可以使用淘寶定制的 cnpm命令列工具代替默認的 npm:

npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm install [name]

一款強大的檔案打包工具，可以將我們的前端專案檔案（JavaScript、CSS、Fonts、Images）統一打包壓縮至JS中，并且可以通過vue-loader等加載器實作語法轉化與加載，

1、通過 npm 全域安裝 webapck     

npm install -g webpack

2、在專案中安裝 webpack

npm install webpack --save-dev

Vue的腳手架工具，它是一個專門為單頁面應用快速搭建繁雜的腳手架，它可以輕松的創建新的應用程式而且可用于自動生成vue和webpack的專案模板，

1、通過 npm 全域安裝vue-cli

npm install -g vue-cli

2、使用vue-cli創建vue專案

vue init <template-name> <project-name>

template-name:

    . webpack //常用

    . webpack-simple  // 一個簡單webpack+vue-loader的模板，不包含其他功能，

    . browserify     //  一個全面的Browserify+vueify 的模板，功能包括熱加載，linting,單元檢測，

    . browserify-simple  // 一個簡單Browserify+vueify的模板，不包含其他功能，

    . pwa           // 基于webpack模板的vue-cli的PWA模板

    . simple      //  一個最簡單的單頁應用模板

通過webpack創建vue專案：

vue init webpack my-project

說明：

Project name :專案名稱 ，如果不需要更改直接回車就可以了，注意：這里不能使用大寫，

Project description:專案描述，默認為A Vue.js project，如果不修改就直接回車，

Author：作者，如果你有配置git，他會讀取.ssh檔案中的user，

Vue build： standalone 如何構建專案，直接回車，

Install vue-router? 是否安裝vue的路由插件，Y代表安裝，N無需安裝，下面的命令也是一樣的，

Use ESLint to lint your code? 是否用ESLint來限制你的代碼錯誤和風格，

Pick an ESLint preset Standard 選擇一個ESLint代碼規范，上面選Y時出現，直接回車，

Set up unit tests ? 是否需要安裝單元測驗工具，

Setup e2e tests with Nightwatch? 是否安裝e2e來進行用戶行為模擬測驗，

Should we run npm install for you after the project has been created?(recommended)npm 在后續安裝依賴包時是否使用npm install安裝，

根據提示，待專案加載完成之后，執行下面兩條命令啟動專案：

cd my-project

npm run dev  

編譯成功：

通過http://localhost:8080進行訪問，

專案檔案結構：

部分專案檔案說明：

|-- build                            // 專案構建(webpack)相關代碼

|   |-- build.js                     // 生產環境構建代碼

|   |-- check-version.js             // 檢查node、npm等版本

|   |-- utils.js                     // 構建工具相關

|   |-- vue-loader.conf.js           // webpack loader配置

|   |-- webpack.base.conf.js         // webpack基礎配置

|   |-- webpack.dev.conf.js          // webpack開發環境配置,構建開發本地服務器

|   |-- webpack.prod.conf.js         // webpack生產環境配置

|-- config                           // 專案開發環境配置

|   |-- dev.env.js                   // 開發環境變數

|   |-- index.js                     // 專案一些配置變數

|   |-- prod.env.js                  // 生產環境變數

|   |-- test.env.js                  // 測驗腳本的配置

|--node_modules： //專案依賴包

|-- src                              // 原始碼目錄

|   |-- assets                   // 資源目錄

|   |-- components                   // 組件目錄

|   |-- router                       // 路由管理

|   |-- App.vue                      // 頁面入口檔案

|   |-- main.js                      // 專案入口檔案，加載各種公共組件

|-- static                           // 靜態檔案，比如一些圖片，json資料等

|-- test                             // 測驗檔案

|   |-- e2e                          // e2e 測驗

|   |-- unit                         // 單元測驗

|-- .babelrc                         // ES6語法編譯配置

|-- .editorconfig                    // 定義代碼格式

|-- .eslintignore                    // eslint檢測代碼忽略的檔案（夾）

|-- .eslintrc.js                     // 定義eslint的plugins,extends,rules

|-- .gitignore                       // git上傳需要忽略的檔案格式

|-- .postcsssrc                      // postcss組態檔

|-- index.html                       // 訪問的入口頁面

|-- package-lock.json             // 鎖定安裝時的包版本號，上傳到代碼庫后可以保證同一個專案組的人依賴的包版本相同

|-- package.json                     // 專案的各種模塊、配置資訊等

|-- README.md                        // 專案說明，markdown檔案

Vue官方提供的前端路由工具，利用其可以實作頁面的路由控制，區域重繪及按需加載，構建單頁應用，實作前后端分離，

相關網站：https://router.vuejs.org/zh/installation.html

vue-router有兩種模式：hash模式和history模式，

hash模式：

1）URL中有#號，如：http://www.abc.com/#/hello

2）不需要路由全覆寫

3）兼容IE8

history模式：

1）URL中沒有#號，如 http://www.abc.com/book/id 

2）需要服務端配置和路由全覆寫

3）兼容IE10

4）API能很方便地切換和修改歷史狀態

history.go(-2);//后退兩次

history.go(2);//前進兩次

history.back(); //后退

hsitory.forward(); //前進

history.pushState(state, title, url); //創建新的歷史記錄

history.replaceState(state, title, url); //修改當前歷史記錄

如：當前url是 https://www.baidu.com/a/，執行history.pushState(null, null, '/b/')和history.replaceState(null, null, '/b/')時，都變成了 https://www.baidu.com/b/，但是pushState時a b同時存在，可以后退到a，replaceState時，只有b，a被b替換掉了，a沒有了，

Vue提供的狀態管理工具，用于統一管理我們專案中各種資料的互動和重用，存盤我們需要用到資料物件，

相關網站：https://vuex.vuejs.org/zh/

vuex 有四個核心概念： 

1）The state tree：vuex 使用單一狀態樹，用一個物件就包含了全部的應用層級狀態，這也意味著，每個應用將僅僅包含一個 store 實體，單狀態樹讓我們能夠直接地定位任一特定的狀態片段，在除錯的程序中也能輕易地取得整個當前應用狀態的快照， 

2）Getters：用來從 store 獲取 Vue 組件資料， 

3）Mutators：事件處理器用來驅動狀態的變化， 

4）Actions：可以給組件使用的函式，以此用來驅動事件處理器 mutations，

vuex和簡單的全域物件是不同的，當vuex從store中讀取狀態值的時候，若狀態發生了變化，那么相應的組件也會高效的更新，并且，改變store中狀態的唯一途徑就是提交commit mutations，這樣便于我們跟蹤每一次狀態的變化，只要發生了狀態的變化，一定伴隨著mutation的提交， 

三、推薦Vue多端UI框架

1）Vant UI

有贊公司開發的移動端 Vue 組件庫，

官網地址：https://youzan.github.io/vant/#/zh-CN/intro

2）Mint UI

餓了么公司開發的移動端 Vue 組件庫，

官網地址：mint-ui.github.io/#!/zh-cn

1）Element

一套為開發者、設計師和產品經理準備的基于 Vue 2.0 的桌面端組件庫，

官網地址：https://element.eleme.cn/#/zh-CN

2）iView組件庫

 iView，是一套基于 Vue.js 的開源 UI 組件庫，主要服務于 PC 界面的中后臺產品，

官網地址：https://www.iviewui.com/docs/introduce

1）vue-element-admin

vue-element-admin 是一個后臺前端解決方案，它基于 vue 和 element-ui實作，它使用了最新的前端技術堆疊，內置了 i18 國際化解決方案，動態路由，權限驗證，提煉了典型的業務模型，提供了豐富的功能組件，它可以幫助你快速搭建企業級中后臺產品原型，

官網地址：https://panjiachen.github.io/vue-element-admin-site/zh/guide/

2）iview-admin

基于Vue.js，搭配使用iView UI組件庫形成的一套后臺集成解決方案，由TalkingData前端可視化團隊部分成員開發維護，iView admin遵守iView設計和開發約定，風格統一，設計考究，

地址：https://github.com/iview/iview-admin

標籤：JavaScript

上一篇：說說javascript引擎執行代碼的步驟

下一篇：JS常見的API擴展形式（prototype、jquery、vue插件封裝）以及怎樣設計出易擴展的表單驗證功能？