WEB开发系列4:体验Vue前端开发实践SPA开发

Vue。js前端开发

Vue。什么是js

Vue。Js是一个用于构建用户界面的渐进式框架。与其他重量级框架不同，Vue采用了自下而上的增量开发设计。Vue的核心库只关注视图层，很容易学习并与其他库或现有项目集成。另一方面，Vue完全能够驱动由Vue生态系统支持的单个文件组件和库开发的复杂单页app（SPA，Simple page Application）。

Vue。js的目标是通过最简单的API实现响应和组合视图组件的数据绑定。Vue。Js是MVVM模式的框架。如果你用一个词来形容它，那就是“轻盈精致”。如果用一句话来描述它，它可以集成许多优秀的逐流前端框架，但它仍然简单易用。

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

vue.js的特点：

易于使用：你学会了HTML、CSS、JavaScript吗？立即阅读指南，开始构建app！

灵活：简单紧凑的核心，先进的技术堆栈，足以处理任何规模的应用。

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

Vue开发环境安装

有关详细安装信息，请参阅以下链接：

安装节点。js from node在js官方网站上下载和安装node的安装过程非常简单。下一步就是安装（傻瓜安装）。安装完成后，您可以使用内置的npm包管理工具下载和安装各种包。节点。Js是一个基于Chrome V8引擎的JavaScript运行环境。节点。Js使用事件驱动的非阻塞I/O模型，使其轻巧高效。节点。js的包管理器npm是世界上最大的开源库生态系统。

节点-v#v8.10.0

npm-v#5.6.0

安装npm淘宝镜像。因为使用的npm服务器在国外，有时我们安装“依赖”的速度非常慢，非常慢，而且非常慢，所以我们使用这个cnpm来安装我们所需要的“依赖”。打开命令行工具并执行以下命令：

npm安装-g cnpm--注册表=

cnpm-v

安装webpack。

npm安装webpack

Npm install webpack cli-g#新版本的命令行工具已迁移到webpack cli

webpack-v#14.1.1

安装vue cli脚手架施工工具。

npm安装vue cli-g

vue-cli-V

完成以上四个步骤后，我们需要准备的环境和工具就准备好了。接下来，我们将使用vue-cli构建项目。注意：这里的默认服务启动本地8080端口，因此请确保您的8080端口未被其他程序占用。

Cd d:home tom#输入项目目录

vue-init webpack TOM#创建TOM项目

Cd tom#进入VUE项目目录

Npm install#安装项目所需的依赖包或cnpm安装

Cnpm安装vue路由器axios--save#安装vue使用的相关软件包

Npm run dev#运行项目测试并使用https://127.0.0.1:8080

VSCode Vue插件安装

Web参考：

Vue开发VS代码的常用插件

Vscode插件推荐-专用于所有前端工程师（2017年8月18日更新）

HTML代码段超级实用和初步的H5代码片段和提示

html CSS支持允许html标记编写一个类，以智能地提示当前项目支持的样式

chrome调试器允许vscode映射chrome的调试功能。静态页面可以使用vscode中断点调试。真666~

vscode图标将图标添加到vscode资源树目录中，这是必须的！

Path Intellisense自动道路加固完成，默认情况下不具有此功能

路径自动完成文件自动路径提示

ESlint ESlint语法提示

括号对着色器使括号具有独立的颜色，易于区分

自动关闭标记自动完成html标记

自动重命名标记同步更改html尾部标记

JavaScript（ES6）代码段ES6语法快捷键支持

GitLens富Git日志插件

项目经理用于在多个项目之间快速切换的工具

Vetur语法高亮显示、intellisense、Emmet等

VueHelper片段

Vue 2代码段Vue快捷键提示

ftp同步以同步客户端和服务器代码

材料酷、好看、实用。此主题已停止很长时间

Vue通用开发规范

VUEJS开发规范

Vue+Webpack使用规范

Vue。Js组件编码规范

Vue eLearning链接

js的安装vue方法

Vue。Js教程

Vue2简介和实践发展

ECMA脚本

ES6快速入门

ES6这些就够了

简单的