vue2.0 练习项目-外卖APP(1)
前言
vue这个框架现在挺流行的,作为一个专注前端100年的代码爱好者,学习下目前流行的框架是必须的!在网上搜索vue的项目是比较少的,在官网进行了入门学习后,没有一个项目练习巩固下,学了就等于没学,所以我就决定自己写一个项目咯。在这里我也顺便分享下我学习vue的资源。我在GitHub上发现了一个vue的大神,在这我就免费给他打打广告吧!https://github.com/bailicangdu 这个是他的GitHub地址。
我现在要写的项目肯定没那么复杂的了,但是作为一个入门的练习项目是足够的了,涵盖了vue2.0的常用知识点。但是美中不足的是我写这个项目的时候没有去运用到sass或less,这点日后想办法重构下。
因为利用业余时间来做,年前就开始写,周期有点长,项目现在我只写了一个商品页的功能,为了以防自己会忘记,所以写个博客记录下自己做到那里了。
注:此项目纯属个人瞎搞,只是为了进行对VUE的学习而已,还有这个项目也是在慕课网学的,也借用了他们的素材。但是也不是全抄的,学习了下思路,真的是自己写的哦。
项目分析
1、项目主要分成三个模块,商品页、评价页、商家页。这个项目没有登录注册功能了,因为没有后端的支持,并且该项目只针对是单个商家的。
2、涉及的技术栈有:vue2 + vuex + vue-router + webpack + ES6/7
效果图如下:
商品页

评价页

商家页
项目构建
npm install --global vue-cli
vue init webpack seller-app
cd seller-app
npm install
项目目录介绍:

今天就到这里,下回就进入真正的编码阶段。
项目源码请戳这里:https://github.com/codeyoyo/seller-app
vue2.0 练习项目-外卖APP(1)的更多相关文章
- Vue2.0 render:h => h(App)
new Vue({ router, store, //components: { App } vue1.0的写法 render: h => h(App) vue2.0的写法 }).$mount( ...
- Node + Express + vue2.0 + Webpack项目实践
技术 Express.Vue.Vue-Router.Vue-Resource.Webpack Vue vue 的组件化思想和 React 很像,一个 vue 组件将 html.css 和 js 都写在 ...
- 基于vue2.0搭建项目流程
搭建vue2.0项目--myproject 一. 环境搭建: 1 打开命令行(cmd) 2 安装node node官网 3 安装 vue-cli步骤如下: npm install -g vue-cli ...
- 基于vue2.0的在线电影APP,
基于vue2.0构建的在线电影网[film],webpack + vue + vuex + vue-loader + keepAlive + muse-ui + cordova 全家桶,cordova ...
- Vue2.0+Webpack项目环境构建到发布
前言:为什么要用webpack搭建项目呢,因为这个工具可以把目前浏览器不全部支持的ES6语法,通过打包工具生成所有浏览器都支持的单个JS文件. 参考: https://blog.csdn.net/u0 ...
- vue2.0:项目开始,首页入门(main.js,App.vue,importfrom)
对main.js App.vue 等进行操作: 但是这就出现了一个问题:什么是main.js,他主要干什么用的?App.vue又是干什么用的?main.js 里面的import from又在干嘛?ne ...
- vue2.0 创建项目
准备 安装淘宝 npm镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 添加系统变量path的内容 因为cnpm会被安 ...
- Vue2.0 render: h => h(App)的解释
render: h => h(App)是ES6的写法,其实就是如下内容的简写: render: function (createElement) { return createElement(A ...
- vue2.0 + vux 项目搭建
1.快速搭建项目模板 因为项目使用vux,所以推荐使用vux官网的airyland/vux2 模板,vue-cli工具是vue项目的搭建脚手架 默认为 webpack2 模板,如果你需要使用webpa ...
随机推荐
- 201521123025《java程序设计》第10周学习总结
1. 本周学习总结 2. 书面作业 Q1.finally 题目4-2 1.1 截图你的提交结果(出现学号) 1.2 4-2中finally中捕获异常需要注意什么? 只有执行过try语句块,finall ...
- Eclipse rap 富客户端开发总结(12) :Rap 优化之组件的销毁
一.概述 经过几个月的rap 项目实战,总结了一些小经验,在这里总结一下,希望对大家有所帮助. 二.销毁的处理 相信学习rap 的同学都知道,swt 中提供了许多的组件,像lab ...
- Mysql双机热备配置(超详细多图版)
一.双击热备介绍 1.基本概念 双机热备特指基于高可用系统中的两台服务器的热备(或高可用),双机高可用按工作中的切换方式分为:主-备方式(Active-Standby方式)和双主机方式(Active- ...
- OSGi-入门篇之生命周期层(03)
前言 生命周期层在OSGi框架中属于模块层上面的一层,它的运作是建立在模块层的功能之上的.生命周期层一个主要的功能就是让你能够从外部管理应用或者建立能够自我管理的应用(或者两者的结合),并且给了应用本 ...
- Saltstack批量编译部署nginx(多模块)
最近一直在研究saltstack的同步文件和批量执行命令,随着架构的变大,批量部署的需求也变得明显起来了,我需要用一条命令就部署好nginx和tomcat,并且符合我所有的环境需求,可以直接投入生产环 ...
- Qt Creator编译运行成功,但是显示系统找不到指定的文件(比如urlmon.dll动态链接库)
问题: 以前自己写的一个QT界面程序,在win 7 的32位系统上运行没有出现任何问题,但是重装系统之后,同样的程序放到win10 的64位系统下运行会出现警告:onecoreuap\inetcore ...
- YYHS-鏖战字符串
题目描述 Abwad在nbc即将完成她的程序的时候,急中生智拔掉了她电脑的电源线,争取到了宝贵的时间.作为著名论文<论Ctrl-C与Ctrl-V在信息学竞赛中的应用>的作者,他巧妙地使用了 ...
- 微软云linux服务器FTP文件传输错误解决办法
在微软云上新建了linux虚拟机之后,通过Xshell连接到服务器(微软云默认的账号是:azureuser,不是root),却发现通过FTP传输文件错误,一直找不到头绪,询问微软云相关人员才知道.FT ...
- 软件工程个人第二小项目——wc
github源码和工程文件地址:https://github.com/HuChengLing/wc 基本要求:要实现wc的基本功能即文件中字符数.单词数.行数的统计. 主要功能:文件中字符数.单词数. ...
- [C#]关于DBNULL的解释
1 概述 如下例子,你觉得有什么问题?如你能很快的找出问题,并且解决它,那么你可以跳过本篇文章,谢谢~~. List<Base_Employee> ltPI = new List< ...