1.App.vue中：
2.在main.js中的new vueRouter里设置mode:history或者hash ；设置{path:'/',redirect:'home'}默认进入的路径；设置linkActiveClass改变路由激活时的class名；也定义全局基本样式和全局过滤器等，例如：
import moment from 'moment';
Vue.filter('datefmt',function(input,fmtstring){
// 使用momentjs这个日期格式化类库实现日的格式化功能
return moment(input).format(fmtstring);
}); 在oschina git代码
git init
git add.
git commit -m "项目版本1"
git remote add origin https://git.oschina.net/.../...
git push -u origin master 更改原类库的css时遇到伪类图标时可以修改成自定义图片
.mui-icon-phone:before{
content: '';
background-image: url(../../statics/imgs/3.png);
display: inline-block;//将行间变成块级元素
width: 50px;
height: 50px;
background-repeat: round;
} v-bind="{to:'/news/newsinfo/'+item.id}" 特殊写法
通过this.$route.params.id获取main.js中设置的路由id值
用post方法提交评论数据
postData(){
if (this.content.trim().length === 0) {
Toast('评论不能为空');
return;
}
this.$http.post('/api/comment/' + this.id, {
content: this.content,
}).then(res => { //, {params: {cId: this.id}}可以传值给后台node服务器，在content后
console.log(res);
Toast('成功提交');
this.list = [{
"user_name": "匿名用户",
"add_time": new Date(),
"content": this.content
}].concat(this.list); this.content = ''; }) }, get评论数据
getcommentlist(pageindex=1){
1.0 确定评论数据的url
let url = common.apidomain + '/api/getcomments/'+this.id+'?pageindex='+pageindex;
2.0 发出ajax请求获取数据即可
this.$http.get(url).then(function(res){
if(res.data.status !== 0 ){
Toast(res.data.message);
return;
}
3.0 将message数组中的数据赋值给this.list
this.list = this.list.concat(res.data.message);
});
} 实现更多页的加载
getmore(){
1.0 实现this.pageindex值的增加1
this.pageindex++;
console.log(this.pageindex);
2.0 获取当前this.pageindex值对应的分页数据
this.getcommentlist(this.pageindex);
} 设置overflow-x:auto;出现x轴滚动条
通过v-bind绑定样式：
<ul v-bind="{style:'width:'+ulWidth+'px'}">
--------------------------------------------------------------------------------------------------------------
let w = 62;
let count = res.data.message.length + 1;
this.ulWidth = w * count ; 使用插件时（比如vue-preview）记得确认在webpack.config.js的loader中增加扩展名（如.svg）,vue-preview不能放在<a></a>中
在photoinfo的getimgs方法里通过forEach遍历服务器数据，来按照vue-preview的要求更改图片宽高：
getSuolue(){
this.$http.get('/api/suoluetu').then(res=>{
res.data.forEach(item=>{
let img=document.createElement('img');
img.src=item.src;
item.h=img.height;
item.w=img.width;
});
this.list=res.data;
})
} 在子组件inputNumber.vue中定义加和减的方法，通过this.$emit传值给父组件
methods:{
substrict(){
this.count--;
确保最小值为1
if(this.count <1){
this.count = 1;
}
this.sendmessage();
},
add(){
this.count++;
this.sendmessage();
},
sendmessage(){
this.$emit('dataobj',this.count);
}
} 在父组件goodsinfo.vue中
<inputnumber v-on:dataobj="getcount" class="inputnumber"></inputnumber>
----------------------------------------------------------------------------------
getcount(count){
this.inputNumberCount = count;
},
// getcount中的第一个参数就是子组件inputNumber中传递过来的count值 通过localStorage完成在goodsinfo.vue中点击 加入购物车 将数据同步至app.vue中的购物车页面
1. 只有2个vm对象是同一个对象时才能实现父子间传值，于是可以创建一个公共的vm.js文件，(将购买数量添加至app.vue下方的购物车徽章。）
//vm.js
import Vue from 'Vue';
export const COUNTSTR = 'inputNumberCount';
export var vm = new Vue(); //goodsinfo.vue
import {vm,COUNTSTR} from '../../kits/vm.js';
toshopcar(){
// 1.0 触发事件
vm.$emit(COUNTSTR,this.inputNumberCount);
} //app.vue
import {vm,COUNTSTR} from './kits/vm.js';
// 利用 vm.$on() 来注册 COUNTSTR这个常量代表的事件
vm.$on(COUNTSTR,function(count){
// 1.0 将count值追加到购物车中
var badgeobj = document.querySelector('#badge');
badgeobj.innerText = parseInt(badgeobj.innerText) + count;
}); 2.封装localSg.js
// 1.0 定义常量key,将来操作的localStorage中的数据都以这个key来作为标识
export const KEY = 'goodsdata';
export let valueObj = {goodsid:0,count:0};
// 2.0 实现数据的增加
// value;格式： {goodsid:87,count:10}
export function setItem(value){
//1.0 获取json格式
let jsonString = localStorage.getItem(KEY);
jsonString = jsonString || '[]';
let arr = JSON.parse(jsonString);
// 2.0 将value追加进入arr
arr.push(value);
// 3.0 将arr 转换成json字符串保存起来
localStorage.setItem(KEY,JSON.stringify(arr));
}
// 3.0 获取数据
export function getItem(){
let jsonString = localStorage.getItem(KEY);
// 将json格式字符串转换成 js对象
// jsonString：是一个标准的json格式
jsonString = jsonString || '[]';
return JSON.parse(jsonString);
} 在goodsinfo中使用：
import {setItem,valueObj} from '../../kits/localSg.js'
toshopcar(){
// 1.0 触发事件
vm.$emit(COUNTSTR,this.inputNumberCount);
// 2.0 将数据保存到localStroage中
valueObj.goodsid = this.id;
valueObj.count = this.inputNumberCount;
setItem(valueObj);
} 使用index使开关互不干扰
<div class="row" v-for="(item,index) in datalist">
<mt-switch class="switch" v-model="value[index]"></mt-switch>
getdatalist(){
// 1.0 从localstorage中获取到所有的商品id值
// obj的格式：{
// 87:4,
// 88:1
// }
let obj = getgoodsObject();
// 2.0 将id值按照 api的参数格式提交给api
let idstring = '';
for(let key in obj){
idstring+= key + ',';
}
idstring = idstring.substring(0,idstring.length-1);//提交服务器的数据格式为/id1,id2,id3... 整合数据格式：从[{"goodsid":87,"count":2},{"goodsid":88,"count":3}]变成{87:2,88:3}
export function getgoodsObject(){
// 获取 数组
/*
* arr的格式：
* [{goodsid:87,count:1},{goodsid:87,count:3},{goodsid:88,count:1}]
* */
let arr = getItem();
// 将arr数组中的goodid相同的多个对象合并成同一个对象
let resObj ={};
for(let i = 0 ; i<arr.length; i++){
if(!resObj[arr[i].goodsid]){
// 如果没有当前商品的数据，则添加一个数据
resObj[arr[i].goodsid] = arr[i].count;
}else{
// 已经有当前商品的数据了，则将cont追加
let count = resObj[arr[i].goodsid];
resObj[arr[i].goodsid] = count + arr[i].count;
}
}
return resObj;
} 实现购物车里的购买数量组件cartInputNumber.vue:
拿到服务器的数据后先进行处理：（cart.vue）
this.$http.get(url).then(function(res){
//状态值的判断
if(res.data.status != 0 ){
Toast(res.data.message);
return;
}
// 将locaStorage中的所有的商品对应的count的值赋值给message中每个对象的cou(服务器接口的数据）
res.data.message.forEach((item)=>{
item.cou = obj[item.id];// obj是从localStorage中获取的数据（let obj = getgoodsObject();）
// 为了解决一个bug所以必须在此处初始化values数组全部为false
this.value.push(false);
});
this.datalist = res.body.message;
}); cartInputNumber.vue（cart的子组件）中用props接受initCount和goodsid
methods:{
substrict(){
this.count--;
// 确保最小值为1
if(this.count <1){
this.count = 1;
return;
}
this.sendmessage('substrict');
},
add(){
this.count++;
this.sendmessage('add');
},
sendmessage(type){
this.resObj.type = type;
this.resObj.goodsid = this.goodsid;
this.$emit('cardataobj',this.resObj);
}
} 在localSg中添加方法：
//obj的格式：{goodsid:87,type:'add'}
export function updateData(obj){
let arr = getItem();
let count = 1;
if(obj.type ==='add'){
//加
arr.push({goodsid:obj.goodsid,count:count});
}else{
//减
for(let i =0 ;i < arr.length ; i++){
//如果这个对象中的count值等于1，则删除这个对象，否则将这个对象的count减1以后保存回去
if(arr[i].goodsid === obj.goodsid){
if(arr[i].count > 1){
arr[i].count = arr[i].count -1;
break;
}else{
//删除此对象
arr.splice(i,1);
break;
}
}
}
}
// 将最新的arr保存回localStorage中
localStorage.setItem(KEY,JSON.stringify(arr));
} 在cart中使用：
getiInputNumber(resObj){
console.log(resObj);
// 1.0 更新localStorage中的数据
updateData(resObj);
// 2.0 更新 this.datalist中的当前数量
for(let i = 0;i <this.datalist.length ; i++){
if(this.datalist[i].id == resObj.goodsid){
if(resObj.type =='add'){
this.datalist[i].cou = this.datalist[i].cou + 1;
}else{
this.datalist[i].cou = this.datalist[i].cou - 1;
}
break;
}
}
}, 实现小球飞入购物车功能：
<transition name="show" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter >
<div v-if="isshow" class="ball"></div>
</transition>
---------------------------------------------------------------------------------------------------------
动画3个方法
beforeEnter(el){
// 设定小球的初始位置
el.style.transform = "translate(0px,0px)";
},
enter(el,done){
// 保证小球出现动画
el.offsetWidth;
// 设置小球的结束位置
el.style.transform = "translate(75px,366px)";
// 结束动画
done();
},
afterEnter(el){
// 重置小球的初始状态
this.isshow = !this.isshow;
}
------------------------------------------------------------------------------------
.ball{
background-color: red;
height: 20px;
width: 20px;
border-radius: 50%;
position: absolute;
left:150px;
top:10px;
transition: all 0.4s ease;
z-index: 100;
}
转载于:https://www.cnblogs.com/jiuyejiu/p/8361741.html
![vue搭建过程及出现问题[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)