1、Vue.js介紹css
一、什麼是MVVM？
MVVM（Model-View-ViewModel）是一種軟件架構設計模式，它源於MVC（Model-View-Controller）模式，它是一種思想，一種組織和管理代碼的藝術。它利用數據綁定、屬性依賴、路由事件、命令等特性實現高效靈活的架構。html
MVVM的核心是數據驅動即ViewModel，ViewModel是View和Model的關係映射。在MVVM中View和Model是不能夠直接進行通訊的，它們之間是經過ViewModel這個中介充當着觀察者的角色來進行中轉的。ViewModel向上與視圖層View進行雙向數據綁定，向下與Model經過接口請求進行數據交互，起到承上啓下的做用。前端
MVVM的出現促進了前端開發和後端開發邏輯的分離，大大提升了開發效率。vue
二、什麼是Vue？
Vue.js（讀音 /vjuː/, 相似於 view）是一個MVVM架構的庫，是一套構建用戶界面的漸進式輕量級JavaScript框架。它以數據驅動和組件化的思想構建。node
Vue.js與其餘重量級框架不一樣的是，它採用自底向上增量開發的設計。它簡潔、易於理解且能快速上手。webpack
Vue.js的目標是經過儘量簡單的 API 實現響應的數據綁定和組合的視圖組件。 git
Vue.js是經過操做數據來實現頁面的更新，JQuery是經過操做DOM來改變頁面的顯示。github
相關網站：https://cn.vuejs.org、http://doc.vue-js.comweb
2、Vue技術棧vue-router
基於Vue的技術棧是能夠構建強大的前端項目的。
一、Node.js
官網：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
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]
三、webpack
一款強大的文件打包工具，能夠將咱們的前端項目文件（JavaScript、CSS、Fonts、Images）統一打包壓縮至JS中，而且能夠經過vue-loader等加載器實現語法轉化與加載。
一、經過 npm 全局安裝 webapck
npm install -g webpack
二、在項目中安裝 webpack
npm install webpack --save-dev
四、vue-cli
Vue的腳手架工具，它是一個專門爲單頁面應用快速搭建繁雜的腳手架，它能夠輕鬆的建立新的應用程序並且可用於自動生成vue和webpack的項目模板。
一、經過 npm 全局安裝vue-cli
npm install -g vue-cli
二、使用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-router
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沒有了。
六、vuex
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的提交。
3、推薦Vue多端UI框架
一、移動端UI框架
1）Vant UI
有贊公司開發的移動端 Vue 組件庫。
官網地址：https://youzan.github.io/vant/#/zh-CN/intro
2）Mint UI
餓了麼公司開發的移動端 Vue 組件庫。
官網地址：mint-ui.github.io/#!/zh-cn
二、PC端UI框架
1）Element
一套爲開發者、設計師和產品經理準備的基於 Vue 2.0 的桌面端組件庫。
官網地址：https://element.eleme.cn/#/zh-CN
2）iView組件庫
iView，是一套基於 Vue.js 的開源 UI 組件庫，主要服務於 PC 界面的中後臺產品。
官網地址：https://www.iviewui.com/docs/introduce
三、後臺管理端UI框架
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
