Vue.js前端開發
Vue.js 是什么
Vue.js是一套構建用戶界面的 漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，并且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅動采用單文件組件和Vue生態系統支持的庫開發的復雜單頁應用（SPA，Simple Page Application）。
Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。Vue.js是一個MVVM模式的框架。如果用一個詞來形容它，就是 “輕·巧” 。如果用一句話來描述它，它能夠集眾多優秀逐流的前端框架之大成，但同時保持簡單易用。
vue.js的特點:
易用： 已經會了HTML,CSS,JavaScript？即刻閱讀指南即可開始構建應用！
靈活： 簡單小巧的核心，漸進式技術棧，足以應付任何規模的應用。
高效： 16kb min+gzip 的運行大小，超快虛擬 DOM，最省心的優化。
Vue開發環境安裝
以下更詳細安裝可參考鏈接：http://www.lxweimin.com/p/1626b8643676
- 安裝node.js，從node.js官網下載并安裝node，安裝過程很簡單，一路“下一步”就可以了（傻瓜式安裝），安裝完成后，就可以使用自帶npm包管理工具進行各類包的下載和安裝了。Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行環境。 Node.js 使用了一個事件驅動、非阻塞式 I/O 的模型，使其輕量又高效。 Node.js 的包管理器 npm，是全球最大的開源庫生態系統。https://nodejs.org/en/
node -v # v8.10.0
npm -v # 5.6.0
- 安裝npm淘寶鏡像。因為使用的npm服務器在國外，有的時候我們安裝“依賴”的時候很很慢很慢超級慢，所以就用這個cnpm來安裝我們說需要的“依賴”。打開命令行工具，執行以下命令：
npm install -g cnpm --registry= https://registry.npm.taobao.org
cnpm -v
- 安裝webpack。
npm install webpack -g
npm install webpack-cli -g # 新版本的命令行工具已經遷移到webpack-cli
webpack -v # 4.1.1
- 安裝vue-cli腳手架構建工具。
npm install vue-cli -g
vue-cli -V
- 通過以上四步，我們需要準備的環境和工具都準備好了，接下來就開始使用vue-cli來構建項目。注意：這里是默認服務啟動的是本地的8080端口，所以請確保你的8080端口不被別的程序所占用。
cd d:\srchome\tom # 進入項目總目錄
vue init webpack tom # 創建TOM項目
cd tom # 進入VUE項目目錄
npm install # 安裝項目所需要的依賴包 或者 cnpm install
cnpm install vue-router axios --save # 安裝Vue使用的相關包
npm run dev # 運行項目測試，并可使用http://127.0.0.1:8080
VSCode之Vue插件安裝
網絡參考文檔：
VS Code之Vue開發常用插件 http://blog.csdn.net/archer119/article/details/72789772
vscode 插件推薦 - 獻給所有前端工程師（2017.8.18更新） https://segmentfault.com/a/1190000006697219
- HTML Snippets 超級實用且初級的 H5代碼片段以及提示
- HTML CSS Support 讓html標簽上寫class智能提示當前項目所支持的樣式
- Debugger for Chrome 讓vscode映射chrome的debug功能，靜態頁面都可以用 vscode 來打斷點調試，真666~
- vscode-icon 讓vscode資源樹目錄加上圖標，必備良品！
- Path Intellisense 自動路勁補全，默認不帶這個功能的
- Path Autocomplete 文件自動路徑提示
- ESlint ESlint語法提示
- Bracket Pair Colorizer 讓括號擁有獨立的顏色，易于區分
- Auto Close Tag 自動補全html標簽
- Auto Rename Tag 同步更改html尾標簽
- JavaScript (ES6) code snippets ES6語法快捷鍵支持
- GitLens 豐富的git日志插件
- Project Manager 在多個項目之前快速切換的工具
- vetur 語法高亮、智能感知、Emmet等
- VueHelper snippet代碼片段
- Vue 2 Snippets vue快捷鍵提示
- ftp-sync 實現客戶端與服務器端代碼的同步
- Material 冷門、好看、實用。此主題已停更許久
Vue常用開發規范
VUEJS開發規范 https://segmentfault.com/a/1190000012610056
Vue+Webpack使用規范 http://www.lxweimin.com/p/a999f9c4f28c
Vue.js 組件編碼規范 https://github.com/pablohpsilva/vuejs-component-style-guide/blob/master/README-CN.md#%E7%9B%AE%E5%BD%95
Vue網絡學習鏈接
- 安裝vue.js的方法 https://www.cnblogs.com/qdrw/articles/6380091.html
- Vue.js教程 https://www.imooc.com/learn/694
- Vue2入門及到實戰開發 https://pan.baidu.com/s/1Un68u9L9nisYO6w2Z5uDbA
- ECMAScript https://baike.baidu.com/item/ECMAScript/1889420?fr=aladdin
- ES6快速入門 https://www.imooc.com/learn/955
- ES6這些就夠了 http://www.lxweimin.com/p/287e0bb867ae
- vuex最簡單、最詳細的入門文檔 https://segmentfault.com/a/1190000009404727
- Vue-router2.0學習筆記 https://segmentfault.com/a/1190000007825106
- Vue-router官方文檔 https://router.vuejs.org/zh-cn/
- Mock.js官方 http://mockjs.com/
- vue+mockjs 模擬數據，實現前后端分離開發 https://www.cnblogs.com/jasonwang2y60/p/7302449.html
- 在vue-cli搭建的項目中使用mockjs https://segmentfault.com/a/1190000010592626
Vue項目技術棧
- vue-router
- vuex
- axios
- mock.js
