0
点赞
收藏
分享

微信扫一扫

C语言数据结构(排序算法总结)

清冷的蓝天天 2024-06-10 阅读 22
css前端

创建vite项目

执行命令:

npm create vite

在这里插入图片描述

启动项目

npm install -g pnpm 
pnpm i
pnpm dev

在这里插入图片描述

浏览器访问

http://localhost:5174/

在这里插入图片描述

整合Tailwindcss

安装依赖

pnpm install -D tailwindcss postcss autoprefixer

在这里插入图片描述

初始化配置文件

npx tailwindcss init

在这里插入图片描述

用webstorm打开项目

在这里插入图片描述

webstorm配置启动

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

webstorm启动项目

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

postcss.config.js

export default {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
    }
}

tailwind.config.js

/** @type {import('tailwindcss').Config} */
export default {
    content: ["./src/**/*.{html,js,vue}"],
    theme: {
        extend: {},
    },
    plugins: [],
}

src/style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

第一个案例

src/App.vue

<template>
  <div>
    <h1 class="text-3xl font-bold underline bg-indigo-500">你好Vue3</h1>
  </div>
</template>

效果预览

在这里插入图片描述

举报

相关推荐

0 条评论