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=)