相信大家对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框架实战篇的更多相关文章

  1. 前端MVVM框架:Knockout.JS(一)

    前言 在我们平时开发 Web 应用程序的时候,如果项目不算特别大的话,一般都是拿 jQuery 再配合一些前端 UI 框架就在项目上面应用了.如果页面逻辑稍微复杂的话,那个在写前端 JavaScrip ...

  2. js架构设计模式——前端MVVM框架设计及实现(二)

    前端MVVM框架设计及实现(二) 在前端MVVM框架设计及实现(一)中有一个博友提出一个看法: “html中使用mvvm徒增开发成本” 我想这位朋友要表达的意思应该是HTML定义了大量的语法标记,HT ...

  3. js架构设计模式——前端MVVM框架设计及实现(一)

    前端MVVM框架设计及实现(一) 最近抽出点时间想弄个dom模块化的模板引擎,不过现在这种都是MVVM自带的,索性就想自己造轮子写一个简单的MVVM框架了 借鉴的自然还是从正美的avalon开始了,我 ...

  4. 【转】手摸手,带你用vue撸后台 系列三(实战篇)

    前言 在前面两篇文章中已经把基础工作环境构建完成,也已经把后台核心的登录和权限完成了,现在手摸手,一起进入实操. Element 去年十月份开始用vue做管理后台的时候毫不犹豫的就选择了Elemen, ...

  5. Vue.js – 基于 MVVM 实现交互式的 Web 界面

    Vue.js 是用于构建交互式的 Web  界面的库.它提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单.灵活的 API.从技术上讲, Vue.js 集中在 MVVM 模式上的视图模型层,并 ...

  6. Vue.js 和 MVVM 的小细节

    Vue.js 和 MVVM 的小细节 转载 作者:流云诸葛 链接:www.cnblogs.com/lyzg/p/6067766.html MVVM 是Model-View-ViewModel 的缩写, ...

  7. 前端MVVM框架设计及实现(二)

    在前端MVVM框架设计及实现(一)中有一个博友提出一个看法: “html中使用mvvm徒增开发成本” 我想这位朋友要表达的意思应该是HTML定义了大量的语法标记,HTML中放入了太多的逻辑,从而增加了 ...

  8. 轻量级前端MVVM框架avalon - 初步接触

    迷你简单易用的MVVM框架 avalon的介绍http://rubylouvre.github.io/mvvm/ 按照作者的介绍,在HTML中添加绑定,在JS中用avalon.define定义View ...

  9. 前端MVVM框架avalon - 模型转换1

    轻量级前端MVVM框架avalon - 模型转换(一) 接上一章 ViewModel modelFactory工厂是如何加工用户定义的VM? 附源码 洋洋洒洒100多行内部是魔幻般的实现 1: fun ...

随机推荐

  1. tomcat相关知识点

    Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用. tomcat的文件结构: bin:用于存放启动和关闭tom ...

  2. hasura graphql-engine + plv8 集成

    hasura graphql-engine 是一款很不错的基于pg 的graphql 引擎,plv8 是pg 的一个扩展,我们可以使用js 编写 函数 ,触发器,而且对于es6 的语法也有比较完备的支 ...

  3. Codeforces 379F New Year Tree

    F. New Year Tree time limit per test2 seconds memory limit per test256 megabytes You are a programme ...

  4. selenium--表格和复选框的定位

    表格定位 HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  5. 使用docker部署nginx+tomcat架构(2):访问mysql数据库

    上一篇完成了通过docker部署nginx+tomcat的基础软件架构,但是距离一个真正可用的软件架构还差得很远.其中最重要的一点是缺少数据库这个角色的存在,那么本篇就来完善这一点. 废话少说,直接进 ...

  6. 使用Java8特性对list进行按属性去重

    编写工具类 public class DistinctUtil { public static <T> Predicate<T> distinctByKey(Function& ...

  7. bzoj2839 集合计数 组合计数 容斥原理|题解

    集合计数 题目描述 一个有N个元素的集合有2^N个不同子集(包含空集),现在要在这2^N个集合中取出若干集合(至少一个),使得它们的交集的元素个数为K,求取法的方案数,答案模1000000007.(是 ...

  8. git修改远程仓库名称[gitolite]

    参考 https://stackoverflow.com/questions/4708465/how-do-i-rename-a-git-repository-created-with-gitolit ...

  9. 经典算法(六) simhash

    参考文档: simhash算法原理及实现:https://blog.csdn.net/chenguolinblog/article/details/50830948

  10. USDT

    如果刚刚接触比特币,你可能会看到USDT并把它误认为美元. 实际上就是这样,这正是USDT开发团队的意思. Tether(USDT)是基于在Bitcoin Blockchain上发布的Omni Lay ...