专栏首页大前端666Vue实战系列—项目搭建四步曲(0)
原创

Vue实战系列—项目搭建四步曲(0)

开篇:想通过输出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 编译

在浏览器输入:

(文章有这个链接就不能发布、大家都明白,就是本地8080)

看到Vue,就跑通了。


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

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

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

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

入门:

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

实战:

  • Vue实战预热
  • 商品列表页面开发
  • 评论页面开发
  • 商家信息页面开发
  • 购物车页面开发
  • 联调与上线
  • 项目联调
  • 真机测试
  • 打包上线

小伙伴们请持续关注,有任何学习问题,都可以留言交流!

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue实战系列—从目录结构谈可扩展架构设计(1)

    好的项目代码结构会大大提升项目的维护性和可扩展性。同时我们可以提供友好的说明,以便其他成员理解项目和快速定位。

    前端大彬哥
  • 使用Html5多媒体实现微信语音功能

    随着微信等社交App的兴起,语音聊天成为很多App必备功能,大到将语音聊天作为主要功能的社交App,小到电商App的语音客服、店小二功能,语音聊天成为了必不可少...

    前端大彬哥
  • VUE实战—商品展示切图(7)

    上次我们通过设计评价组件这个过程,了解到了组件设计中的良好的习惯,比如,文件夹如何支撑组件,图片,组件路径的存放于设置。

    前端大彬哥
  • 为什么现在的开发者总是拿 Vue.js 和 JavaScript 巨头 Angular、React 比较?

    Vue.js 是一个用来构建 web UI 的 JavaScript 库,基于 MIT 开源协议。Vue.js 于 2013 年首次分布,但是在接下来的两年内,...

    疯狂的技术宅
  • 译文:使用Vue 3加快网络应用的速度

    译文:http://caibaojian.com/vue3-faster.html

    前端开发博客
  • 拥抱 Vue 3 系列之 JSX 语法

    “别再更新了,学不动了”。这句话不知道出了多少开发者的辛酸。在过去的一年中,Vue 团队一直都在开发 Vue.js 的下一个主要版本,就在 6 月底,尤大更新同...

    政采云前端团队
  • Vue3 对 Web 应用性能的改进[每日前端夜话0xE1]

    有关即将发布的 Vue.js 的第 3 个主要版本的信息越来越多。通过下面的讨论,虽然还不能完全确定其所有内容,但是我们可以放心地认为,它将是对当前版本(已经非...

    疯狂的技术宅
  • Vue 3 最值得期待的五项重大更新

    Vue 团队非常擅长改进框架 API。Evan You 总结了 Vue 3 的几大改进目标:

    Java帮帮
  • 【Vuejs】397- Vue 3最值得期待的五项重大更新

    我非常重视性能,所以在探索具体的 API 之前我想谈一谈 Vue 3 的性能。可讲的东西是很多的!几乎每个角落都能找到明显的改进!

    pingan8787
  • 2019 Vue开发指南:你都需要学点啥?

    如果您是Vue开发的新手,您可能已经听过很多关于它的专业术语了,例如:单页面应用程序、异步组件、服务器端呈现等。

    Javanx

扫码关注云+社区

领取腾讯云代金券