Components and styles

Single file Vue3 components on the structure and Vue2 no distinction, are made by the template | script | style of three parts, the following is a common single file component structure.

<template></template>

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

<style>
</style>
Copy the code

But to facilitate project development, we need the components to have the following capabilities.

Chapter Content:

  1. Add support for Less
  2. JSX components
  3. CSS Module

Add support for Less

Supporting less in Vite is as simple as installing the following dependencies

# .less
npm install -D less
Copy the code

Refer to the documentation for additional CSS precompilers.

Here to test the effect, create a new button component 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>
Copy the code

Import to home page

src/views/index.vue

<template>
    <div>
	<h2>Home page - by CTcode</h2>
	<CtButton>Traditional button</CtButton>
    </div>
</template>

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

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

Now you can open the page to see the effect, whether there is a red button under the home page ~!

JSX components

Vue has always supported the use of JSX as a template. It just so happens that Vue3 has added a setup function to make it easier for us to integrate logic. With the help of the hooks of React, it seems that everything is further functionalization. So we should also learn to use JSX to implement functional components, at least in development options.

Install JSX dependencies

npm install @vitejs/plugin-vue-jsx -D
Copy the code

Modifying a Configuration File

vite.config.js

import { resolve } from 'path';
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// Import the JSX plug-in
import vueJsx from '@vitejs/plugin-vue-jsx'

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

Create a new JSX button component 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) }>} {this.$slot.default ()} {this.$slot.default ()}</button>}})export default CtButtonJsx;
Copy the code

Import JSX components to the home page

src/views/index.vue

<template>
    <div>
	<h2>Home page - by CTcode</h2>
	<CtButton>Traditional button</CtButton>
	<CtButtonJsx>JSX button</CtButtonJsx>
    </div>
</template>

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

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

You can open the home page to see the effect, but this time the JSX button should be no style, continue to add ~!

CSS Module

CSS Modules and single-file components have similar style scoped effects in order to keep component styles unique and not affect each other, but in the JSX component we just added scoped is no longer supported, so CSS Modules can be used to keep styles unique.

Vite already supports CSS modules, but there is a rule that the style file name must end in XX.module. CSS, or xx.module.less.

New style file SRC/componets/styles/ctbutton module. The 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%)}}Copy the code

Import style to the JSX components in SRC/components/CtButtonJsx JSX

import { defineComponent } from 'vue'
// 1. Import styles
import styles from "./styles/ctButton.module.less"

const CtButtonJsx = defineComponent({
    // omit code...

    
    render() {
        const { handleClick } = this;
        // 2. Add style class={styles.primary}
        return <button class={styles.primary} onClick={ handleClick.bind(this)} >// omit code... } }) export default CtButtonJsx;Copy the code

Latest components structure directory:

- components
	- styles
		ctbutton.module.less
	- CtButton.vue
	- CtButtonJsx.jsx
Copy the code

For final display, please click the JSX button to try it out.

View the code:

Git clone (downloaded direct checkout https://github.com/chitucode/ctcode-vue3.git git checkout v4.0Copy the code

Wechat account of friends

Add big brother wechat and thousands of peers to enhance technical communication life

hsian_

The last

The code word is not easy and your clicks and likes and comments are my best motivation