关于vue如何安装以及使用webpack管理项目在这里我就不作介绍了，这边主要是给出我做的一个小demo的例子给大家作为参考，希望 对你们有用吧！
index.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 6 <title>vueproject</title> 7 <script> 8 document.documentElement.style.fontsize=innerWidth/3.75+"px"; 9 window.onresize=function(){ 10 document.documentElement.style.fontsize=innerWidth/3.75+"px"; 11 } 12 </script> 13 <link rel="stylesheet" href="static/font/font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.min.css"> 14 <link rel="stylesheet" type="text/css" href="//at.alicdn.com/t/font_xcl480e81zoos9k9.css"/> 15 </head> 16 <body> 17 <div id="app"></div> 18 <!-- built files will be auto injected --> 19 </body> 20 </html>
里面引入了页面需要的一些图标，用的是font-awesome里的，大家也可以使用阿里巴巴里的图标
APP.vue
<template> <div id="app"> <router-view></router-view> <ul id="tab"> <li :class="{active_btn:iscur==0}" @click="iscur=0" v-on:click="changeImg()"> <router-link to="/home"> <i class="iconfont icon-moren_shouye_icon"></i> <p>首页</p> </router-link> </li> <li :class="{active_btn:iscur==1}" @click="iscur=1" v-on:click="changeImg()"> <router-link to="/category"> <i class="iconfont icon-moren_fenleiicon"></i> <p>分类</p> </router-link> </li> <li :class="{active_btn:iscur==2}" @click="iscur=2" v-on:click="changeImg()"> <router-link to="/group"> <img :src="imgState"/> <p class="tab_group">菌团</p> </router-link> </li> <li :class="{active_btn:iscur==3}" @click="iscur=3" v-on:click="changeImg()"> <router-link to="/mostIn"> <i class="iconfont icon-moren_zuiinicon"></i> <p>最In</p> </router-link> </li> <li :class="{active_btn:iscur==4}" @click="iscur=4" v-on:click="changeImg()"> <router-link to="/mine"> <i class="iconfont icon-wodeicon1"></i> <p>我的</p> </router-link> </li> </ul> </div> </template> <script> export default { name: 'app', data(){ return{ iscur:0, imgState:"http://img.zhefengle.com/ca7151b676a709b0f9660eac0a274fa5.png" } }, methods:{ changeImg :function () { if(this.iscur==2){ this.imgState="http://img.zhefengle.com/3956d9c44bc8e0093428314d0763dab2.png"; }else{ this.imgState="http://img.zhefengle.com/ca7151b676a709b0f9660eac0a274fa5.png"; } } } } </script> <style type="text/css" src="./assets/reset.css"></style> <style scoped="scoped"> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #2c3e50; height: 100%; background:#F3F3F3; } #tab{width:100%;height:2.5rem;position:fixed;bottom:0;border-top: 1px solid #eee;z-index: 1000;background: white;} #tab>ul{width:100%;height:100%} #tab li{float:left;width:20%;height:100%;text-align:center;font-size: .55rem;} #tab li a{position: relative;height: 100%;font-size: .85rem;width:100%;color: #82757d;float: left;vertical-align: top;padding-top: .1rem;} #tab li a i{ position: relative;height: 1.2rem;line-height: 1.2rem;display: inline-block;width: 1.5rem;font-size: 1rem;color: #666;margin-top: .1rem;} #tab .active_btn a i{color: #e61128;} #tab .active_btn a p{color: #e61128;} #tab li a img{ width: 2.05rem;height: 2.05rem;margin-top: -0.8rem;} #tab li a p{font-size: .55rem;position: relative; z-index: 9;} #tab li a .tab_group{margin-top: -0.26rem;} </style>
main.js
// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import VueRouter from 'vue-router' import VueResource from 'vue-resource' import App from './App' import Home from './views/Home' import Category from './views/Category/Category' import Cate from './views/Category/Cate/Cate' import Brand from './views/Category/Brand/Brand' import Website from './views/Category/Website/Website' import All from './views/Category/All/All' import Detail from './views/Category/Detail/Detail' import Shopdetail from './views/Category/Shopdetail/Shopdetail' import Gory from './views/Category/Gory/Gory' import Group from './views/Group' import Mine from './views/Mine' import MostIn from './views/MostIn' import Person from './views/Person' import Setting from './views/Setting' import VueAwesomeSwiper from 'vue-awesome-swiper' import Validator from 'vue-validator' import Choiceness from './components/group/Choiceness' import Topic from './components/group/Topic' import Attention from './components/group/Attention' import Taglist from'./components/group/Taglist' import GoodsInfo from'./components/group/GoodsInfo' import UserInfo from './views/UserInfo' import VueScroller from 'vue-scroller' Vue.use(VueScroller) Vue.use(Validator) Vue.config.productionTip = false Vue.use(VueRouter) Vue.use(VueResource) Vue.use(VueAwesomeSwiper) const routes=[ {path:'',component:Home}, {path:'/home',component:Home}, { path: '/category', component: Category , children:[ { path: '/', component: Cate }, { path: '/cate', component: Cate }, { path: '/brand', component: Brand }, { path: '/website', component: Website }, ] }, {path:'/group',component:Group}, {path:'/mine',component:Mine}, {path:'/mostIn',component:MostIn}, { path: '/All', component: All }, { path: '/Detail', component: Detail }, { path: '/Shopdetail', component: Shopdetail }, { path: '/Gory', component: Gory }, {path:'/userInfo',component:UserInfo}, {path:'/group',component:Group,children:[ {path:'',component:Choiceness}, {path:'/choiceness',component:Choiceness}, {path:'/topic',component:Topic}, {path:'/attention',component:Attention}, {path:'/taglist',component:Taglist}, {path:'/goodsInfo',component:GoodsInfo}, ]}, {path:'/mine',component:Mine}, {path:'/mostIn',component:MostIn}, {path:'/person',component:Person}, {path:'/Setting',component:Setting} ] const router=new VueRouter({ routes, mode: 'history', scrollBehavior (to, from, savedPosition) { // 如果你的連結是帶 # 這種 // to.hash 就會有值(值就是連結) // 例如 #3 if (to.hash) { return { // 這個是透過 to.hash 的值來找到對應的元素 // 照你的 html 來看是不用多加處理這樣就可以了 // 例如你按下 #3 的連結，就會變成 querySelector('#3')，自然會找到 id = 3 的元素 selector: to.hash } } } }) /* eslint-disable no-new */ new Vue({ el: '#app', template: '<App/>', components: { App }, router })
这个部分主要是你组件的部分，需要下载使用什么，需要在这里引入，也可以哪里使用哪里引入，还有就是一般我们都会使用接口拿数据，你也可以单独弄一个js文件来管理那些数据，因为数据是经常变化的 ，方便管理
这里还给大家举一个例子，就是页面下拉的时候，到最底部了，需要重新拿数据，这个时候如何判断已经下拉到最底部了呢？有人会说使用使用可视高度等于滚动的高度就可以了 ，是可以，但是在项目里面用这个方法是不合适的，其实使用下载一个vue-scroller即可解决
<template> <div id="detail"> <div class="title"> <div class="left"> <a href="javascript:void(0)" @click="back()"><</a> </div> <div class="main">{{this.$route.query.name}}</div> </div> <div class="type-list"> <div class="sort-row"> <ul class="sorts"> <li :class="{active_btn:iscur==0}"><a href="javascript:void(0)">综合</a></li> <li :class="{active_btn:iscur==1}" @click="change(0,0,0,0,0,1)"><a href="javascript:void(0)">折扣</a></li> <li :class="{active_btn:iscur==2}" @click="change(-2,0,0,1,0,2)"><a href="javascript:void(0)">价格</a></li> <li :class="{active_btn:iscur==3}" ><a href="javascript:void(0)">筛选</a></li> </ul> </div> </div> <scroller :on-refresh="refresh" :on-infinite="infinite" style="padding-top: 44px;"> <div class="htlist"> <div> <ul> <li v-for="item in items"> <router-link :to="{ path:'/shopdetail', query: { id1: item.shareId} }" class="list-item"> <div class="list-out-lay"> <div class="list-out-img"> <img :src="item.itemImgUrl" alt="" class="img-list"> </div> </div> <div class="main"> <h4>{{item.itemTitle}}</h4> <div class="price"> <div class="left1">￥{{item.itemCurPrice}}</div> </div> <p> <img :src="item.countryImgUrl" alt="" class="icon-qudaotubiao">{{item.shopName}} </p> </div> </router-link> </li> </ul> </div> </div> </scroller> </div> </template> <script> export default { name: 'detail', data(){ return{ arr3:[], arr4:[], iscur:"", items: [], p:"", page:"", } }, mounted(){ this.p=1; this.$http.jsonp("https://h5api.zhefengle.cn/search/item_search_ext.html?biz_channel=&firstCate="+this.$route.query.first+"&limit=16&page=1&secondCate="+this.$route.query.id2) .then(function (res) { this.arr3=res.body.model.bannerIntroduce; this.arr4=res.body.model.searchList; this.page=res.body.model.totalPage; console.log(this.page); for (var i = 0; i < 16; i++) { this.items.push(res.body.model.searchList[i]); } }); }, methods:{ back:function () { window.history.go(-1) }, change:function (a,b,c,d,f,g) { this.$http.jsonp("https://h5api.zhefengle.cn/search/item_search_ext.html?activeIndex=0&biz_channel=&brandId=&discountOrder="+a+"&firstCate="+this.$route.query.first+"&keyword=&limit=16&maxPrice="+b+"&minPrice="+c+"&page=1&priceOrder="+d+"&secondCate="+this.$route.query.id2+"&sex="+f+"&shopId=&typeName=") .then(function (res) { this.iscur=g; this.arr4=res.body.model.searchList; }) }, refresh: function (done) { // var self = this // setTimeout(function () { // var start = self.top - 1 // for (var i = start; i > start - 10; i--) { // self.items.splice(0, 0, i + ' - keep walking, be 2 with you.'); // } // self.top = self.top - 10; // done(); // }, 1500) }, infinite: function (done) { this.p++; console.log(this.p,this.page); this.$http.jsonp("https://h5api.zhefengle.cn/search/item_search_ext.html?biz_channel=&firstCate="+this.$route.query.first+"&limit=16&page="+this.p+"&secondCate="+this.$route.query.id2) .then(function (mes) { var self = this setTimeout(function () { for (var i = 1; i < 16; i++) { self.items.push(mes.body.model.searchList[i]); } done(); }, 1500) }); } } } </script> <style src="../../../assets/Detail.css"></style> <style> .active_btn a{ border-bottom: .1rem solid #e50039; display: inline-block; height: 2rem; color: #e50039; } .main { height: 100%; overflow: hidden; padding: 0 3rem; font-size: .7rem; font-weight: 400; text-align: center; color: #333; } </style>
记住，使用它一定要引入他！