vue項目搭建

時間  2020-07-30
標籤 vue 項目 搭建 简体版
原文   原文鏈接

vue項目搭建

一、項目初始化

一、根組件：App.vuecss

<template>
    <div id="app">
        <router-view />
    </div>
</template>

二、路由配置：router/index.jshtml

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home
    }
];

三、組件：views與components文件夾vue

  1. 刪除HOME.vue之外的全部文件app

  2. 初始化HOME.vueide

    <template>
  <div class="home">
​
  </div>
</template>

  3. 分類管理資源:assets文件夾函數

    創建img、css、js子文件夾，刪除原來的文件ui

  4. 若是要修改頁面標籤圖標，替換public文件夾下的facicon.ico圖片文件this

二、項目數據局部化處理

無論頁面組件仍是小組件都會被屢次複用，複用組件的緣由其實就是複用組件的頁面結構，頁面樣式，頁面邏輯，可是在頁面上的數據須要區分，要使每一個組件被複用後都是獨立的，就須要使用數據局部化處理url

藉助函數能夠產生局部做用的特色，爲每次的複用組件產生一個獨立的做用域spa

語法：

data (){
    return{
        // 數據們
    }
}

例子：父組件屢次複用子組件，每一個被複用的組件都是相互獨立的

子組件：

<template>
    <div class="beat" @click="count += 1">
        {{ count }}下
    </div>
</template>
​
<script>
    export default {
        name: "Beat",
        // 不論是頁面組件仍是小組件，均可能被複用，頁面結構與樣式均可以採用一套，可是數據必定要相互獨立
        data () {
            return {
                count: 0
            }
        }
    }
</script>
​
<style scoped>
    .beat {
        width: 100px;
        height: 100px;
        background-color: orange;
        text-align: center;
        line-height: 100px;
        border-radius: 50%;
    }
</style>
子組件

父組件：

<template>
    <div class="home">
        <Beat/>
        <Beat/>
    </div>
</template>
<script>
    import Beat from '@/components/Beat'
    export default {
        components: {
            Beat,
        }
    }
</script>
父組件

三、路由邏輯跳轉

不少時候咱們須要經過普通按鈕來控制頁面的跳轉

一、跳轉到指定頁

this.$router.push('路徑')

或者：this.$router.push({name: '路由名'})

    <button @click="goPage('/first')">前往第一頁</button>
    <button @click="goPage('/goods')">前往商品頁</button>
​
export default {
methods:{
    goPage(path){
      this.$router.push(path)
    }
}

二、前進後退頁

this.$router.go(正負整數)，正數表示前進n頁，負數表示後退n頁，n數字是步長

通常在移動端端開發的時候使用

    <button @click="goBack(1)">前進一步</button>
    <button @click="goBack(-1)">後退一步</button>
​
// 前進後退：this.$router.go(正負整數)，正式表明前進，負數表明後臺，數值就是步長
    export default {
        methods: {
           goBack(num) {
                this.$router.go(num);  // 通常在移動端項目上運用
            }
    }

四、組件傳參

一、父傳子

一、在子組件內部經過props設置組件的自定義屬性

props: ['abc', 'goods']

二、在父組件渲染子組件時對子組件自定義的屬性賦值便可

<GoodsBox v-for="goods in goods_list" :abc="goods" :goods="goods"/>

子組件：

<template>
    <div class="goods-box">
        <img :src="goods.img" alt="">
        <p>{{ goods.title }}</p>
    </div>
</template>
​
<script>
    export default {
        name: "GoodsBox",
        // 在組件內部經過props定義組件的自定義屬性
        props: ['abc', 'goods'],
    }
</script>
​
<style scoped>
    .goods-box {
        width: 260px;
        height: 300px;
        border: 1px solid black;
        border-radius: 5px;
        margin: 20px;
        float: left;
        overflow: hidden;
        text-align: center;
    }
    img {
        width: 260px;
        height: 260px;
    }
</style>
子組件

父組件：

<template>
    <div class="goods">
        <div class="main">
            <!-- 在使用子組件是對自定義屬性賦值便可 -->
            <GoodsBox v-for="goods in goods_list" :abc="goods" :goods="goods" />
        </div>
    </div>
</template>
<script>
    import GoodsBox from "../components/GoodsBox";
​
    let goods_list = [
        {
            img: require('@/assets/img/001.jpg'),
            title: '小貓',
        },
        {
            img: require('@/assets/img/002.jpg'),
            title: '小貓兒',
        },
        {
            img: require('@/assets/img/003.jpg'),
            title: '小狗',
        },
        {
            img: require('@/assets/img/004.jpg'),
            title: '小狗兒',
        },
    ];
​
    export default {
        name: "Goods",
        data () {
            return {
                goods_list,
            }
        },
        components: {
            GoodsBox,
        },
    }
</script>
父組件

二、子傳父

前提：子組件是被父組件渲染的，因此子組件渲染要晚於父組件

  1. 子組件必定要知足一個條件，才能對父組件進行傳參（達到某個時間節點，或者某個被激活的狀態）

    • 子組件剛加載成功，給父組件傳參

    • 子組件要被銷燬了，給父組件傳參

    • 子組件某一個按鈕被點擊的時刻，給父組件傳參

  2. 在子組件達到知足條件激活後，對父組件發一個通知，將數據攜帶處理（自定義組件事件）, this.$emit()通知父組件，自定義組件事件

        <div class="goods-box" @click="boxClick"></div>
    methods: {
        // this.$emit('自定義的屬性'，傳給父組件的參數1，傳給父組件的參數2...)
        boxClick () { this.$emit('receiveData', this.goods.title, '第二個數據', '第三個數據') }
    }

  3. 在父組件渲染子組件的時候爲自定義的事件綁定方法

     <GoodsBox @receiveData="recFn"/>

  4. 父組件實現綁定方法時，就能拿到子組件傳參的內容

        recFn(title, data2, data3) {
        console.log('接收到了' + title);
    }

    注意：組件不能綁定系統事件，組件的事件都是在本身內部完成

子組件：

<template>
    <div class="goods-box" @click="boxClick">
        <img :src="goods.img" alt="">
        <p>{{ goods.title }}</p>
    </div>
</template>
​
<script>
    export default {
        props: ['abc', 'goods'],
        methods: {
            boxClick () {
                // 通知父級 - 自定義組件的事件
                this.$emit('receiveData', this.goods.title)
            }
        }
    }
</script>
子組件

父組件：

<template>
    <div class="goods">
        <div class="main">
            <!-- 實現自定義事件，接收子組件通知的參數 -->
            <GoodsBox v-for="goods in goods_list" @receiveData="recFn"/>
        </div>
    </div>
</template>
<script>
    import GoodsBox from "../components/GoodsBox";
    export default {
        name: "Goods",
        data () {
            return {
                goodsTitle: '哪一個',
            }
        },
        methods: {
            recFn(title) {
                console.log('接收到了' + title);
                this.goodsTitle = title;
            }
        },
        components: {
            GoodsBox,
        },
    }
</script>
父組件

五、組件的生命週期鉤子

一、組件的生命週期：一個組件從建立到銷燬的整個過程

二、在一個組件的生命週期中，會有不少特殊的時間節點，且每每在特定的時間節點完成必定的邏輯，特定的時間節點能夠綁定鉤子

鉤子：提早爲某個事件綁定方法，當知足該事件激活條件時，方法就會被調用

最常常用的就是 created(){}：請求後臺數據，將請求的結果保存在前臺頁面

<template>
    <div class="goods">
        <Nav />
    </div>
</template>
<script>
    import Nav from "../components/Nav";
    export default {
        name: "Goods",
        components: {
            Nav,
        },
        beforeCreate() {
            console.log('該組件要被加載了')
        },
        created() {
            console.log('該組件要被加載成功了')
        },
        updated() {
            console.log('數據更新了')
        },
        destroyed() {
            console.log('該組件銷燬了')
        }
    }
</script>

六、路由傳參

兩個父組件之間沒有任何關係，想從一個組件點擊跳往另外一個組件就須要使用路由url正則傳遞數據進行

路由傳參有兩種方式：

一、方式一：經過url正則傳遞數據

  1. 設置

    • 在路由router/index.js路由path設置：path: '/gooddetail/:pk', :pk至關於正則匹配任意字符

    • 請求時:pk就能夠換成任意字符

    • '/goods/:pk/detail/:xyz' ==》 '/goods/任意字符/detail/任意字符'

  2. 如何傳

    兩種方式：

    • 連接跳轉：<router-link :to="`/goods/detail/${pk}`"></router-link>

    • 路由邏輯跳轉到指定頁：this.router.push(/goods/detail/${pk})

  3. 如何取

    this.$route對象是管理路由參數的，傳遞的參數會在this.$route大字典中，傳遞的pk參數在this.$route.params字典中

    this.$route.params.pk

配置：router/index.js

const routes = [
    {
        path: '/goods/detail/:pk',
        name: 'GoodsDetail',
        component: GoodsDetail
    },
]

傳遞：GoodsBox.vue

<router-link class="goods-box" :to="`/goods/detail/${goods.pk}`">
    <img :src="goods.img" alt="">
    <p>{{ goods.title }}</p>
</router-link>
​
<!------------------- 或者 ------------------->
​
<div class="goods-box" @click="goDetail(goods.pk)">
    <img :src="goods.img" alt="">
    <p>{{ goods.title }}</p>
</div>
<script>
    export default {
        name: "GoodsBox",
        methods: {
            goDetail (pk) {
                this.$router.push(`/goods/detail/${pk}`);
            }
        }
    }
</script>

接收：GoodsDetail.vue

<script>
    export default {
        name: "GoodsDetail",
        data () {
            return {
                pk: '未知',
            }
        },
        // 一般都是在鉤子中獲取路由傳遞的參數
        created() {
            this.pk = this.$route.params.pk || this.$route.query.pk;
        }
    }
</script>

二、方式二：經過url參數傳遞數據

  1. 設置

    路由中直接傳入路徑，path:'/good/detail ' 後面不要寫什麼了，不須要正則匹配，請求的時候是?pk=數據

  2. 如何傳

    兩種方式：將上面/ 換成 ?pk=

    • 連接跳轉： <router-link :to="`/goods/detail?pk=${pk}`"></router-link>或者<router-link :to="{name:'GoodsDetail', query:{pk: pk}}"></router-link>

    • 路由邏輯跳轉到指定頁：this.$router.push(/goods/detail?pk=${pk})或者this.$router.push({name:'GoodsDetail', query:{pk: pk}})

  3. 如何取

    this.$route對象是管理路由參數的，傳遞的參數會在this.$route.query字典中

    this.$route.query.pk

配置：router/index.js，正常配置便可

const routes = [
    {
        path: '/goods/detail',
        name: 'GoodsDetail',
        component: GoodsDetail
    },
]

傳遞：GoodsBox.vue

<router-link class="goods-box" :to="`/goods/detail?pk=${goods.pk}`">
    <img :src="goods.img" alt="">
    <p>{{ goods.title }}</p>
</router-link>
​
<!------------------- 或者 ------------------->
​
<div class="goods-box" @click="goDetail(goods.pk)">
    <img :src="goods.img" alt="">
    <p>{{ goods.title }}</p>
</div>
<script>
    export default {
        name: "GoodsBox",
        methods: {
            goDetail (pk) {
                // this.$router.push(`/goods/detail?pk=${goods.pk}`);
                
                // 或者
                this.$router.push({
                    name: 'GoodsDetail',
                    query: {
                        pk,
                    }
                });
            }
        }
    }
</script>

接收：GoodsDetail.vue

<script>
    export default {
        name: "GoodsDetail",
        data () {
            return {
                pk: '未知',
            }
        },
        // 一般都是在鉤子中獲取路由傳遞的參數
        created() {
            this.pk = this.$route.params.pk || this.$route.query.pk;
        }
    }
</script>

七、全局配置自定義的css與js

一些css樣式全局都須要使用的叫css reset，或者一些js全局須要使用的咱們就全局配置

global.css

html, body {
    margin: 0;
}
​
a {
    color: black;
    text-decoration: none;
}
​
ul {
    margin: 0;
    padding: 0;
}
global.css

settings.js

export default {
    base_url: 'https://127.0.0.1:8000'
}
settings.js

main.js

//1) 配置全局css,四種方式都行，直接導入就行
import '@/assets/css/global.css'
// import global_css from '@/assets/css/global.css'  // 資源須要用變量保存,方便之後使用
// require('@/assets/css/global.css')
// let global_css = require('@/assets/css/global.css')  // 資源須要用變量保存,方便之後使用
​
​
// 2) 配置自定義js設置文件，導入以後要配置
import settings from '@/assets/js/settings.js'
Vue.prototype.$settings = settings;
// 在任何一個組件中的邏輯,能夠經過 this.$settings訪問settings.js文件的{}數據
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程