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教程