01 为什么用Vue?

官网：易用、灵活、高效

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

02 解决了什么问题

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

举个例子：过年了，你想吃红烧肉。

• jquery去实现思路就是：

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

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

• Vue去实现思路是：

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

  翻译为：数据驱动，玩的就是数据。

03 为什么是Vue而不是其他

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

05 Vue官网

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

06 开发环境安装

npm install -g Vue-cli

03 配置项目

xxxxxxxxxx
Vue init webpack helloworld

配置如图所示：

04 运行项目

xxxxxxxxxx
cd helloworld
npm run dev  开发
npm run build 编译

在浏览器输入：

http://localhost:8080/

看到Vue，就跑通了。

喜欢文章的小伙伴，请继续关注噢！

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

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

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

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

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

入门：

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

实战：

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

联调与上线

项目联调

真机测试

打包上线

大纲

第一章 项目开发环境搭建

第二章 项目架构

第三章 项目业务实现

第四章 项目优化处理

第五章 项目测试

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

内容很丰富，请抓紧时间上车！