tailwindcss+vue3+vite+preline项目搭建

news2024/10/7 4:24:47

最近原子化样式比较火，用了一下确实还不错，也确实是用一些标准的样式能够使网页看起来比较统一，而且能够极大的减轻起名字的压力，有利有弊，就不一一细说了。
之前开发都是习惯于使用vite+vue3来开发的，此次搭建项目也是以这个为例子。
tailwindcss搭建的流程，参考https://tailwindcss.com/docs/guides/vite#vue

创建项目

npm create vite@latest my-project -- --template vue
cd my-project

安装tailwindcss及一些插件

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

修改一下tailwind.config.js配置文件

export default {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

把tailwind指令添加到主样式文件中

一般来说样式文件在 ./src/style.css 中，直接添加到结尾

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

启动～

npm run dev

修改一下试试

修改App.vue的文件内容

<template>
  <h1 class="text-3xl font-bold underline">Tailwind CSS + Vue 3 + Vite</h1>
  <h1 class="text-2xl font-bold underline">Hello world!</h1>
</template>

显示效果如下：
请添加图片描述

增加preline UI样式库

发现了一个比较好用的样式库，感觉花里胡哨的用多了会审美疲劳，用这个样式库感觉就还能够看的持久一些。
样式库地址https://preline.co/index.html

安装方式

npm i preline

修改tailwind.config.js

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "node_modules/preline/dist/*.js",
  ],
  plugins: [
      require('preline/plugin'),
  ],
}

修改index.html文件

把样式表引入放在body下边

<script src="./node_modules/preline/dist/preline.js"></script>

齐活，在app.vue中加入一个新的东西看看效果。

<template>
  <h1 class="text-3xl font-bold underline">Tailwind CSS + Vue 3 + Vite</h1>
  <h1 class="text-2xl font-bold underline">Hello world!</h1>

  <div class="max-w-xs bg-white border border-gray-200 rounded-xl shadow-lg dark:bg-gray-800 dark:border-gray-700" role="alert">
    <div class="flex p-4">
      <div class="flex-shrink-0">
        <svg class="flex-shrink-0 size-4 text-blue-500 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"></path>
        </svg>
      </div>
      <div class="ms-3">
        <p class="text-sm text-gray-700 dark:text-gray-400">
          This is a normal message.
        </p>
      </div>
    </div>
  </div>
</template>