Vue.js前端MVVM框架实战篇
相信大家对vue.js这个前端框架有了一定的了解。想必也想把Vue急切的运用在项目中,看看它的魅力到底有多大?别急,今天我会满足大家的想法。
我们一起来看看“Webpack+Vue”的开发模式相比以往老项目(Gulp+jQuery)的开发模式的魅力在哪里。
一、配置开发环境
1、先安装Node和Webpack
2、建立一个文件夹为:Vue-project,然后初始化生成package.json。运行以下指令:
npm init
初始化完成后,添加项目开发所依赖的包
"dependencies": {
"vue": "^2.2.2",
"vue-router": "^2.3.0",
"vue-template-compiler": "^2.2.2"
},
"devDependencies": {
"axios": "^0.15.3",
"babel": "^6.3.13",
"babel-core": "^6.3.21",
"babel-loader": "^6.2.0",
"babel-plugin-component": "^0.4.1",
"babel-preset-es2015": "^6.3.13",
"babel-preset-stage-2": "^6.22.0",
"babel-runtime": "^5.8.34",
"clean-webpack-plugin": "^0.1.9",
"cross-env": "^1.0.6",
"css-loader": "^0.16.0",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.8.5",
"html-webpack-plugin": "^2.17.0",
"moment": "^2.15.1",
"node-sass": "^4.5.0",
"sass-loader": "^3.2.3",
"style-loader": "^0.12.3",
"url-loader": "^0.5.6",
"vue-loader": "^11.1.4",
"vue-hot-reload-api": "^2.0.6",
"webpack": "^1.12.0",
"webpack-dev-server": "^1.14.0"
}
3、安装所需模块,运行指令
npm install
注:可能由于网络原因,导致某些包不能下载成功。别担心,我们可以尝试把npm的镜像地址切换成淘宝镜像。运行如下指令:
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装指令跟npm一样,只不过前面需要添加一个c。
比如:cnpm install xxxx
二、搭建项目结构
可能在我们以前开发一个项目,所搭建的项目结构如下图所示:
可是现在的项目基本都是基于前端工程化的,包括的东西也很多(前端路由、包管理、配置文件...)。很显然,从最开始按照单一资源分类,来划分目录结构是不可行的。 于是,又得改造项目目录结构。可能是这样的 (仅供参考)
俗话说的好:“工欲善其事必先利其器”。一个合理的项目结构,能体现各模块的职责与分工,减少成员间的沟通成本,更好的管理项目。
三、正式开发
好了,可能有人会说,你前面扯了很多废话。都还没谈如何开发呢? 别急大兄弟,心急可吃不了热豆腐,得慢慢来!
运行我们之前添加好的指令
npm run dev
访问
http://localhost:8188
不出意外,你会看到如下图一样:
那么恭喜你,一个Vue+Webpack的初始化项目已经完成了。不妨赶紧修改下文件:
1、看是否能实现热加载。
2、父组件传递数据到子组件,子组件能否收到。
3、ajax能否正常运行 注:(ajax模块看下图)
....
于是,我们很愉快的把项目开发完成。那么怎么把项目上线呢?
可以运行以下打包命令
npm run build
打包成功后,就行生成一个dist文件夹。然后把这个文件夹放到后端的web容器里面就行了。
看完文章后,可能有些朋友会有一些疑问:
1、前端页面之前跳转是如何是实现的?
答:因为Vue提供了一款叫路由的工具Vue-Router,页面的切换于跳转就是靠它实现的。
2、组件间的数据传递,跨组件通信有什么方法呢?或者说几个组件同时共享一份数据!
答:虽然官方提供了事件总线来解决,但我个人建议你可以用Vuex(全局状态管理)来解决。
3、除了用你的项目脚手架(初始化),还有其它的脚手架可以直接生成项目吗?
答:官方提供了Vue-cli的工具,也可以帮你完成项目初始化工作。
写在最后:Vue+webapck的这种开发模式,相对于老项目。我觉得在最大的好处在于:
1、提升了我们的开发效率(通过webpack可以实现组件按需加载、静态资源打包合并压缩...)
2、组件化友好(任何一个组件都是一个独立的模块,互不影响)
Vue是一个渐进式的框架,你可以把它当成简简单单的模板使用。也可以用作SPA(单页面应用),进行前后端分离开发。
还犹豫什么啊,赶紧上车啊!
本文出处:http://www.234music.cn/
Vue.js前端MVVM框架实战篇的更多相关文章
- 前端MVVM框架:Knockout.JS(一)
前言 在我们平时开发 Web 应用程序的时候,如果项目不算特别大的话,一般都是拿 jQuery 再配合一些前端 UI 框架就在项目上面应用了.如果页面逻辑稍微复杂的话,那个在写前端 JavaScrip ...
- js架构设计模式——前端MVVM框架设计及实现(二)
前端MVVM框架设计及实现(二) 在前端MVVM框架设计及实现(一)中有一个博友提出一个看法: “html中使用mvvm徒增开发成本” 我想这位朋友要表达的意思应该是HTML定义了大量的语法标记,HT ...
- js架构设计模式——前端MVVM框架设计及实现(一)
前端MVVM框架设计及实现(一) 最近抽出点时间想弄个dom模块化的模板引擎,不过现在这种都是MVVM自带的,索性就想自己造轮子写一个简单的MVVM框架了 借鉴的自然还是从正美的avalon开始了,我 ...
- 【转】手摸手,带你用vue撸后台 系列三(实战篇)
前言 在前面两篇文章中已经把基础工作环境构建完成,也已经把后台核心的登录和权限完成了,现在手摸手,一起进入实操. Element 去年十月份开始用vue做管理后台的时候毫不犹豫的就选择了Elemen, ...
- Vue.js – 基于 MVVM 实现交互式的 Web 界面
Vue.js 是用于构建交互式的 Web 界面的库.它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API.从技术上讲, Vue.js 集中在 MVVM 模式上的视图模型层,并 ...
- Vue.js 和 MVVM 的小细节
Vue.js 和 MVVM 的小细节 转载 作者:流云诸葛 链接:www.cnblogs.com/lyzg/p/6067766.html MVVM 是Model-View-ViewModel 的缩写, ...
- 前端MVVM框架设计及实现(二)
在前端MVVM框架设计及实现(一)中有一个博友提出一个看法: “html中使用mvvm徒增开发成本” 我想这位朋友要表达的意思应该是HTML定义了大量的语法标记,HTML中放入了太多的逻辑,从而增加了 ...
- 轻量级前端MVVM框架avalon - 初步接触
迷你简单易用的MVVM框架 avalon的介绍http://rubylouvre.github.io/mvvm/ 按照作者的介绍,在HTML中添加绑定,在JS中用avalon.define定义View ...
- 前端MVVM框架avalon - 模型转换1
轻量级前端MVVM框架avalon - 模型转换(一) 接上一章 ViewModel modelFactory工厂是如何加工用户定义的VM? 附源码 洋洋洒洒100多行内部是魔幻般的实现 1: fun ...
随机推荐
- 3DMax下载与安装(注册机为网上收集,仅供学习与研究,支持正版)
3DS Max 全称3D Studio Max,是Autodesk公司开发的三维动画制作和渲染软件(Autodesk AutoCAD 2012也是Autodesk公司的软件产品) 3DS Max广泛应 ...
- AcWing 24. 机器人的运动范围
习题地址 https://www.acwing.com/solution/acwing/content/2970/ 题目描述地上有一个 m 行和 n 列的方格,横纵坐标范围分别是 0∼m−1 和 0∼ ...
- mapreduce 读写Parquet格式数据 Demo
import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs ...
- 关于System.InvalidOperationException异常
什么是InvalidOperationException 操作无效异常.当方法调用对对象的当前状态无效时引发的异常. 继承 Object Exception SystemException Inval ...
- selenium--更改标签的属性值
前戏 在进行web自动化的时候,我们有时需要获取元素的属性,有时需要添加,有时需要删除,这时候就要通过js来进行操作了 实战 from selenium import webdriver import ...
- 关于组件--React
组件按照页面结构可以分成,头部.底部.内容部分.这样就可以写三个组件. 组件内部还可以包含下一级组件, 比如头部,可以包含登录,注册等组件. 底部 可以 包含一些链接等. 内容部分可以包含表单组件.按 ...
- nRF51822 看门狗和OTA (无线升级功能)的尴尬笔记
很久没有记笔记了.今天要记点东西,不然以后又忘记了. 随着时代的发展,现在的SDK已经是13.0了.蓝牙5.0也就来了.废话就少说了,记笔记吧. 两年前搞过nRF51822 的无线升级功能,那时候用的 ...
- Spring Boot 排除自动配置的 4 种方法,关键时刻很有用!
Spring Boot 提供的自动配置非常强大,某些情况下,自动配置的功能可能不符合我们的需求,需要我们自定义配置,这个时候就需要排除/禁用 Spring Boot 某些类的自动化配置了. 比如:数据 ...
- caffe解析
Caffe支持CUDA,Caffe和TensorFlow没有给出分布式的版本, 可以使用多gpu,Caffe通过直接在执行指令后面加上-gpu 0,1
- websocket通信1009错误,
问题说明: springboot继承 WebSocketConfigurer实现websocket通信服务,服务器端报错,"The decoded text message was too ...