【用vue制作饿了么首页(1)】的更多相关文章

用vue制作饿了么首页(1)

无论是静态网页还是动态交互网页,实现原则是将他们分块,然后各个击破. 很明显的饿了么首页分为三个部分(组件), 上面的头部(商家信息), 中间路由 购物车 每部分先占住自己位置,然后挨个将这三部分分别实现完整. 我理解的vue里,index.html好比是车轱辘,main.js就好比是变速箱,App.vue就好比是汽车方向盘和档把子,其他各个组件就好比是方向盘上的喇叭,转向等等,一环扣一环的关系. 我们操作是方向盘,就是写App.vue里的各种组件.当然引入一些工具文件时候别忘了在main.js…

electron+vue制作桌面应用--自定义标题栏

electron会默认显示边框和标题栏,如下图 我们来看一下如何自定义一个更加有(gao)意(da)思(shang)的标题栏,例如网易云音乐这种 首先我们要把默认的标题栏删掉,找到主进程中创建窗体部分,new BrowserWindow时添加参数frame: false即可 mainWindow = new BrowserWindow({ useContentSize: true, frame: false, }) 这样会把标题栏和边框一并隐藏 然后我们开始制作自己的标题栏创建Mytitle组件…

vue打包以后，除了首页意外，其余页面是空白

针对vue项目打包以后,除了首页意外,其余页面是空白的,需要在服务端进行配置. 原因是router中,mode是history引起的 如果是nginx,改成如下: location / { root /workspace/shop/client/dist; try_files $uri $uri/ /index.html; # error_page 404 /index.html; } 参考链接:https://router.vuejs.org/zh/guide/essentials/histo…

Vue项目——去哪网(首页部分)

业务逻辑 通过gitee创立各个分支,比如swiper,header,recommende等分支,其实就是整个页面上的每个模块.模块化是公司级别项目开发的基准,每个人在各自的分支上进行代码的编写,而对主分支master没有影响.故master分支一般是承载着项目作为基本的代码. 在本个vue的项目中,其页面模板是存储在以下路径 Home.vue作为根模板 起到了一个对于别的小模块的整合作用.需要引入模块,在template元素下要使用div进行一个根标签的包裹 Header 是首页头部模块 主要…

Vue 制作简易计算器

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>简易计算器</title> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id=&qu…

基于vue制作简易的柱状图

一般很常见的柱状图,大家都想到用百度echart,如果整个项目就只绘制仅有的一个柱状图,引入echart就有点大材小用了,哈哈哈. 预览地址:https://zuobaiquan.github.io/vue/vueExercise/vue-test/dist/index.html#/bargraph 效果图 代码显示如下: <template> <div class="line-chart"> <ul> <li v-for="(ite…

vue制作小程序--mpvue

mpvue是一个使用 Vue.js 开发小程序的前端框架 http://mpvue.com/ sass的使用 https://segmentfault.com/q/1010000014194954 npm i sass-loader -D / npm i node-sass -D <style lang="scss"> .container{ padding: 0 30rpx; } </style> 1.初始化一个mpvue项目 # 1. 先检查下 Node.j…

【vue】饿了么项目-使用webpack打包项目

1.vue cli给我们提供了npm run build命令打包项目,在packa.json文件中scripts对象中有build属性,当我们执行npm run build时,就执行build对应的"node build/build.js"脚本 build完成后显示 进入项目文件夹,找到dist文件夹,这些是打包后产生的文件 2.webpack打包过程中会将css和js文件单独提取出来,且会根据path存放进相应的文件夹下,形成如上图的根目录,文件名是根据内容产生的哈希值,文件内容改变…

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

1.flex 属性是 flex-grow.flex-shrink 和 flex-basis 属性的简写属性. flex-grow 一个数字,规定项目将相对于其他灵活的项目进行扩展的量. flex-shrink 一个数字,规定项目将相对于其他灵活的项目进行收缩的量. flex-basis 项目的长度.合法值:"auto"."inherit" 或一个后跟 "%"."px"."em" 或任何其他长度单位的数字.…

【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呢? 通过props从父组件中获得,且要指定数据类型 export…