美文网首页
WEB开发系列4:Vue前端开发实务之尝鲜SPA开发

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

作者: 弦思非凡 | 来源:发表于2018-08-04 08:15 被阅读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

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项目技术栈

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

相关文章

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

    Vue.js前端开发 Vue.js 是什么 Vue.js是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是...

  • 计算机毕业设计Python新冠疫情数据分析可视化平台

    开发技术 前端开发:VUE、ElementUI、ECharts、Maptalks、D3js 后端web开发:Fla...

  • Web前端开发之构建Vue-cli3.0工程

    ** Web前端开发之构建Vue-cli3.0工程 ** # 参考资料 Standard Tooling for ...

  • 前端学习资料

    前端 Html+CSS+JS Web前端开发之HTML+CSS精英课堂【渡一教育】 Web前端开发之JavaScr...

  • SPA:单页应用

    场景 中后台管理系统 H5前端开发 跨端APP开发 技术栈 Springboot,vue-cli,SPA,Elem...

  • 2018-05-16

    web前端开发 什么是web前端 web前端开发也戏称“web前端开发攻城狮”,目前这个职位也叫“大前端”。这个职...

  • HTML基础

    新的征程 web前端介绍 web前端开发做什么 pc端web开发;移动端web开发;混合app开发;网页游戏/移动...

  • 07-HTML标签

    前端开发 前端开发也叫做web前端开发,它指的是基于web的互联网产品的页面开发及功能开发。 html HTML是...

  • Vagrant 虚拟环境利器

    开发环境之痛 软件开发少不了就是开发环境,Web开发对环境的依赖则更大。Web开发中,无论前端还是后端,都少不了与...

  • Web扫雷开发小记(1)

    目录Web扫雷开发小记(2)Web扫雷开发小记(3)Web扫雷开发小记(4) 刚好今天做阿里前端笔试问到扫雷了,那...

网友评论

      本文标题:WEB开发系列4:Vue前端开发实务之尝鲜SPA开发

      本文链接:https://www.haomeiwen.com/subject/ofppvftx.html