vue項目總結，所用到的技術點

時間 2019-12-09

標籤 vue 項目總結所用技術简体版

原文原文鏈接

1.用到的技術點javascript

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都會匹配到這裏的css

　　1.只須要定義一個ID容器 <div id="app"></div>html

<!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() 方法vue

　　2.導入項目中所須要的cssjava

　　3.讓app.vue給用戶顯示的第一個組件ios

　　　　1.首先app.vue引入到mian.js中　　import App from './App.vue'ajax

　　　　2.在Vue實例中定義render函數,變量名須要一致vue-router

　　　　　　render:function(createElement){ //項目一啓動以後，呈現給用戶的第一個組件vuex

　　　　　　　　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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。