1.用到的技術點
vue 是一個漸進式JavaScript框架 npm install vue vue-route 是一個路由匹配功能 npm install vue-router vue-resource 發送ajax請求的 npm install vue-resource vue-preview 圖片預覽插件 npm i vue-preview -S vuex 組件傳值 npm install vuex --save mint-ui 基於vue的移動端組件 npm i mint-ui -S mui 最接近原生的前端框架
2. template.html 是整個主頁面，最終所有的js和css和html都會匹配到這里的
1.只需要定義一個ID容器 <div id="app"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue項目</title>
<!-- 我是一個好人 -->
<style>
@media only screen and (width:320px){
html{
font-size:16px;
}
}
@media only screen and (width:360px){
html{
font-size:18px;
}
}
@media only screen and (width:414px){
html{
font-size:20px;
}
}
body{
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id="app"></div>
</body>
</html>
2. main.js 是一個主模塊集成了所有的第三方包和css文件和js文件和路由匹配
1.引入第三方包，使用import關鍵字，基於vue的必須集成到vue中以 Vue.use() 方法
2.導入項目中所需要的css
3.讓app.vue給用戶顯示的第一個組件
1.首先app.vue引入到mian.js中 import App from './App.vue'
2.在Vue實例中定義render函數,變量名需要一致
render:function(createElement){ //項目一啟動之后，呈現給用戶的第一個組件
return createElement(App)
}
4.設置全局過濾器 Vue.filter()
5.路由整個步驟
1.導入需要設置路由的組件
import home from './components/home/home.vue' import category from './components/category/category.vue'
2.設置路由規則 new VueRouter實例
{path:'/home',component:home}，來進行路由匹配，<router-link go="/home">需要跟go屬性一致
{path:'/',redirect:'/home'} 來進行默認路由匹配
const router = new VueRouter({
routes:[
{path:'/',redirect:'/home'},
{path:'/home',component:home},
{path:'/category',component:category},
{name:"pictureAndTextIntruduction",path:"/goods/pictureAndTextIntruduction",component:pictureAndTextIntruduction},
{path:"/goods/goodscomment",component:goodscomment}
]
})
3.把路由匹配規則放到跟實例 new Vue({})的router中，就實現整個路由匹配功能了
new Vue({
router:router
})
6.vuex的使用步驟
1.新建一個空倉庫 var store = new Vuex.Store()
倉庫里有四個對象
state 存儲數據的地方
getters 獲取數據的地方
mutations 同步更新數據
actions 異步更新數據
2.把倉庫的東西放到跟實例中，變量名需一致
new Vue({
store:store
})
//導入我們的第三方包
import Vue from 'vue' //es5 ===> var vue = require('vue')
import Mint from 'mint-ui'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import moment from 'moment'
import VuePreview from 'vue-preview'
import axios from 'axios'
import Vuex from 'vuex'
//集成到Vue中
Vue.use(Mint)
Vue.use(VueRouter) // vue.$route vue.$router
Vue.use(VueResource) //vue.$http...
Vue.use(VuePreview)
Vue.use(Vuex) //$store
Vue.prototype.$axios = axios
//導入項目中需要用到的css
import 'mint-ui/lib/style.min.css'
import './statics/mui/css/mui.min.css'
import './statics/css/common.css' //自己寫的樣式，放在最好
//導入我們要渲染的根組件這個模塊
import App from './App.vue'
//全局過濾器
Vue.filter('dateFmt',(input,formatString)=>{
const lastFormatString = formatString || 'YYYY-MM-DD HH:mm:ss'
/**
* 參數1：格式化的原始時間
* 參數2：格式化的字符串
*/
return moment(input).format(lastFormatString)
})
//導入需要設置路由規則的組件
import home from './components/home/home.vue'
import category from './components/category/category.vue'
import shopcart from './components/shopcart/shopcart.vue'
import mine from './components/mine/mine.vue'
import newslist from './components/news/newslist.vue'
import newsinfo from './components/news/newsinfo.vue'
import photolist from './components/photo/photolist.vue'
import photoinfo from './components/photo/photoinfo.vue'
import goodslist from './components/goods/goodslist.vue'
import goodsinfo from './components/goods/goodsinfo.vue'
import pictureAndTextIntruduction from './components/goods/pictureAndTextIntruduction.vue'
import goodscomment from './components/goods/goodscomment.vue'
//創建路由對象，設置路由規則
const router = new VueRouter({
routes:[
{path:'/',redirect:'/home'},
{path:'/home',component:home},
{path:'/category',component:category},
{path:'/shopcart',component:shopcart},
{path:'/mine',component:mine},
{path:'/news/newslist',component:newslist},
{path:'/news/newsinfo/:newsId',component:newsinfo},
{path:'/photo/photolist',component:photolist},
{path:'/photo/photoinfo/:photoId',component:photoinfo},
{path:'/goods/goodslist',component:goodslist},
{path:"/goods/goodsinfo/:goodsId",component:goodsinfo},
{name:"pictureAndTextIntruduction",path:"/goods/pictureAndTextIntruduction",component:pictureAndTextIntruduction},
{path:"/goods/goodscomment",component:goodscomment}
]
})
//創建一個倉庫
//window
const store = new Vuex.Store({
state: {//存儲數據的地方
goodsList:[]
},
getters: {//獲取數據
//獲取加入購物車的商品的數組
getGoodsList(state){
return state.goodsList
},
//獲取加入購物車中的總數量
getGoodsCount(state){
let totalCount = 0
for(var i=0;i<state.goodsList.length;i++){
totalCount+=state.goodsList[i].count
}
return totalCount
}
},
mutations: {//`同步更改數據`
/**
* 添加商品到購物車的方法
* 其中參數1固定的，就是代表我們的state
* 參數2：商品信息的對象
*/
addGoods(state,goodsObj){
//console.log("添加商品到購物車")
//console.log(goodsObj)
//goodsObj ==> {goodsId:87,count:3}
state.goodsList.push(goodsObj)
//console.log(state.goodsList)
},
deleteGoodsById(state,goodsId){
for(var i = state.goodsList.length-1 ;i>=0;i--){
if(goodsId==state.goodsList[i].goodsId){
state.goodsList.splice(i,1)
}
}
}
},
actions: {//`異步更改數據`
//可以認為是$store對象
addGoodsAction(context,goodsObj){
//調用mutations
context.commit('addGoods',goodsObj)
}
}
})
//創建根實例，到時候，Vue去解析id=app的div
new Vue({
el:"#app",
router,
store,
render:function(createElement){ //項目一啟動之后，呈現給用戶的第一個組件
return createElement(App)
}
})
3. app.vue 是主頁面，所有的html視圖會集合到這里來，用到的技術點
1.使用mint-Ui的header模塊就可以了固定header部分了
2.使用v-show指令是否隱藏或者顯示 返回按鈕
1.當變量 isShowBack=true的時候讓其顯示，否則隱藏
2.當點擊返回的時候調用 goBack() 函數 this.$router.go(-1)回退功能
3.當組件創建的時候調用函數 this.isShowOrHidden(this.$route.path)
函數isShowOrHidden(path)判斷path的值來改變 isShowBack的值
3.中間內容，通過路由匹配視圖標簽，路由變化的值在這里顯示 <router-view></router-view>
4.底部內容使用mint-Ui的Tabbar模塊來進行排版
5.使用三元表達式來判斷底部是否隱藏
:class="isShowTabBar ? '' : 'tabBarStyleHidden' "
6.使用 <router-link to="/home"></router-link>來進行超鏈接調轉，它的底層最終會變成<a href="/home">
<template>
<div>
<!-- 1.0 頭部,標題欄 -->
<mt-header fixed title="Vue項目"></mt-header>
<div v-show="isShowBack" @click="goBack" class="backStyle"><返回</div>
<!-- 2.0 中間內容，根據路由動態變化 -->
<router-view></router-view>
<!-- 3.0 底部的tabBar -->
<mt-tabbar fixed :class="isShowTabBar ? '' : 'tabBarStyleHidden' ">
<mt-tab-item>
<router-link to="/home">
<img src="http://img08.jiuxian.com/bill/2016/0224/cccd8df26a754c139de800406af82178.png">
</router-link>
</mt-tab-item>
<mt-tab-item>
<router-link to="/category">
<img src="http://img07.jiuxian.com/bill/2016/0224/36a49b28ec5e4cdf9dbe37988199487d.png">
</router-link>
</mt-tab-item>
<mt-tab-item>
<router-link to="/shopcart">
<img src="http://img08.jiuxian.com/bill/2016/0224/42baf46987b6460bb43b3396e9941653.png">
<span class="badgeStyle">{{myCount}}</span>
</router-link>
</mt-tab-item>
<mt-tab-item>
<router-link to="/mine">
<img src="http://img09.jiuxian.com/bill/2016/0224/cba9029a8f4444a989a2ab5aa84c6538.png">
</router-link>
</mt-tab-item>
</mt-tabbar>
</div>
</template>
// scoped代表樣式私有
<style scoped>
.backStyle{
z-index: 2;
position: fixed;
left:15px;
top:10px;
font-size: 14px;
color: #fff;
font-weight: 900;
}
.tabBarStyleHidden{
display: none;
}
img{
width:42px;
height: 35px;
}
.mint-tabbar>.mint-tab-item.is-selected{
background-color: #fafafa;
}
.badgeStyle{
font-size: 11px;
line-height: 1.3;
position: absolute;
top: 7px;
left: 63%;
text-align: center;
padding: 1px 5px;
color: #fff;
border-radius: 11px;
background: red;
}
</style>
<script>
//導入公共的Vue對象
import bus from './common/commonvue.js'
export default{
data(){
return {
isShowTabBar:true,
isShowBack:false,
myCount:0
}
},
methods:{
goBack(){
this.$router.go(-1)
},
isShowOrHidden(path){
if(path=="/home"){
this.isShowTabBar = true
this.isShowBack = false
}else{
this.isShowTabBar = false
this.isShowBack = true
}
}
},
created(){
this.isShowOrHidden(this.$route.path)
//監聽加入購物車的動作
// bus.$on('goodsCount',function(count){
// this.myCount+=count
// }.bind(this))
},
updated(){//當倉庫的值，發生更改，同樣會調用這個方法
this.myCount = this.$store.getters.getGoodsCount
},
watch:{
/**
"$route":(newValue,oldValue)=>{
console.log(this)
if(newValue.path=="/home"){
this.isShowTabBar = true
}else{
this.isShowTabBar = false
console.log(this.isShowTabBar)
}
}
*/
"$route":function(newValue,oldValue){
this.isShowOrHidden(newValue.path)
}
}
}
</script>