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

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

VSCode之Vue插件安装

网络参考文档：

VS Code之Vue开发常用插件 http://blog.csdn.net/archer119/article/details/72789772

vscode 插件推荐 - 献给所有前端工程师（2017.8.18更新） https://segmentfault.com/a/1190000006697219

• HTML Snippets 超级实用且初级的 H5代码片段以及提示
• HTML CSS Support 让html标签上写class智能提示当前项目所支持的样式
• Debugger for Chrome 让vscode映射chrome的debug功能，静态页面都可以用 vscode 来打断点调试，真666~
• vscode-icon 让vscode资源树目录加上图标，必备良品！
• Path Intellisense 自动路劲补全，默认不带这个功能的
• Path Autocomplete 文件自动路径提示
• ESlint ESlint语法提示
• Bracket Pair Colorizer 让括号拥有独立的颜色，易于区分
• Auto Close Tag 自动补全html标签
• Auto Rename Tag 同步更改html尾标签
• JavaScript (ES6) code snippets ES6语法快捷键支持
• GitLens 丰富的git日志插件
• Project Manager 在多个项目之前快速切换的工具
• vetur 语法高亮、智能感知、Emmet等
• VueHelper snippet代码片段
• Vue 2 Snippets vue快捷键提示
• ftp-sync 实现客户端与服务器端代码的同步
• Material 冷门、好看、实用。此主题已停更许久

Vue常用开发规范

VUEJS开发规范 https://segmentfault.com/a/1190000012610056

Vue+Webpack使用规范 https://www.jianshu.com/p/a999f9c4f28c

Vue.js 组件编码规范 https://github.com/pablohpsilva/vuejs-component-style-guide/blob/master/README-CN.md#%E7%9B%AE%E5%BD%95

Vue网络学习链接

• 安装vue.js的方法 https://www.cnblogs.com/qdrw/articles/6380091.html
• Vue.js教程 https://www.imooc.com/learn/694
• Vue2入门及到实战开发 https://pan.baidu.com/s/1Un68u9L9nisYO6w2Z5uDbA
• ECMAScript https://baike.baidu.com/item/ECMAScript/1889420?fr=aladdin
• ES6快速入门 https://www.imooc.com/learn/955
• ES6这些就够了 https://www.jianshu.com/p/287e0bb867ae
• vuex最简单、最详细的入门文档 https://segmentfault.com/a/1190000009404727
• Vue-router2.0学习笔记 https://segmentfault.com/a/1190000007825106
• Vue-router官方文档 https://router.vuejs.org/zh-cn/
• Mock.js官方 http://mockjs.com/
• vue+mockjs 模拟数据，实现前后端分离开发 https://www.cnblogs.com/jasonwang2y60/p/7302449.html
• 在vue-cli搭建的项目中使用mockjs https://segmentfault.com/a/1190000010592626

Vue项目技术栈

• vue-router
• vuex
• axios
• mock.js