使用 Vue 开发单页应用全攻略

使用 Vue 开发单页应用全攻略

网上面有很多关于如何使用 Vue 开发单页应用的教程,从 Vue-cli 的使用到 Vue router 的配,也是非常的详细。但是却没有对各个需要的知识点做扩展,再加上技术的更新换代也是几何倍的,所以现在决定写一系列关于如何从头开发 Vue 单页应用的攻略,希望对各大热爱学习的朋友有所帮助,同时如果写的有什么不对的地方希望指正。谢谢。

一、知识储备

EcmaScript 6

ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标 准,已经在2015年6月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

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 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。

Sass 能够使你像开发真正的计算机语言般开发你的 CSS。什么,你想将常用的 CSS 封装成一个函数,或者继承上一个 CSS 的样式?没问题,使用 Sass 就可以解决了。当然,同样优秀的还有 Less 和 Stylus,这里不做讨论。

Sass 官网:

Sass

二、开始使用脚手架

使用 Webpack 搭建过项目的人肯定知道,光是 webpack.config.js 和 package.json 的配置就非常的复杂了,更别提其他的各种文件了。感谢 Vue-cli 使这一切变得非常的简单,接下来介绍一下如何使用 Vue-cli 搭建开发环境。

  1. 全局安装 vue-cli
cnpm install -g vue-cli
  1. 初始化 Vue 项目
vue init webpack my-project
  1. 进入 my-project
还有 73% 的精彩内容
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,384评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,845评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,148评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,640评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,731评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,712评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,703评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,473评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,915评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,227评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,384评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,063评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,706评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,302评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,531评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,321评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,248评论 2 352

推荐阅读更多精彩内容

  • 前言 webpack2和vue2已经不是新鲜东西了,满大街的文章在讲解webpack和vue,但是很多内容写的不是...
    技术宅小青年阅读 6,530评论 4 43
  • “你在想什么?”闵玧其从你背后抱住了你,跟你一起站在落地窗前,看着外面的烟火通明。 你因他收紧的怀抱而回过神来,“...
    YunkiCho阅读 331评论 0 2
  • 今天想谈一谈死亡,是三次近距离的接触。 第一个人是一位老爷爷,和蔼可亲,耳朵有些背,每次听不清时他都会笑。他有数个...
    藤叶阅读 257评论 0 3
  • 注:这是瓷心鱼的第11篇推荐。 一、关键词:自控力。 一个人能够成为一个什么样的人,想要成为一个什么样的人,主要取...
    瓷心鱼阅读 691评论 0 0
  • 我是日记星球166号星宝宝~媛珂,正在参加小牛妈妈的日记星球21天蜕变之旅的写作训练!这是我的第6篇原创日记!我相...
    媛珂阅读 438评论 0 2