构建vue3项目以及bem架构

最新推荐文章于 2026-01-05 20:42:35 发布

原创最新推荐文章于 2026-01-05 20:42:35 发布 · 341 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript

vue3学习专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了如何使用Vite初始化Vue3项目，配置全局scss，以及应用BEM架构进行组件化开发，包括`vite.config.ts`配置和Layout组件的结构与样式编写。

构建vue3+vite项目

（1）使用vite初始化一个项目

npm init vite@latest

（2）构建cli项目

vue create <project>

bem架构

src下新建文件bem.scss

$namespace: "xc" !default;
$block-sel: "-" !default;
$elem-sel: "__" !default;
$mod-sel: "--" !default;


//模板：xc-block
@mixin b($block) {
  $B: #{$namespace + $block-sel + $block};
  .#{$B} {
    @content
  }
};

// 模板：xc-block__inner
@mixin e($el) {
  $selector:&;
  @at-root {
    #{$selector + $elem-sel + $el} {
      @content
    }
  }
};

// 模板：xc-blook--primary
@mixin m($m) {
  $selector:&;
  @at-root {
    #{$selector + $mod-sel + $m} {
      @content
    }
  }
};

vite.config.ts全局配置

<div class="xc-test">
    测试
    <p class="xc-test-inner">内容内容</p>
</div>

<style lang="scss">
@include b(test) {
  color: red;
  @include e(inner) {
    color: yellow;
  }
}
</style>

使用@include报红，vscode设置css配置

Layout布局

src下新建Layout文件

Layout/index.vue

<template>
 <div class="xc-box">
    <div><Menu></Menu></div>
    <div class="xc-box__right">
      <Header></Header>
      <Content></Content>
    </div>
 </div>
</template>

<script lang='ts' setup>
import Menu from "./Menu/index.vue";
import Content from "./Content/index.vue";
import Header from "./Header/index.vue";
</script>

<style scoped lang='scss'>
@include b(box) {
  display: flex;
  height: 100%;
  @include e(right) {
    flex: 1;
    display: flex;
    flex-direction: column;
  }
}
</style>