使用 Vue 開發(fā)單頁應用全攻略

使用 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 語法中比較常用的部分推薦看如下文章:

30分鐘掌握ES6/ES2015核心內容

學習 ES6 的全部特征推薦阮一峰開源的書籍

ECMAScript 6 入門

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 官網:

Sass

二、開始使用腳手架

使用 Webpack 搭建過項目的人肯定知道,光是 webpack.config.js 和 package.json 的配置就非常的復雜了,更別提其他的各種文件了。感謝 Vue-cli 使這一切變得非常的簡單,接下來介紹一下如何使用 Vue-cli 搭建開發(fā)環(huán)境。

  1. 全局安裝 vue-cli
cnpm install -g vue-cli
  1. 初始化 Vue 項目
vue init webpack my-project
  1. 進入 my-project
還有 73% 的精彩內容
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。
支付 ¥2.99 繼續(xù)閱讀

相關閱讀更多精彩內容

  • 前言 webpack2和vue2已經不是新鮮東西了,滿大街的文章在講解webpack和vue,但是很多內容寫的不是...
    技術宅小青年閱讀 6,688評論 4 43
  • “你在想什么?”閔玧其從你背后抱住了你,跟你一起站在落地窗前,看著外面的煙火通明。 你因他收緊的懷抱而回過神來,“...
    YunkiCho閱讀 391評論 0 2
  • 今天想談一談死亡,是三次近距離的接觸。 第一個人是一位老爺爺,和藹可親,耳朵有些背,每次聽不清時他都會笑。他有數個...
    藤葉閱讀 333評論 0 3
  • 注:這是瓷心魚的第11篇推薦。 一、關鍵詞:自控力。 一個人能夠成為一個什么樣的人,想要成為一個什么樣的人,主要取...
    瓷心魚閱讀 786評論 0 0
  • 我是日記星球166號星寶寶~媛珂,正在參加小牛媽媽的日記星球21天蛻變之旅的寫作訓練!這是我的第6篇原創(chuàng)日記!我相...
    媛珂閱讀 498評論 0 2

友情鏈接更多精彩內容