用一个完成的 Vue 系列文章,让大家全面理解 Vue 的实现原理,掌握实用技巧,能在实战中使用 Vue,解锁一个开发技能。文末有文章大纲请查看。不墨迹了!马上写内容:
1. 为什么用 Vue?
官网:易用、灵活、高效
翻译成人话:省时省力 => 省钱
2. 解决了什么问题?
以前用 JQuery,业务逻辑和 UI 更改混在一起,业务复杂的时候,手动管理 UI 状态非常繁琐,尤其手机端的单页面程序,Vue 只关注数据。
举个例子,过年了,你想吃红烧肉,
jquery 去实现思路就是:
烧水、把肉切成块,煮熟,烧热油,炖,加调料,出锅,关火,但是如果工序特别多,完了,你可能到下午也吃不上,另外也可能因为步骤弄错了,味道不好。
翻译成官话,业务逻辑和 UI 更改混在一起,要详细知道过程。
Vue 去实现思路是:
1kg 肉 + 500 克调料 + 2 勺油 + 50g 调料,扔到微波炉里,调到大火位置,20 分钟后吃就行了。你只要算好各种食材的比例,不用关心做菜的过程,Vue 就是那个微波炉。
翻译成官话,数据驱动,玩的就是数据。
3. 为什么是 Vue 而不是其它?
Vue、React、Angular 各有各的好处,但是 Vue 上手确实容易。
4. 项目搭建步骤:
4.1 Vue 官网 **
官网:
https://cn.Vuejs.org/index.html
4.2 开发环境安装
npm install -g Vue-cli
4.3 配置项目
Vue init webpack helloworld
配置如图所示:
4.4 运行项目
cd helloworld
npm run dev 开发
npm run build 编译
在浏览器输入:
http://localhost:8080/
看到 Vue,就跑通了。
本系列内容可以让你的 Vue 技术有节奏的提高。
从 Vue 基础开始,循序渐进,含有常用实战项目,贴近企业真实现状。
让大家全面理解 Vue 的实现原理,掌握实用技巧,能在实战中使用 Vue,解锁一个开发技能。
内容:Vue 基础概念 + 常用实战训练 + 必要操作
入门:
Vue 基础语法
Vue 实例与前端组件化
组件间基础传值
Vuex 实际应用
插槽的实用技巧
动画效果与动画原理
实战:
Vue 实战预热
商品列表页面开发
评论页面开发
商家信息页面开发
购物车页面开发
联调与上线
项目联调
真机测试
打包上线
顺便提醒一下思否站内的小伙伴们,3 月 23 号,前端职业规划师 Maxwell,在线 live 为大家讲解跳槽、面试相关的实战攻略。感兴趣的可以猛戳!!!