使用 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% 的精彩内容
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

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