仿饿了么项目-vue-cli开启项目

author author     2022-09-14     685

关键词:

环境搭建

安装nodeJs

在用vue-cli开启项目之前,首先我们需要安装Node环境,安装Node很简单,只需要去官网下载http://nodejs.cn/download/,下载完成后点击安装,安装过程很简单,一直next即可,安装完成会自动添加node及npm环境变量。

检验是否安装成功,在cmd输入命令 node -v,回车 及 npm -v,回车,如出现下图所示版本信息,表示安装成功

技术分享

 安装vue-cli

nodeJs安装好之后,我们就可以使用npm命令来安装vue-cli,打开cmd命令行工具,输入npm install -g vue-cli,回车 全局安装vue-cli。安装好之后,我们可以在命令行工具中输入vue,如果提示以下信息,就代表安装好了。安装好之后,下面会有一些操作方法提示。

技术分享

init是初始化项目,初始化的时候,可以选择模板并安装

list是我们可以选择的模板列表。这里不做过多说明。

 创建项目

创建项目

打开cmd命令行工具,进入想要创建项目的目录下,输入:vue init webpack projectname

webpack默认是安装2.0版本,若要安装1.0版本,需在webpack后面加上版本号信息,

vue init webpack#1.0 project-name(安装1.0版本)

projextname是自定义的项目名称,例:我这里命名为ele,如下

技术分享

命令输入完成后敲回车,此时会自动下载template模板,稍微等待一会,会让你按提示完成项目的创建,如下图

 技术分享

说明:

  • Project name:——项目名称
  • Project description:——项目描述
  • Author:——作者
  • Vue build:——构建模式,一般默认选择第一种
  • Install vue-router?:——是否安装引入vue-router,这里选是,vue-router是路由组件,后面构建项目会用到
  • Use ESLint to lint your code?:——这里强烈建议选no 否则你会非常痛苦,eslint的格式验证非常严格,多一个空格少一个空格都会报错,所以对于新手来说,一般不建议开启,会加大开发难度
  • Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch这两个是测试,可以不用安装、

安装项目依赖

项目创建完成,打开文件夹可以看到目录结构如下

技术分享

此时,项目已经初具雏形,但还未安装依赖,进入项目所在根目录下,输入npm install,回车,会自动安装项目所需的依赖。这个过程有点慢,需要稍微等待一会。如下图。

 技术分享

安装完成后,再返回查看目录结构,可以看到多了node_modules文件夹,里面是各种需要的依赖包

技术分享

项目运行

在命令行中输入npm run dev命令就可以直接运行项目,如下图

技术分享

完成后,浏览器会自动打开,监听端口8080

技术分享

可以在浏览器看到如下画面。说明vue-cli项目已经创建成功,接下来就可以开始我们的项目了

 技术分享

 

仿饿了么购物车下单效果

仿饿了么购物车下单效果前一段由于新项目需要,开发一个类似饿了么购物车下单效果,电商类、外卖类、点餐类项目都可以用的上,废话不多说请看效果。效果图如下:主要的功能:就是左侧展示分类,右侧展示分类下商品的,... 查看详情

vue2高仿饿了么app

Github地址: https://github.com/ccyinghua/appEleme-project 一、构建项目所用:vueinitwebpackappEleme-projectnpmrundevcnpminstallnode-sass--save-devcnpminstallsass-loader--save-dev//sass-loader依赖于node-sas 查看详情

仿饿了么首页导航栏(viewpager)

1、需求分析在饿了么首页中我们能看到这样的布局(如下图)。红框内是一个可以左右滑动的页面,每一个页面类似于九宫格,都有可供点击图标。对于这样的布局,我在网上找了很久都没有找到相关的名称,所以我这里暂时... 查看详情

基于vue2+nuxt构建的高仿饿了么(2018版)(代码片段)

前言高仿饿了么,以nuxt作为vue的服务端渲染,适合刚接触或者准备上vuessr的同学参考和学习项目地址如遇网络不佳,请移步国内镜像加速节点效果演示查看demo请戳这里(请用chrome手机模式预览)移动端扫描下方二维码API接口文... 查看详情

vue.js高仿饿了么外卖app

1.架构从传统的MVC向RESTAPI+前端MV*迁移参考链接:http://blog.csdn.net/broadview2006/article/details/8615055http://blog.csdn.net/u013628152/article/details/42709033MV*包括:MVC、MVP、MVVMvue.js是MVVM框架 2.Iconmoon制作图标字体2 查看详情

高仿饿了么mock本地数据(代码片段)

新版webpack.dev.conf.js配置本地数据访问://引入express模块constexpress=require(‘express‘)//创建express对象constapp=express()//引入请求文件加载本地数据文件constappData=require(‘../data.json‘)//获取对应的本地数据constseller=appData.sellerconstg 查看详情

一个基于springboot+redis+vue仿饿了么外卖系统(后台+移动端),可二次开发接私活!...(代码片段)

...PN翻墙被抓了!已大规模行政处罚!该项目是一款仿饿了么外卖平台系统,参考了一些现有其他开源外卖项目,在此基础之上,做了优化处理,并使用SpringBoot+Vue技术开发。可用于学习使用。01项目说明... 查看详情

android仿饿了么购物车

from: http://blog.csdn.net/jdsjlzx/article/details/47311749这次分享的是一个很常见的效果,凡是涉及到购物的app或者旅游类以及订餐类的app都有看到过这种效果,两个listview联动显示,添加购物车时的一个抛物线动画实现,... 查看详情

饿了么购物车动画(代码片段)

...物车动画,所以想看看别人是怎么实现的,但是看了很多仿饿了么的demo都是实现了一个完整的大的项目,要找到那个小模块很麻烦,所以自己将联动菜单和动画提取出来写了一个demo,方便学习。目的只是想突出功能所以界面细... 查看详情

基于vue来开发一个仿饿了么的外卖商城(代码片段)

一、抽出头部作为一个组件,在底部导航的时候可以相应的显示不同的标题技术点:使用slot进行组件间的通信;父组件给子组件传值(子组件里面通过props接收父组件传过来的数据)查看链接:https://blog.csdn.net/sinat_17775997/article/... 查看详情

仿饿了么加入购物车旋转控件-自带闪转腾挪动画的按钮

转载请标明出处:http://blog.csdn.net/zxt0601/article/details/54235736本文出自:【张旭童的博客】(http://blog.csdn.net/zxt0601)代码传送门:喜欢的话,随手点个star。多谢https://github.com/mcxtzhang/AnimShopButton概述在上文,酷炫Path动画已经预告了,今... 查看详情

vue饿了么项目的相关笔记链接

http://www.mtons.com/content/1819.htmhttp://www.tuicool.com/articles/F7BnaiYhttps://segmentfault.com/a/1190000007784366http://www.tuicool.com/articles/7zUruij 查看详情

vue饿了么项目-goods商品列表页开发

1.flex属性是flex-grow、flex-shrink和flex-basis属性的简写属性。flex-grow一个数字,规定项目将相对于其他灵活的项目进行扩展的量。flex-shrink一个数字,规定项目将相对于其他灵活的项目进行收缩的量。flex-basis项目的长度。合法值:"au... 查看详情

vue饿了么项目实战笔记

1.页面骨架开发1.1组件拆分手机浏览器是把页面放在一个虚拟的“窗口”(viewport)中,通常这个虚拟的“窗口”(viewport)比屏幕宽,这样就不用把每个网页挤到很小的窗口中(这样会破坏没有针对手机浏览器优化的网页的布局... 查看详情

基于springboot+redis+vue仿饿了么外卖系统(后台+移动端)

优质文章,第一时间送达 六、运行效果前端展示(点击图片查看大图)后台管理(点击图片查看大图) 七、源码下载源码下载云盘链接:链接:https://pan.baidu.com/s/1djb2BmP3S6l9OfzT62Nd6A提取码:lry9复制这... 查看详情

vue饿了么项目-header组件开发

1.数据传递的理解在App.vue中用到了header组件,首先注册组件components:{‘v-header‘:header}然后才能引用<v-header:seller="seller"></v-header>:seller="seller"的意思是将seller对象传递给v-header中的seller,而v-header中从哪里获得seller呢?通... 查看详情

饿了么开源项目:javacomparator生成器

版权所有。所有权利保留。欢迎转载,转载时请注明出处:http://blog.csdn.net/xiaofei_it/article/details/51399159公司Android项目里经常需要对元素进行排序,而排序都是多字段的,相应的Comparator比较难写。于是我就写了这么... 查看详情

饿了么面试经验总结

目录一轮技术面第二个项目:三轮技术面HR面一轮技术面1.简历上写第一位的项目的具体实现思路答案:第一个项目:是数据库课程设计的大作业,是自己和另外一个同学组多完成的,自己主要负责后台代码的编写,主要涉及到... 查看详情