<

Vue项目搭建四步曲(1.1)

01 为什么用Vue?

官网:易用、灵活、高效

翻译为:省时省力>>省钱

img

 

02 解决了什么问题

以前用JQuery,业务逻辑和UI更改混在一起,业务复杂的时候,手动管理UI状态非常繁琐,尤其手机端的单页面程序,Vue只关注数据。

 

举个例子:过年了,你想吃红烧肉。

 

  • jquery去实现思路就是

    烧水、把肉切成块,煮熟,烧热油,炖,加调料,出锅,关火,但是如果工序特别多,完了,你可能到下午也吃不上,另外也可能因为步骤弄错了,味道不好。

    翻译为:业务逻辑和UI更改混在一起,要详细知道过程。

 

  • Vue去实现思路是:

    1kg肉 + 500克调料 + 2勺油 + 50g调料,扔到微波炉里,调到大火位置,20分钟后吃就行了。你只要算好各种食材的比例,不用关心做菜的过程,Vue就是那个微波炉。

    翻译为:数据驱动,玩的就是数据。

img

 

03 为什么是Vue而不是其他

Vue、React、Angular各有各的好处,但是Vue上手确实容易。

 

img

 

05 Vue官网

官网:https://cn.Vuejs.org/index.html

 

06 开发环境安装

 

03 配置项目

配置如图所示:

img

 

04 运行项目

在浏览器输入:

http://localhost:8080/

看到Vue,就跑通了。

读书分割线

喜欢文章的小伙伴,请继续关注噢!

面包妹妹会在未来的日子里,持续更新“Vue系列”内容。

 

本系列内容可以让你的Vue技术有节奏的提高。

从Vue基础开始,循序渐进,含有常用实战项目,贴近企业真实现状。

让大家深入全面理解Vue的实现原理,掌握实用技巧,能在实战中使用Vue,解锁一个开发技能。

 

img

内容:Vue基础概念 + 常用实战训练 + 必要操作

入门:

  • Vue基础语法
  • Vue实例与前端组件化
  • 组件间基础传值
  • Vuex实际应用
  • 插槽的实用技巧
  • 动画效果与动画原理

 

实战:

  • Vue实战预热
  • 商品列表页面开发
  • 评论页面开发
  • 商家信息页面开发
  • 购物车页面开发

 

联调与上线

项目联调

真机测试

打包上线

 

img

大纲

第一章 项目开发环境搭建

第二章 项目架构

第三章 项目业务实现

第四章 项目优化处理

第五章 项目测试

第六章 项目编译、打包、上线

 

内容很丰富,请抓紧时间上车!

img