基于 Laravel + Vue 构建 API 驱动的 LBS 应用系列教程(十一) —— 通过 Laravel Mix 将 SASS 编译...

栏目: PHP · 发布时间: 6年前

内容简介:在由于我们使用 Foundation 组件来实现快速格栅功能,包含应用所有 Sass 变量的现在我们拥有了一些可以在组件中使用的颜色了!如果你想要使用为非设计师提供的很酷的颜色工具,可以考虑

为单页面应用配置 JavaScript 和 Sass 这篇教程中,我们已经为所有 Sass 资源构建了目录结构,我们可以将 Vue 组件的 Sass 资源放到这些目录中。

第一步:创建变量文件

由于我们使用 Foundation 组件来实现快速格栅功能,包含应用所有 Sass 变量的 _variables.scss 将成为最重要的文件,我们将这个文件放到 resources/assets/sass/abstracts 目录下,并添加一些默认的颜色:

$white: #FFFFFF;
$black: #111111;

$primary-color: #7F6D50;
$secondary-color: #FFBE54;
$highlight-color: #FFDBA0;
$dark-color: #7F5F2A;
$dull-color: #CCAF80;

现在我们拥有了一些可以在组件中使用的颜色了!如果你想要使用为非设计师提供的很酷的颜色工具,可以考虑 Adobe Color CC ,当然类似的 工具 还有很多。

第二步:添加变量文件到 app.scss

我们需要将新创建的变量文件导入 resources/assets/sass/app.scss 文件以便在构建应用时将其编译到 CSS 里面,我们可以在 app.scss 文件中添加如下这行代码来完成导入:

@import 'abstracts/variables';

此时, app.scss 文件完整内容如下:

@charset "UTF-8";

/* ==========================================================================
    Builds our style structure
        https://sass-guidelin.es/#the-7-1-pattern
   ========================================================================== */
/**
 * Table of Contents:
 *
 *  1. Abstracts
 */
@import 'abstracts/variables';

@import 'node_modules/foundation-sites/assets/foundation.scss';

第三步:为 webpack.mix.js 添加别名

现在我们需要将 Laravel Mix、Sass 和 Vue 组件关联起来以便可以使用,大体上要做的就是定义一个包含指向 Sass 目录路径的别名或变量,这样就可以在 Vue 组件中引入对应的 Sass 资源。绝对多数时候,我们要做的就是引入变量文件,因为所有其他样式都定义在 Vue 组件自身里面。要添加别名,在 webpack.mix.js 的 webpackConfig 对象中添加代码如下:

mix.js('resources/assets/js/app.js', 'public/js')
    .webpackConfig({
        module: {
            rules: [
                {
                    test: /\.jsx?$/,
                    exclude: /node_modules(?!\/foundation-sites)|bower_components/,
                    use: [
                        {
                            loader: 'babel-loader',
                            options: Config.babel()
                        }
                    ]
                }
            ]
        },
        resolve: {
            alias: {
                '@': path.resolve('resources/assets/sass')
            }
        }
    })
    .sass('resources/assets/sass/app.scss', 'public/css');

当我们构建应用时,会将 @ 解析为 resources/assets/sass 路径别名。 module 部分配置用于构建 Foundation。

第四步:添加 Navigation.vue 组件

做好以上配置之后,接下来是时候添加第一个 Vue 组件到 Roast 应用了。

首先创建 resources/assets/js/components/global/Navigation.vue 文件(同时创建 global 目录),在 Navigation.vue 文件中,添加如下代码:

<style>

</style>
<template>
    <nav class="top-navigation">

    </nav>
</template>
<script>
    export default {

    }
</script>

然后将告诉 Vue 我们要在 <style> 中使用 SCSS 而不是 CSS,只需在 <style> 标签中添加 lang="scss" 属性即可。

接下来,需要导入 SCSS 变量,由于我们之前已经定义过将 @ 解析为 SCSS 资源根目录,所以可以在 <style> 标签里面添加如下导入代码:

@import '~@/abstracts/_variables.scss';

这样,就可以将 SCSS 变量导入到 Navigation 组件了。现在 Navigation.vue 组件代码如下:

<style lang="scss">
    @import '~@/abstracts/_variables.scss';
</style>
<template>
    <nav class="top-navigation">

    </nav>
</template>
<script>
    export default {

    }
</script>

这个组件会用作应用的导航条,注意到我们还使用了 <nav> 标签,以遵循 HTML 5 语义。

下面我们继续填充 Navigation.vue 组件的样式代码和页面元素,使其具备完整的功能:

<style lang="scss">
    @import '~@/abstracts/_variables.scss';

    nav.top-navigation{
        background-color: $white;
        height: 50px;
        border-bottom: 2px solid $dark-color;

        span.logo{
            border-right: 1px solid $dark-color;
            display: block;
            float: left;
            height: 50px;
            line-height: 50px;
            padding: 0px 20px 0px 20px;
            font-family: 'Josefin Sans', sans-serif;
            font-weight: bold;
            color: $dark-color;

            &:hover{
                color: white;
                background-color: $dark-color;
            }
        }

        ul.links{
            display: block;
            float: left;

            li{
                display: inline-block;
                list-style-type: none;
                line-height: 50px;

                a{
                    font-family: 'Lato', sans-serif;
                    font-weight: bold;
                    color: $black;

                    &:hover{
                        color: $dark-color;
                    }
                }
            }
        }

        div.right{
            float: right;

            img.avatar{
                width: 40px;
                height: 40px;
                border-radius: 40px;
                margin-top: 5px;
                margin-right: 10px;
            }
        }

    }
</style>

<template>
    <nav class="top-navigation">

        <router-link :to="{ name: 'home'}">
            <span class="logo">Roast</span>
        </router-link>

        <ul class="links">
            <li>
                <router-link :to="{ name: 'cafes' }">
                    Cafes
                </router-link>
            </li>
        </ul>

        <div class="right">
            <img class="avatar" :src="user.avatar" v-show="userLoadStatus == 2"/>
        </div>

    </nav>
</template>

<script>
    export default {
        // 定义组件的计算属性
        computed: {
            // 从 Vuex 中获取用户加载状态
            userLoadStatus(){
                return this.$store.getters.getUserLoadStatus;
            },

            // 从 Vuex 中获取用户信息
            user(){
                return this.$store.getters.getUser;
            }
        }
    }
</script>

你可以在这个文件中看到 <router-link> 标签和一些 Vuex 计算属性,我们将在下一篇教程讨论这些东西。

至此我们已经在应用中添加了第一个 Vue 组件,该组件可以通过 Laravel Mix 将 Sass 资源编译进来。

项目源码位于 Github 上: nonfu/roastapp


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Design and Analysis of Distributed Algorithms (Wiley Series on P

Design and Analysis of Distributed Algorithms (Wiley Series on P

Nicola Santoro / Wiley-Interscience / 2006-10-27 / USD 140.95

This text is based on a simple and fully reactive computational model that allows for intuitive comprehension and logical designs. The principles and techniques presented can be applied to any distrib......一起来看看 《Design and Analysis of Distributed Algorithms (Wiley Series on P》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

在线进制转换器
在线进制转换器

各进制数互转换器

MD5 加密
MD5 加密

MD5 加密工具