欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue-CLI 项目中相关操作

程序员文章站 2022-03-21 21:30:25
0830总结 Vue CLI 项目中相关操作 一.前台路由的基本工作流程 目录结构 App.vue:根组件 Nav.vue:小组件 PageFirst.vue:页面组件 PageSecond.vue:页面组件 router.js:路由配置 二.配置全局样式文件 目录结构 global.css mai ......

0830总结

vue-cli 项目中相关操作

一.前台路由的基本工作流程

目录结构

|vue-proj
|   |src
|   |   |components
|   |   |   |nav.vue
|   |   |views
|   |   |   |pagefirst.vue
|   |   |   |pagesecond.vue
|   |   |app.vue
|   |   |router.js

app.vue:根组件

<template>
    <div id="app">
        <!--根组件只需要书写router-view-->
        <!--router-view就是vue-router插件路由占位标签-->
        <router-view></router-view>
    </div>
</template>
<template>
    <div class="nav">
        <!--router-link就是vue-router插件路由页面转跳的标签,页面加载后会被解析为a标签-->
        <!--router-link不同于a标签,路由转跳之后更换组件,不会发送页面转跳,用to属性设置转跳路径-->
        <router-link to="/page-first">first</router-link>
        <router-link :to="{name: 'page-second'}">second</router-link>
        <router-link to="/course">课程</router-link>
        <!-- to后跟路由路径 | :to后可以用name设置路由别名 -->
    </div>
</template>

<script>
    export default {
        name: "nav"
    }
</script>

<style scoped>
    .nav {
        height: 100px;
        background-color: rgba(0, 0, 0, 0.4);
    }
    .nav a {
        margin: 0 20px;
        font: normal 20px/100px '微软雅黑';
    }
    .nav a:hover {
        color: red;
    }
</style>

pagefirst.vue:页面组件

<template>
    <div class="page-first">
        <nav></nav>
        <h1>page-first</h1>
    </div>
</template>

<script>
    // 使用
    import nav from '@/components/nav'
    export default {
        name: "pagefirst",
        components: {
            nav
        }
    }
</script>

<style scoped>
    .page-first {
        width: 100%;
        height: 800px;
        background: orange;
    }
    h1 {
        text-align: center;
    }
</style>

pagesecond.vue:页面组件

<template>
    <div class="page-second">
        <nav></nav>
        <h1 @click="printtitle">{{ title }}</h1>
        <input type="text" v-model="title">
    </div>
</template>

<script>
    import nav from '@/components/nav'
    export default {
        name: "pagesecond",
        data() {
            return {
                title: 'page-second'
            }
        },
        methods: {
            printtitle() {
                console.log(this.title)
            }
        },
        components: {
            nav
        },
    }
</script>

<style scoped>
    .page-second {
        width: 100%;
        height: 800px;
        background: pink;
    }
    h1 {
        text-align: center;
    }
</style>

router.js:路由配置

import vue from 'vue'
import router from 'vue-router'
import pagefirst from './views/pagefirst'
import pagesecond from './views/pagesecond'

vue.use(router);

export default new router({
    mode: 'history',  // 组件更换模拟页面转跳形成浏览器历史记录
    base: process.env.base_url,
    routes: [
        // 路由就是 url路径 与 vue组件 的映射关系
        // 映射出的组件会替换 根组件 中的 router-view 标签
        // 通过 router-link 标签完成 url路径 的切换
        {  
            path: '/page-first',
            name: 'page-first',
            component: pagefirst
        },
        {
            path: '/page-second',
            name: 'page-second',
            component: pagesecond
        },
    ]
})

二.配置全局样式文件

目录结构

|vue-proj
|   |src
|   |   |assets
|   |   |   |css
|   |   |   |   |global.css
|   |   |main.js

global.css

html, body, h1, ul {
    margin: 0;
    padding: 0;
}
ul {
    list-style: none;
}
a {
    text-decoration: none;
    color: black;
}

/* router-link标签激活状态拥有的类名 */
.router-link-exact-active.router-link-active {
    color: greenyellow;
    border-bottom: 2px solid greenyellow;
}

main.js

// 新增内容
// 配置全局css
import '@/assets/css/global.css'

三.组件生命周期钩子

概念

一个组件从创建到销毁,整个过程中的特殊的时间节点回调的方法,称之为生命周期钩子

如:一个组件创建成功就会回调 created方法,内部数据要更新和更新完毕分别调用 beforeupdate方法与updated方法

案例

<template>
    <div class="page-second">
        <nav></nav>
        <h1 @click="printtitle">{{ title }}</h1>
        <input type="text" v-model="title">
    </div>
</template>

<script>
    import nav from '@/components/nav'
    export default {
        name: "pagesecond",
        data() {
            return {
                title: 'page-second'
            }
        },
        methods: {
            printtitle() {
                console.log(this.title)
            }
        },
        components: {
            nav
        },
        beforecreate() {
            console.log('开始创建组件');
            console.log(this.title);
            console.log(this.printtitle);
            this.title = '呵呵';
        },
        created() {  // 重点
            console.log('组件创建成功');
            console.log(this.title);
            console.log(this.printtitle);
            // 请求后台数据,完成数据的更新
            this.title = '嘿嘿';
        },
        beforemount() {
            console.log('组件开始渲染');
        },
        mounted() {
            console.log('组件渲染成功');
            this.title = '嘻嘻';
        },
        beforeupdate() {
            console.log('数据开始更新');
        },
        updated() {
            console.log('数据更新完毕');
        },
        activated() {
            console.log('组件激活');
        },
        deactivated() {
            console.log('组件停用');
        },
        destroyed() {
            console.log('组件销毁成功');
        }
    }
</script>

<style scoped>
    .page-second {
        width: 100%;
        height: 800px;
        background: pink;
    }
    h1 {
        text-align: center;
    }
</style>

四.路由重定向

router.js

import vue from 'vue'
import router from 'vue-router'
import pagefirst from './views/pagefirst'
import pagesecond from './views/pagesecond'
import course from './views/course'

vue.use(router);

export default new router({
    mode: 'history',
    base: process.env.base_url,
    routes: [
        {
            path: '/page-first',
            name: 'page-first',
            component: pagefirst
        },
        {  // 重定向路由的两种方式
            path: '/page/first',
            // redirect: {'name': 'page-first'},
            redirect: '/page-first'
        },
    ]
})

五.页面组件小组件综合案例

目录结构

|vue-proj
|   |src
|   |   |components  小组件
|   |   |   |coursecard.vue
|   |   |views  页面组件
|   |   |   |course.vue
|   |   |router.js

coursecard.vue

<template>
    <div class="course-card">
        <div class="left" :style="{background: card.bgcolor}"></div>
        <div class="right">{{ card.title }}</div>
    </div>
</template>

<script>
    export default {
        name: "coursecard",
        props: ['card']
    }
</script>

<style scoped>
    .course-card {
        margin: 10px 0 10px;
    }
    .course-card div {
        float: left;
    }
    .course-card:after {
        content: '';
        display: block;
        clear: both;
    }
    .left {
        width: 50%;
        height: 120px;
        background-color: blue;
    }
    .right {
        width: 50%;
        height: 120px;
        background-color: tan;
        font: bold 30px/120px 'stsong';
        text-align: center;
    }
</style>

coursecard.vue

<template>
    <div class="course">
        <nav></nav>
        <h1>课程主页</h1>
        <coursecard :card="card" v-for="card in card_list" :key="card"></coursecard>
    </div>
</template>

<script>
    import nav from '@/components/nav'
    import coursecard from '@/components/coursecard'
    export default {
        name: "course",
        data() {
            return {
                card_list: []
            }
        },
        components: {
            nav,
            coursecard
        },
        created() {
            let cards = [
                {
                    id: 1,
                    bgcolor: 'red',
                    title: 'python基础'
                },
                {
                    id: 3,
                    bgcolor: 'blue',
                    title: 'django入土'
                },
                {
                    id: 8,
                    bgcolor: 'yellow',
                    title: 'mysql删库高级'
                },
            ];
            this.card_list = cards;
        }
    }
</script>

<style scoped>
    h1 {
        text-align: center;
        background-color: brown;
    }
</style>

router.js

import vue from 'vue'
import router from 'vue-router'
import pagefirst from './views/pagefirst'
import pagesecond from './views/pagesecond'
import course from './views/course'

vue.use(router);

export default new router({
    mode: 'history',
    base: process.env.base_url,
    routes: [
        {
            path: '/page-first',
            name: 'page-first',
            component: pagefirst
        },
        {
            path: '/page/first',
            // redirect: {'name': 'page-first'},
            redirect: '/page-first'
        },
        {
            path: '/page-second',
            name: 'page-second',
            component: pagesecond
        },
        {
            path: '/course',
            name: 'course',
            component: course
        },
    ]
})