vue3集成tailwindcss

1.创建vue3工程

pnpm create vue@latest

2.安装tailwindcss依赖

pnpm install -D tailwindcss@latest postcss@latest autoprefixer@latest

3.初始化tailwind配置文件

pnpm tailwindcss init -p

vue3 实现掘金博客文章页

1.开始

1.安装必要插件

pnpm install prismjs marked vite-plugin-prismjs front-matter @types/marked @types/prismjs

• prismjs:

  • 是一个轻量级、可扩展的语法代码高亮插件
  • 官网：棱镜 (prismjs.com)

• marked:

  • 是一个 JavaScript 编写的全功能 Markdown 解析和编译器。 marked 的目的是快速的编译超大块的 Markdown 文本而不必担心结果会出乎意料或者花费很长时间
  • 官网：标记的文档 (marked.js.org)

• vite-plugin-prismjs:

  • 快速使用 prismjs 的 vite 插件
  • https://www.npmjs.com/package/vite-plugin-prismjs

• front-matter：

  • 用于解析 front-matter 的插件
  • https://www.npmjs.com/package/front-matter

• @types/prismjs:prismjs 的 typeScirpt 类型支持

• @types/marked:marked 的 typeScript 类型支持

  2.配置 vite.config.js

vue3 学习笔记

1.bem 架构

bem 架构即Block（块层）,element（元素层），modifier（修饰符层），是由 Yandex 团队提出的一种 css 命名方法.

.block-name__element-name--modifier-name--modifier-value {}

遵循以下原则：

• 使用__两个下划线将块元素与名称分开
• 使用--两个破折号分隔元素名称及修饰符
• 一切样式都是一个类，不能嵌套