VUE3 项目开发实战入门系列 （4.-组件和样式）

组件和样式

Vue3的单文件组件在结构上和Vue2并无区别，都是由template | script | style 3个部分组成，以下就是一个普通的单文件组件结构。

<template></template>

<script>
export default {};
</script>

<style>
</style>

但是为了方便项目开发，我们需要组件具备以下功能。

章节内容：

1. 添加支持Less
2. JSX组件
3. CSS Module

添加支持Less

在Vite中支持less非常简单，只需安装以下依赖即可

# .less
npm install -D less

如果需要其他的css预编译器可以参考文档。

下面来测试下效果，新建一个按钮组件 src/components/CtButton.vue。

<template>
    <button class="primary">
        <slot/>
    </button>
</template>

<script>
export default {};
</script>

<style scoped lang="less">
    .primary {
        background: #ff0000;
        color: #fff;
        border: none;
        border-radius: 4px;
        padding: 5px 15px;
        outline: none;
        cursor: pointer;
        margin: 5px;

        &:hover {
            background: darken(#ff0000, 5%)
        }
    }
</style>

导入到首页

src/views/index.vue

<template>
    <div>
	<h2>首页 - by ctcode</h2>
	<CtButton>传统按钮</CtButton>
    </div>
</template>

<script>
import CtButton from "@/components/CtButton.vue";

export default {
    components: {
	CtButton,
    },
};
</script>

现在可以打开页面查看效果了，首页下是否有一个红色的按钮~！

JSX组件

​ 关于JSX组件如果是使用过react的同学就很熟悉了，Vue其实是一直都支持使用JSX作为模板的，刚好Vue3增加了setup函数，可以方便我们对逻辑进行归纳整合，再加上react的hooks在前，仿佛一切都往函数化推进，所以我们也应该掌握使用JSX来实现函数组件，至少在开发上可以多一些选择。

安装JSX依赖

npm install @vitejs/plugin-vue-jsx -D

修改配置文件

vite.config.js

import { resolve } from 'path';
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 导入jsx插件
import vueJsx from '@vitejs/plugin-vue-jsx'

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		vue(),
		vueJsx({})
	],
	resolve: {
		alias: {
			'@': resolve(__dirname, 'src'),
		}
	}
})

新建一个JSX按钮组件 src/components/CtButtonJsx.jsx

import { defineComponent } from 'vue'

const CtButtonJsx = defineComponent({
    setup() {
        function handleClick(){
            alert("JSX button");
        }

        return {
            handleClick
        }
    },
    render() {
        const { handleClick } = this;
        return <button onClick={ handleClick.bind(this) }>
            {/* 插槽的jsx模板写法 */}
            { this.$slots.default() }
        </button>
    }
})

export default CtButtonJsx;

导入JSX组件到首页

src/views/index.vue

<template>
    <div>
	<h2>首页 - by ctcode</h2>
	<CtButton>传统按钮</CtButton>
	<CtButtonJsx>JSX按钮</CtButtonJsx>
    </div>
</template>

<script>
import CtButton from "@/components/CtButton.vue";
import CtButtonJsx from "@/components/CtButtonJsx";

export default {
    components: {
	CtButton,
        CtButtonJsx,
    },
};
</script>

可以打开首页页面查看效果啦，不过这时候的JSX按钮应该是没样式的，下面继续添加~！

CSS Module

​ css module和单文件组件中style的scoped效果差不多，都是为了保持组件样式唯一性不相互影响，但是在我们刚才添加的JSX组件中可不支持scoped了，所以可以使用css module来保持样式的唯一性。

​ vite本身已经支持css module，但是有一个规定，就是样式的文件名称必须是以xx.module.css结尾的，如果是less文件就是xx.module.less。

新建样式文件 src/componets/styles/ctbutton.module.less

.primary {
    background: #1890ff;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 5px 15px;
    outline: none;
    cursor: pointer;
    margin: 5px;

    &:hover {
        background: darken(#1890ff, 5%)
    }
}

导入样式到JSX组件中 src/components/CtButtonJsx.jsx

import { defineComponent } from 'vue'
// 1.导入样式
import styles from "./styles/ctButton.module.less"

const CtButtonJsx = defineComponent({
    // 省略代码...

    
    render() {
        const { handleClick } = this;
        // 2.添加样式class={styles.primary}
        return <button class={styles.primary} onClick={ handleClick.bind(this) } >
            // 省略代码...
    }
})

export default CtButtonJsx;

最新components结构目录：

- components
	- styles
		ctbutton.module.less
	- CtButton.vue
	- CtButtonJsx.jsx

最终效果展示，记得点击jsx按钮试试哦。

查看代码：

git clone https://github.com/chitucode/ctcode-vue3.git (已下载可直接checkout)
git checkout v4.0 

好友微信号

添加大佬微信 和上千同伴一起提升技术交流生活

hsian_

最后

码字不容易 你的点击关注点赞留言就是我最好的驱动力