使用 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 语法中比较常用的部分推荐看如下文章:
学习 ES6 的全部特征推荐阮一峰开源的书籍
Sass
Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。
Sass 能够使你像开发真正的计算机语言般开发你的 CSS。什么,你想将常用的 CSS 封装成一个函数,或者继承上一个 CSS 的样式?没问题,使用 Sass 就可以解决了。当然,同样优秀的还有 Less 和 Stylus,这里不做讨论。
Sass 官网:
二、开始使用脚手架
使用 Webpack 搭建过项目的人肯定知道,光是 webpack.config.js 和 package.json 的配置就非常的复杂了,更别提其他的各种文件了。感谢 Vue-cli 使这一切变得非常的简单,接下来介绍一下如何使用 Vue-cli 搭建开发环境。
- 全局安装 vue-cli
cnpm install -g vue-cli
- 初始化 Vue 项目
vue init webpack my-project
- 进入 my-project