WEB开发系列4：Vue前端开发实务之尝鲜SPA开发

2018-08-04 本文已影响32人弦思非凡

Vue.js前端开发

Vue.js 是什么

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用（SPA，Simple Page Application）。

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。Vue.js是一个MVVM模式的框架。如果用一个词来形容它，就是 “轻·巧” 。如果用一句话来描述它，它能够集众多优秀逐流的前端框架之大成，但同时保持简单易用。

图片来源于网络，图文无关

vue.js的特点:

易用：已经会了HTML,CSS,JavaScript？即刻阅读指南即可开始构建应用！

灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。

高效： 16kb min+gzip 的运行大小，超快虚拟 DOM，最省心的优化。

Vue开发环境安装

以下更详细安装可参考链接：https://www.jianshu.com/p/1626b8643676

安装node.js，从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装），安装完成后，就可以使用自带npm包管理工具进行各类包的下载和安装了。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。 Node.js 的包管理器 npm，是全球最大的开源库生态系统。https://nodejs.org/en/

node -v # v8.10.0
npm -v # 5.6.0

安装npm淘宝镜像。因为使用的npm服务器在国外，有的时候我们安装“依赖”的时候很很慢很慢超级慢，所以就用这个cnpm来安装我们说需要的“依赖”。打开命令行工具，执行以下命令：

npm install -g cnpm --registry= https://registry.npm.taobao.org
cnpm -v

安装webpack。

npm install webpack -g
npm install webpack-cli -g # 新版本的命令行工具已经迁移到webpack-cli
webpack -v # 4.1.1

安装vue-cli脚手架构建工具。

npm install vue-cli -g
vue-cli -V

通过以上四步，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目。注意：这里是默认服务启动的是本地的8080端口，所以请确保你的8080端口不被别的程序所占用。

cd d:\srchome\tom # 进入项目总目录
vue init webpack tom # 创建TOM项目
cd tom # 进入VUE项目目录
npm install # 安装项目所需要的依赖包或者 cnpm install
cnpm install vue-router axios --save # 安装Vue使用的相关包
npm run dev # 运行项目测试，并可使用http://127.0.0.1:8080