vue项目_vue项目实战 - CSDN
精华内容
参与话题
  • vue项目-商城app

    千次阅读 2019-06-25 10:56:06
    .gitignore 里面设置上传项目时可以忽略的文件,eg:node_modules 一、制作首页hadder和tabbar 完成Header区域,使用的的是mint-ui中的Header组件 制作底部的Tabbar区域,使用的是mui中的Tabbar.html - 在制作...

    .gitignore 里面设置上传项目时可以忽略的文件,eg:node_modules

    一、制作首页hadder和tabbar

    1. 完成Header区域,使用的的是mint-ui中的Header组件
    2. 制作底部的Tabbar区域,使用的是mui中的Tabbar.html
      - 在制作购物车小图标的时候,先把扩展图标的css样式,拷贝到项目中
      - 再拷贝我们的字体库ttf文件到项目中
      - 为购物车小图标添加图像样式
    3. 要在中间区域放置一个router-view来展示路由匹配的组件

    切换页面(改造tabbar为router-link):

    • 在main.js中引入vue-router import VueRouter from "vue-router"
    • 将a标签改为router-link,href改为to
    • 在router.js中引入路由组件
    	import VueRouter from 'vue-router'
    	
    	// 导入对应的路由组件
    	import HomeContainer from '../components/tabbar/HomeContainer.vue'
    	import MemberContainer from '../components/tabbar/MemberContainer.vue'
    	import ShopcarContainer from '../components/tabbar/ShopcarContainer.vue'
    	import SearchContainer from '../components/tabbar/SearchContainer.vue'
    	
    	var router = new VueRouter({
    	  routes: [// 配置路由规则
    	    { path: '/', redirect: '/home' },
    	    { path: '/home', component: HomeContainer },
    	    { path: '/member', component: MemberContainer },
    	    { path: '/shopcar', component: ShopcarContainer },
    	    { path: '/search', component: SearchContainer }
    	  ],
    	  linkActiveClass: 'mui-active' // 覆盖默认的路由高亮的类,默认的类叫做router-link-active
    	})
    
    	export default router
    
    
    • 给App.vue中添加一个router-view标签

    scss中&符号是交集选择器,不写是后代选择器

    二、制作轮播图

    1. 获取数据使用vue-resource

    2. 在main.js中导入vue-rosource

    3. 在main.js中配置请求路径
      Vue.http.options.root = 'http://www.liulongbin.top:3005'

    • 在script中methods中定义方法,获取数据
    	<script>
    		export default {
    			data () {
    				return{
    					lunbotulist:[]
    				}
    			},
    			created() {
    				this.getlunbotu()
    			},
    			methods: {
    				getlunbotu() {
    					this.$http.get('api/getlunbo').then(res => {
    						if(res.body.status === 0) {
    							this.lunbotulist = res.body.message
    						}
    					})
    				}
    			}
    		}
    	</script>
    

    渲染页面使用v-for循环,在组件中使用v-for时,要使用:key

    三、九宫格到六宫格改造工程

    • 使用mui中的组件,将九宫格改造为六宫格
    • 图标可引入自己的图标,修改样式就ok

    四、组件切换时的动画效果

    用transition将中间内容包起来

    	<transition>
    		  <router-view></router-view>
    	</transition>
    

    设置类

    <style>
    	.v-enter,
    	.v-leave-to {
    		  opacity: 0;
    		  transform: translateX(100%);
    	  }
    	  
    	  .v-enter-active,
    	  .v-leave-active {
    		  transition: all 0.5s ease;
    	  }
    </style>
    

    问题:

    1. Header栏向右偏移
    2. 底部也会偏移,并且出现滚动条
    3. 要进入的元素先向左然后向上飘

    解决:

    • 出现滚动条的原因:因为在切换页面的时候,他的真正宽度是两个页面拼接起来的宽度
      - 给外层container添加一个overflow-x: hidden
    	.app-container {
    	       	padding-top:40px;
    			padding-bottom: 50px;
    			overflow-x: hidden;
    	  }
    
    • 解决底部滚动条问题
    	 .v-enter {
    		  opacity: 0;
    		  transform: translateX(100%);
    	  }
    	  
    	  .v-leave-to {
    		  opacity: 0;
    		  transform: translateX(-100%);
    	  }
    	
    	  .v-enter-active,
    	  .v-leave-active {
    		  transition: all 0.5s ease;
    	  }
    
    • 解决元素飘动问题,给.v-leave-to动画加一个定位
    	.v-enter {
    		  opacity: 0;
    		  transform: translateX(100%);
    	  }
    	  
    	  .v-leave-to {
    		  opacity: 0;
    		  transform: translateX(-100%);
    		  position: absolute;
    	  }
    	
    	  .v-enter-active,
    	  .v-leave-active {
    		  transition: all 0.5s ease;
    	  }
    

    五、改造新闻资讯的路由连接

    • 将a标签改为router-link,href改为to,to=‘home/newslist’
    • 在router.js导入对应的路由组件

    六、新闻资讯页面绘制

    1. 绘制界面,使用mui中的midia-list.html
    2. 使用vue-resource获取数据
    3. 渲染真实数据

    给时间定义一个全局过滤器

    安装moment npm install moment -S

    	import moment from 'moment'   // 导入格式化的时间插件
    	
    	Vue.filter('dateFormat', function (dataStr, pattern = 'YYYY-MM-DD HH:mm:ss') {
    	  return moment(dataStr).format(pattern)
    	})
    

    使用:

    	<span>发表时间:{{item.add_time | dateFormat('YYYY-MM-DD')}}</span>
    

    七、点击新闻资讯列表跳转到新闻详情

    1. 把列表中的每一项改造为 router-link,同时在跳转的时候应该提供唯一的id标识符
      <router-link :to="'/home/newsinfo/'+item.id">
    2. 创建新闻详情的组件页面NewsInfo.vue
    3. 在路由模块router.js中,将新闻详情的路由地址和组件页面对应起来
    	<script>
    		export default {
    		    data(){
    		        return {
    		            id: this.$route.params.id, //将url地址中传递过来的id值,挂载到data上,方便以后调用
    		            newsinfo:{}
    		        }
    		    }
    		}
    	</script>
    
    1. 实现新闻详情页面布局和渲染

    八、单独封装一个 comment.vue 的评论子组件

    1. 先创建一个单独的comment.vue组件模板

    2. 在需要使用comment组件的页面中,先动手导入comment组件

      import comment from './comment.vue'

    3. 在父组件中,使用components属性。将刚才导入comment组件注册为自己的子组件

    	methods: {
    	        getNewsInfo(){//获取新闻详情
    	            this.$http.get('api/getnew/'+this.id).then(res => {
    	                if(res.body.status ===0 ){
    	                    this.newsinfo = res.body.message[0];
    	                }else {
    	                    Toast('加载失败');
    	                }
    	            })
    	        }
    	    },
    	
    	    components: {// 用来注册子组件
    	        "comment-box": comment
    	    }
    
    1. 将注册子组件时候的注册名称以标签形式在页面中引用即可

      <comment-box></comment-box>

    2. 获取所有的评论数据显示到页面中getComments()方法

      父组件向子组件传值

      <comment-box :id="this.id"></comment-box>

      props: ['id']

    九、点击加载更多评论的功能

    1. 为加载更多按钮绑定点击事件,在事件中,请求下一页数据
    	<mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
    
    1. 点击加载更多,让pageIndex++,然后重新调用this.getComments()方法,重新获取最新一页的数据

    2. 为了防止新数据覆盖老数据的情况,点击加载更多的时候,每当获取到新数据,应该让老数据调用数组concat方法,拼接新数组

    	methods:{
    	        getComments(){// 获取评论
    	            this.$http.get('api/getcomments/' + this.id + '?pageindex=' + this.pageIndex).then(res => {
    	                if(res.body.status === 0){
    	                    // 获取新评论时不会把老数据清空覆盖
    	                    this.comments = this.comments.concat(res.body.message);
    	                }else {
    	                    Toast('获取评论失败');
    	                }
    	            })
    	        },
    	        getMore(){// 加载更多
    	            this.pageIndex++;
    	            this.getComments();
    	        }
    	    }
    

    十、发表评论

    1. 把文本框做双向数据绑定v-model='msg'
    2. 为发表按钮绑定一个事件@click="postComment"
    3. 校验评论内容是否为空,如果为空则Toast提示用户
    4. 通过vue-resource发送一个请求,把评论内容提交给服务器并保存
    5. 当发表评论完成后,重新刷新列表,以查看最近的评论
      - 如果调用getComments方法重新刷新评论列表的话,可能只能得到 最后一页的评论,前几页的评论获取不到
      - 换一种思路:当评论成功后,在客户端手动拼接出一个最新的评论对象,然后调用数组的unshift方法,把最新的评论追加到date中comments的开头;这样就能完美实现刷新评论列表的需求

    在main.js中全局设置post时候表单数据格式组织形式 application/x-www-form-urlencoded

    Vue.http.options.emulateJSON = true

     	postComment(){// 发表评论
    
                // 校验是否为空内容
                if(this.msg.trim().length === 0){
                    return Toast('评论内容不能为空!');
                }
                
                this.$http.post("api/postcomment/" + this.$route.params.id,{content:this.msg.trim()}).then(function(res) {
                    if(res.body.status === 0){
                    	//拼接出一个评论对象
                        var cmt = {user_name: '匿名用户', add_time: Date.now(), content: this.msg.trim()};
                        this.comments.unshift(cmt);
                        this.msg = "";
                    }
                })
            }
    

    十一、制作图片分享页面

    1. 改造图片分析按钮为路由的链接并显示对应的组件页面
    2. 绘制图片列表组件页面结构并美化样式
      - 制作顶部的滑动条
      - 制作底部的图片列表
    3. 获取所有分类,并渲染分类列表

    制作顶部滑动条的坑

    另有博客专门介绍这部分内容:vue在引用mui.js文件时会遇到的各种问题

    1. 使用MUI中的tab-top-webview-main.html
    2. 需要把slider区域的mui-fullscreen类去掉
    3. 滑动条无法正常触发滑动,通过检查官方文档,发现这是JS组件,需要被初始化一下
      - 导入 mui.js
      - 调用官方提供的方式去初始化:
    mui('.mui-scroll-wrapper').scroll({
        deceleration: 0.0005 //flick 减速系数,系数越大,滚动速度越慢,滚动距离越小,默认值0.0006
    });
    
    1. 我们在初始化滑动条的时候,导入的mui.js ,但是控制台报错: Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode
      - mui.js 中用到了’caller’,‘callee’,and’arguments’,但是webpack打包好的bundle.js 中,默认是启用严格模式的,所以这两者冲突了
      - 解决方案:
      a. 把mui.js中的非严格模式的代码改掉,但是不现实
      b. 把webpack打包时候的严格模式禁用掉
      - 最终,我们选择了plan B移除严格模式:使用这个插件babel-plugin-transform-remove-strict-mode
    2. 刚进入图片分享页面的时候滑动条无法正常工作,然后发现如果要初始化滑动条,必须要等DOM元素加载完毕,所以我们把初始化滑动条的代码,搬到了mounted生命周期函数中
    3. 当滑动条调试OK后,发现tabbar无法正常工作了,这时需要把每个tabbar按钮的样式中mui-tab-item重新改一下名字,并且复制其样式

    十二、制作图片列表区域

    1. 图片列表需要使用懒加载技术,使用Mint-UI提供的现成的组件lazy-load
    2. 渲染图片列表数据
    3. 实现了点击图片跳转到图片详情页面
    4. 实现详情页面的布局和美化,同时获取数据渲染页面
    5. 实现图片详情中缩略图的功能
      - 使用插件vue-preview这个缩略图插件
      安装 npm i vue-preview -S
      直接使用标签 <vue-preview :slides="list"></vue-preview>
      - 获取到所有的图片列表
      - 每个图片数据对象中,必须有w和h属性

    十三、完成商品列表页面

    • 绘制商品列表页面
    • 实现商品列表的经典两列布局
    	.good-list {
    	    display: flex;
    	    flex-wrap: wrap; 
    	    padding: 7px;
    	    justify-content: space-between;
    	
    	    .goods-item {
    	        padding: 2px;
    	        width: 49%;
    	        border: 1px solid #ccc;
    	        box-shadow: 0 0 8px #ccc;
    	        margin: 4px 0;
    	        display: flex;
    	        flex-direction: column;
    	        justify-content: space-between;
    	        min-height: 293px;
    	
    	        img {
    	            width: 100%;
    	        }
    	
    	        .title {
    	            font-size: 14px;
    	        }
    	
    	        .info {
    	            background-color: #ddd;
    	            
    	            p {
    	                margin: 0;
    	                padding: 5px;
    	            }
    	
    	            .price {
    	
    	                .now {
    	                        color: red;
    	                        font-weight: bold;
    	                        font-size: 16px;
    	                }
    	
    	                .old {
    	                    text-decoration: line-through;
    	                    font-size: 12px;
    	                    margin-left: 10px;
    	                }
    	            }
    	
    	            .sell {
    	                display: flex;
    	                justify-content: space-between;
    	            }
    	        }
    	    }
    	}
    
    • 加载商品列表中的数据并实现加载更多

    十四、商品详情页面

    • 改造路由链接,绘制商品详情页面并美化
    • 使用编程式导航,传递对象
    		   goDesc(id) {
    	            this.$router.push({name: 'goodsdesc', params: {id}})
    	        },
    	
    	        goComment(id) {
    	            this.$router.push({name: 'goodscomment', params: {id}})
    	        }
    
    • 绘制商品购买区域样式
    • 使用编程式导航实现图文介绍和商品评论跳转
    • 完成商品详情中的图文介绍和评论页面的渲染

    十五、加入购物车的小球动画

    • 绘制小球,添加样式
    	 .ball {
    	        width: 15px;
    	        height: 15px;
    	        border-radius: 50%;
    	        background-color: red;
    	        position: absolute;
    	        z-index: 99;
    	        top: 390px;
    	        left: 146px;
    	    }
    
    • 小球动画
    		<transition 
                @before-enter="beforeEnter"
                @enter="enter"
                @after-enter="afterEnter">
                <div class="ball" v-show="ballFlag" ref="ball"></div>
            </transition>
    
    		beforeEnter(el) {
                el.style.transform = 'translate(0,0)'
            },
    
            enter(el,done) {
            	//先得到徽标的横纵坐标,再得到小球的横纵坐标
            	//然后让 y 值求差, x 值也求差,得到的结果,就是横纵坐标要位移的距离
                el.offsetWidth;
                //获取小球在页面上的位置
                const ballPosition = this.$refs.ball.getBoundingClientRect();
                //获取徽标在页面上的位置
                const badgePosition = document.getElementById('badge').getBoundingClientRect();
                const xDist = badgePosition.left - ballPosition.left;
                const yDist = badgePosition.top - ballPosition.top;
    			
                el.style.transform = `translate(${xDist}px,${yDist}px)`;
                el.style.transition = 'all 0.5s cubic-bezier(.4,-0.3,1,.68)';
                done()
            },
    
            afterEnter(el) {
                this.ballFlag = !this.ballFlag
            }
    

    十六、加入购物车及购物车页面的数量传递问题

    如何实现加入购物车时,拿到选择的数量

    • 涉及到子组件向父组件传值(事件调用机制)
    • 事件调用本质:父向子传递方法,子调用这个方法, 同时把数据当作参数传递给这个方法
    		getSelectedCount(count) {
    			//当子组件把选中的数量传递给父组件时,把选中的值保存到data上
                this.selectedCount = count;
    
            }
    

    <p>购买数量:<numbox @getcount="getSelectedCount" :max="goodsinfo.stock_quantity"></numbox></p>

    • 子组件什么时候把值传给父组件

    <input id="test" class="mui-input-numbox" type="number" value="1" @change="countChanged" ref="numbox"/>

    	methods: {
            countChanged() {
            	//每当文本框的数据被修改时,立即把最新的数据通过事件调用,传递给父组件
                this.$emit("getcount",parseInt(this.$refs.numbox.value));
            }
        },
    
        props: ["max"], // 设置可加入购物车数量最大值
    
        watch: {
        		//使用watch监听父组件传递过来的max值
            	max: function(newVal,oldVal) {
                mui(".mui-numbox").numbox().setOption("max",newVal);
            }
        }
    

    在父组件的getSelectedCount()方法中可以拿到传递过来的值

    十七、使用vuex并设计购物车数据存储方式

    vuex是什么?怎么用?

    将商品对象设计成以下样式

    { id: 商品id, count: 要购买数量, price: 商品价格, selected: false }

    • 在goodsInfo.vue中拼接出一个要保存到store中car数组里的商品信息对象
    • 点击加入购物车,把商品信息保存到store中的car上
      - 如果在购物车中,之前就已经有了这个对应的商品了,那么,只需要更新数据
      - 如果没有,则直接把商品数量push到car中即可

    项目源码:商城app源码 vue_app

    展开全文
  • VUE实战项目之喵喵电影

    千人学习 2019-05-13 17:27:50
    2019全新打造Web前端教程,Vue实战项目之喵喵电影,详细讲解项目演示与开发流程。
  • 适合初学者练手的vue项目(附github源码)

    万次阅读 多人点赞 2019-01-24 14:00:52
    vue慢慢的成为了前端最受欢迎的框架之一,在很多项目之中开发都能用得到,如今也已经发展到3.0了,可能是因为这个框架可以提高工作效率,因此受到大家的追捧,在之前的文章里面也说过,2019年,大前端学习小程序和...
        

    vue慢慢的成为了前端最受欢迎的框架之一,在很多项目之中开发都能用得到,如今也已经发展到3.0了,可能是因为这个框架可以提高工作效率,因此受到大家的追捧,在之前的文章里面也说过,2019年,大前端学习小程序和vue是必备技能。

    如果在平时的工作里,有些公司用不到这两项技能,那你也要在业余的时间里面,找一些教程和练手的vue小项目。以下是今年的一些可以练笔的项目,这些源码稍微学习其中的几个,基础能力都能够有所进步。

    1:Vue2.0入门项目
    https://github.com/SD-Gaming/Vue2.0_to_do_list-addName-

    2:慕课网Vue2.0购物车教程(注释版)
    https://github.com/SD-Gaming/Vue2.0-ShoppingCart-MOOC

    3:初中级项目:CNode社区
    https://github.com/SD-Gaming/Vue2.0_CNode.bbs

    Vue初/中级项目,CnodeJS社区重构。( a junior project of Vue.js, rewrite cnodejs.org )预览(DEMO): https://heuristic-stonebraker-33e1b8.…

    4:基于vue2.0的网易云音乐播放器,api来自于NeteaseCloudMusicApi,v2.0为最新版本 http://www.daiwei.org/vue-music/

    想用vue把我现在的个人网站重新写一下,新的风格,新的技术,什么都是新的
    https://github.com/IFmiss/vue-website

    5:Vue 音乐搜索、播放 Demo
    https://github.com/Sioxas/vue-music/

    6:基于vue2 + vue-router + vuex 构建的一个音乐类单页面应用 —— echo回声 http://echo.liansixin.win
    https://github.com/uncleLian/vue2-echo

    7:基于vue2 + vue-router + vuex 构建的一个新闻类单页面应用 —— 今日头条(移动端) http://toutiao.liansixin.win
    https://github.com/uncleLian/vue2-news

    8:Xiaomi Mobile Mall. 小米移动商城 http://show.thisummer.com/mi
    https://github.com/Jon-Millent/mi-shop

    9:仿网易云WebApp,基于vue实现的WebAPP
    https://github.com/tgsx/Web_MusicAPP

    10:vue+express+socket.io仿微博、微信的聊天社交平台
    https://github.com/CBDxin/VueSocial

    11:vue2 +vue-router2 + es6 +webpack 高仿饿了么app商家详情,demo:https://www.myblogbo.com/sell
    https://github.com/chengengfengC/vue2.x-sell

    12:vue+router+vue-cli+webpack
    https://github.com/Hacker233/Unstructured-data-processing

    13:高仿饿了么App ---内附教程
    https://github.com/QAQXiYangYang/vue-ele

    14:一个精制的音乐播放软件,使用了vue2.0及vue全家桶。
    https://github.com/ZHOUYUANN/vuemusic

    15:vue2.0阅读器 http://huangshouqi.com/vue-reader.html
    https://github.com/huangshouqi/vue-reader

    16:基于webpack2 + Vue2搭建的PC端后台运维管理系统脚手架,已集成VUE2全家桶:
    https://github.com/rootsli/vue2admin

    17:全家桶做了个简单的移动端购物app
    https://github.com/OEEO/shoppingApp

    18:VUE 后台管理界面案例(mock+express实现前后端分离)
    https://github.com/toutouping/vue-web-demo

    19:各站点数据整合;图片,视频,文章;在线云音乐播放器;
    https://github.com/linkenliu/MissCloudVue

    20:饿了么点餐系统
    https://github.com/SimonZhangITer/VueDemo_Sell_Eleme

    21:vue音乐播放器
    https://github.com/LuanMingyang/vue2-music-app

    22:基于vuejs+koa2+mysql的高仿饿了么移动APP
    https://github.com/The-Never/elm

    23:vue全家桶+localStorage实现一个简易的通讯录
    https://github.com/windlany/vue-mail-list

    24:用vue仿的小米商城
    https://github.com/shiyaming1994/mi

    25:仿严选商城
    https://github.com/wwp123/shopping-yanxuan

    26:music webapp
    https://github.com/aloneWang/vue-music

    27:vue项目(vue全家桶+nodejs) 电商网站
    https://github.com/LadyChatterleyLover/mall

    28:基于Vue2.0+Vuex+Axios+NodeJs+Express+MySQL实现京东移动web商城

    https://github.com/huangche007/vue-jd

    原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
    90后前端妹子,爱编程,爱运营,爱摄影,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。对于博客上面有存在疑问或者不会的问题,可以加入qq技术交流群聊:473819131。

    展开全文
  • Vue开源项目汇总(史上最全)

    万次阅读 多人点赞 2019-01-09 08:42:05
    目录 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 ...element ★13489 - 饿了么出品的Vue2的web UI工具套件 Vux ★8133 - 基于Vue和WeUI的组件库 iview ★6634 - 基于 Vuej...

    转自:https://blog.csdn.net/aaronzzq/article/details/80936708

    目录

    UI组件

    开发框架

    实用库

    服务端

    • nuxt.js ★4564 - 用于服务器渲染Vue app的最小化框架
    • unvue ★310 - 使用简单的通用VueJS应用
    • express-vue ★302 - 简单的使用服务器端渲染vue.js
    • vue-ssr ★92 - 非常简单的VueJS服务器端渲染模板
    • doubanMovie-SSR ★85 - Vue豆瓣电影服务端渲染
    • vue-ssr ★80 - 结合Express使用Vue2服务端渲染
    • vue-easy-renderer ★44 - Nodejs服务端渲染

    辅助工具

    应用实例

    Demo示例

    展开全文
  • vue项目实战

    万次阅读 2018-06-29 00:33:14
    项目概念图``` devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ compilationSuccessInfo: { messages: [`Your application is running here: http://${config.dev.host}:${port}`], }...

    项目概念图



    ```

      devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({

            compilationSuccessInfo: {

              messages: [`Your application is running here: http://${config.dev.host}:${port}`],

            },

            onErrors: config.dev.notifyOnErrors

            ? utils.createNotifierCallback()

            : undefined

    ```

    案例说明

            参考教程

            https://www.jianshu.com/p/ec436222c608

    一、 项目说明

            ps:这个简单小项目只提供一个小小小的骨架,需要向“它”身上具体加多少“肉”,需要大家考虑好功能和布局后进行完善。

            1.首先看下主页效果:如下图


    主页分析:大体上分为上(header)、中(body或content)、下(footer)三部分,中间body部分是由若干个相同的li组成的“列表”,所以我们可将li定义为一个组件。

    2.再来看下商品详情页:如下图


    详情页分析:也分为上、中、下三部分。

    清单

    、 配置目录文件

    在src文件夹(也就是我们码农主要工作区)下,创建assets文件夹(用来保存项目所需图片)、components(存组件commonFooter.vue、DetailHeader.vue、homeHeader.vue、list.vue)、pages(存页面goodsDetail.vue、home.vue)和main.js文件。详情请看下图:

    ps:  1.具体文件夹以及文件名称可根据自己项目进行“自拟”。 2.这里的每一个*.vue文件都是一个组件。


    、配置相关接口

    主页商品信息及图片, 是从服务器端返回的json数据,不可能所以商品都“写死”。故这里需要模拟后台建立了一个数据文件。在根目录下建立一个goods.json文件用来放“伪数据”,如下图:


    注意json里不能带有注释和其他文字,不然会项目跑不起来,出错

    {

    "goods": [

    { "price": "69.9", "title": "德芙", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t3688/270/776223567/128582/fa074fb3/58170f6dN6b9a12bf.jpg!q50.jpg.webp" },

    { "price": "63", "title": "费列罗", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t613/100/1264998035/221234/1a29d51f/54c34525Nb4f6581c.jpg!q50.jpg.webp"},

    { "price": "29.9", "title": "大米", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t1258/40/17387560/108696/aced445f/54e011deN3ae867ae.jpg!q50.jpg.webp"},

    { "price": "54.9", "title": "安慕希", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t2734/15/680373407/215934/3abaa748/572057daNc09b5da7.jpg!q50.jpg.webp"},

    { "price": "58", "title": "金典", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t2482/145/1424008556/91991/d62f5454/569f47a2N3f763060.jpg!q50.jpg.webp"},

    { "price": "60", "title": "味可滋", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t2368/3/874563950/70786/7b5e8edd/563074c8N4d535db4.jpg!q50.jpg.webp" },

    { "price": "248.00", "title": "泸州老窖", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t283/166/1424018055/189580/7c0792b7/543b4958N05fa2feb.jpg!q50.jpg.webp"},

    { "price": "328.8", "title": "剑南春", "img": "http://m.360buyimg.com/babel/s350x350_g15/M05/1A/0A/rBEhWlNeLAwIAAAAAAHyok3PZY0AAMl8gO8My0AAfK6307.jpg!q50.jpg.webp"},

    { "price": "49.00", "title": "蓝莓", "img": "http://m.360buyimg.com/babel/s211x211_jfs/t2332/148/2952098628/94387/e64654e2/56f8d76aNb088c2ab.jpg!q50.jpg.webp" },

    { "price": "68", "title": "芒果", "img": "http://m.360buyimg.com/n0/jfs/t3709/334/1378702984/206759/5c100ab5/58253588Naaa05c5c.jpg!q70.jpg"}

    ]

    }

    使用node中的express

    安装express和axios


    在main.js里配置axios到原型链中

     注意标记的那两行

    ```

    import Vue from 'vue'

    import App from './App'

    import router from './router'

    import axios from 'axios' //注意这行

    Vue.prototype.$http = axios; //注意这行

    Vue.config.productionTip = false

    new Vue({

    el: '#app',

    router,

    components: { App },

    template: ''

    })

    ```

    在build>>webpack.dev.conf.js配置express并设置路由规则

    如图:


    代码如下:

    'use strict'

    const utils = require('./utils')

    const webpack = require('webpack')

    const config = require('../config')

    const merge = require('webpack-merge')

    const baseWebpackConfig = require('./webpack.base.conf')

    const HtmlWebpackPlugin = require('html-webpack-plugin')

    const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')

    const portfinder = require('portfinder')

    /* datura_lj 增加express 20171126 */

    const express = require('express')

    const app = express()

    var appData = require('../goods.json')/*加载本地数据文件*/

    var goods = appData.goods

    var apiRoutes = express.Router()

    app.use('/api', apiRoutes)

    /* 增加express end */

    const devWebpackConfig = merge(baseWebpackConfig, {

    module: {

    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true })

    },

    // cheap-module-eval-source-map is faster for development

    devtool: config.dev.devtool,

    // these devServer options should be customized in /config/index.js

    devServer: {

    clientLogLevel: 'warning',

    historyApiFallback: true,

    hot: true,

    compress: true,

    host: process.env.HOST || config.dev.host,

    port: process.env.PORT || config.dev.port,

    open: config.dev.autoOpenBrowser,

    overlay: config.dev.errorOverlay ? {

    warnings: false,

    errors: true,

    } : false,

    publicPath: config.dev.assetsPublicPath,

    proxy: config.dev.proxyTable,

    quiet: true, // necessary for FriendlyErrorsPlugin

    watchOptions: {

    poll: config.dev.poll,

    },

    /* datura_lj 增加express 20171126 */

    before(app) {

    app.get('/api/goods', (req, res) => {

    res.json({

    code: 0,

    data: goods

    })

    })

    }

    /* datura_lj 增加路由规则 end */

    },

    plugins: [

    new webpack.DefinePlugin({

    'process.env': require('../config/dev.env')

    }),

    new webpack.HotModuleReplacementPlugin(),

    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.

    new webpack.NoEmitOnErrorsPlugin(),

    // https://github.com/ampedandwired/html-webpack-plugin

    new HtmlWebpackPlugin({

    filename: 'index.html',

    template: 'index.html',

    inject: true

    }),

    ]

    })

    module.exports = new Promise((resolve, reject) => {

    portfinder.basePort = process.env.PORT || config.dev.port

    portfinder.getPort((err, port) => {

    if (err) {

    reject(err)

    } else {

    // publish the new Port, necessary for e2e tests

    process.env.PORT = port

    // add port to devServer config

    devWebpackConfig.devServer.port = port

    // Add FriendlyErrorsPlugin

    devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({

    compilationSuccessInfo: {

    messages: [`Your application is running here: http://${config.dev.host}:${port}`],

    },

    onErrors: config.dev.notifyOnErrors

    ? utils.createNotifierCallback()

    : undefined

    }))

    resolve(devWebpackConfig)

    }

    })

    })

    npm run dev 之后,测试是否该数据可用,在浏览器地址栏中输入:http://localhost:8080/api/goods ,在浏览器中展示出如下图数据,代码数据数取成功:


    配置config/index.js:解决跨域问题


    在proxTable对象里写:

    proxyTable: {

    '/api': {

    target: 'http://127.0.0.1:8080/api',

    changeOrigin: true,

    pathRewrite: {

    '^/api': '/'

    //写'/api'就等于写'http://127.0.0.1:8080/api'

    //到时候写"/api/goods"就等于写"http://127.0.0.1:8080/api/goods"

    }

    }

    }

    原来参考教程有些地方需要修改:

    home.vue里的获取数据要改成这样才对:


    2.修改list.vue里的价格显示那行代码


    3.

    在home.vue里修改组件 : v-for="(item, index) in items" :key="index" 这样就可以运行了


    期待扩写功能:



    可运行的代码

    vue小项目实战.rar


    运行后效果图



    展开全文
  • vue全面介绍--全家桶、项目实例

    万次阅读 多人点赞 2017-03-28 17:38:13
    2016年最火的前端框架当属Vue.js了,很多使用过vue的程序员这样评价它,“vue.js兼具angular.js和react.js的优点,并剔除了它们的缺点”。授予了这么高的评价的vue.js,也是开源世界华人的骄傲,因为它的作者是位...
  • Vue项目启动原理及项目的创建

    万次阅读 2018-06-08 13:29:40
    首先看下图:一般一个初步的Vue项目创建好之后都会有这三个文件:index.html 、main.js 、App.js;1、index.html :众做周知,Vue是单页面形式开发,而这个index.html文件在其中起着特别重要的作用。所有组件(后缀名...
  • Vue实战项目开发--首页开发

    万次阅读 多人点赞 2018-10-29 22:39:18
    注意:项目的图片资源都是去哪儿网站的在线图片(图片来源网站),只可以用来练习哦,小心侵权 1. 首页header区域开发    在home目录下新建一个components文件夹,然后把首页home拆分成不同的组件放在components...
  • vue项目实战】Vue工程化项目--猫眼电影移动端

    万次阅读 多人点赞 2020-02-24 17:06:55
    使用 vue-cli 创建项目。现在先把主框架搭起来,熟悉路由和组件,后面在 项目demo 持续贴出完整项目代码。 vue初始化项目 首先全局安装Vue脚手架——vue-cli npm/cnpm install vue-cli -g 新建一个文件夹vue-demo...
  • Vue 项目搭建流程和使用大全

    万次阅读 2019-07-10 18:34:14
    Vue 项目搭建流程及项目中遇到的问题 项目搭建流程 1.使用vue cli 搭建项目框架 cnpm install -g vue-cli 安装vue cli 脚手架 vue init webpack projectName 创建项目 cd projectName cnpm install 安装依赖...
  • Vue 使用Vue-CLI4 创建Vue项目

    万次阅读 2019-11-07 10:37:18
    安装vue-cli npm install -g @vue/cli-service-global 创建项目 vue create 项目名称 选择手动配置(如果喜欢使用eslint可以选择默认) 键盘上下键即可切换,刚开始其实有两个选项,我之前曾经自定义过,所以...
  • vue项目可视化管理之(vue ui)

    万次阅读 2019-06-24 18:16:22
    可以通过那牛导入你的vue项目进行管理,也可以通过创建按钮进行可视化创建一个新的vue项目。 还可以查看运行依赖和开发依赖的以及在线安装和更新依赖,非常方便 任务按钮下,你可以运行项目、打包项目,检查等...
  • idea运行vue项目

    万次阅读 2018-04-27 23:26:51
    Frameworks - JavaScript:修改JavaScript language version为ECMAScript 6,确认File - Settings - Plugins:搜索vue,安装Vue.jsRun - Edit Configurations...:点击加号,选择npm,Name为Run,package.js...
  • vue 如何新建一个项目

    万次阅读 多人点赞 2018-04-21 16:10:36
    今天花了两个小时的时间自己走了一边创建vue项目的流程,跟你们分享。1:打开cmd命令行,首先安装node步骤:https://nodejs.org/en/download/ node官网,选择跟自己的电脑匹配的版本进行下载,然后一步步的安装即可...
  • 运行vue项目的指令

    万次阅读 2018-06-19 15:08:08
    运行vue项目的指令:npm run dev
  • 用命令行打开Vue项目

    万次阅读 2018-01-30 16:16:14
    用命令行打开Vue项目
  • 转载自Vue项目流程
  • VUE:教你如何运行vue项目

    万次阅读 多人点赞 2018-06-04 16:06:42
    -------------------------------------------从零开始安装首先下载安装node.jshttps://blog.csdn.net/wypersist/article/details/80492576运行项目进行定位到项目的路径进入项目之后安装依赖npm install 安装成功...
  • vue.js实战项目17个 包括 电商实战 音乐播放器 团购网 新闻客户端 图书管理 移动端APP 点餐系统 小米阅读开发 商城 vue+Python前后端分离打造电商系统 vue+node构建大型商城 vue+php(laravel5.3)实战等等。...
  • vue开发app项目实例

    万次阅读 2019-08-23 15:31:39
    注:这篇文章是别人写的,我转载的,原文链接忘了了 github地址是:https://github.com/jingjingke/vuePro-demo 效果预览:https://jingjingke.github.io/vuePro-demo/dist/ ...
1 2 3 4 5 ... 20
收藏数 208,141
精华内容 83,256
关键字:

vue项目