使用 Vue 開發(fā)單頁應用全攻略
網上面有很多關于如何使用 Vue 開發(fā)單頁應用的教程,從 Vue-cli 的使用到 Vue router 的配,也是非常的詳細。但是卻沒有對各個需要的知識點做擴展,再加上技術的更新換代也是幾何倍的,所以現在決定寫一系列關于如何從頭開發(fā) Vue 單頁應用的攻略,希望對各大熱愛學習的朋友有所幫助,同時如果寫的有什么不對的地方希望指正。謝謝。
一、知識儲備
EcmaScript 6
ECMAScript 6.0(以下簡稱 ES6)是 JavaScript 語言的下一代標 準,已經在2015年6月正式發(fā)布了。它的目標,是使得 JavaScript 語言可以用來編寫復雜的大型應用程序,成為企業(yè)級開發(fā)語言。
ES6 相對于它以前的版本可謂是突飛猛進,新增了塊作用域、箭頭函數、Class、Promise、Module 以及 N 多的新特征和語法。而且不需要擔心不同瀏覽器對 ES6 的兼容性問題,你可以放心的使用 Babel 或 TypeScript 來處理各種問題。
學習 ES6 語法中比較常用的部分推薦看如下文章:
學習 ES6 的全部特征推薦阮一峰開源的書籍
Sass
Sass 是一款強化 CSS 的輔助工具,它在 CSS 語法的基礎上增加了變量 (variables)、嵌套 (nested rules)、混合 (mixins)、導入 (inline imports) 等高級功能,這些拓展令 CSS 更加強大與優(yōu)雅。使用 Sass 以及 Sass 的樣式庫(如 Compass)有助于更好地組織管理樣式文件,以及更高效地開發(fā)項目。
Sass 能夠使你像開發(fā)真正的計算機語言般開發(fā)你的 CSS。什么,你想將常用的 CSS 封裝成一個函數,或者繼承上一個 CSS 的樣式?沒問題,使用 Sass 就可以解決了。當然,同樣優(yōu)秀的還有 Less 和 Stylus,這里不做討論。
Sass 官網:
二、開始使用腳手架
使用 Webpack 搭建過項目的人肯定知道,光是 webpack.config.js 和 package.json 的配置就非常的復雜了,更別提其他的各種文件了。感謝 Vue-cli 使這一切變得非常的簡單,接下來介紹一下如何使用 Vue-cli 搭建開發(fā)環(huán)境。
- 全局安裝 vue-cli
cnpm install -g vue-cli
- 初始化 Vue 項目
vue init webpack my-project
- 進入 my-project