Vite + Tailwind + Vue Starter

如果你正在寻找一个现代的、轻量级的、基于Vue的Starter，那么Vite+Tailwind+Vue Starter是一个不错的选择。

简介

Vite是一个快速开发的构建工具，它支持原生ESM（ES6模块）。使用Vite开发Vue应用，可以拥有极快的启动时间和热重载。

Tailwind是一个实用的CSS框架，它可以允许你利用预定义的CSS类来快速构建完美的用户界面。

Vue是一个流行的JavaScript框架，它可以轻松构建交互式用户界面。

如何使用

安装

你可以使用 npm 或 yarn 来安装依赖项：

# npm
npm install

# yarn
yarn

运行

你可以使用 npm run dev 或 yarn dev 启动本地开发服务器

# npm
npm run dev

# yarn
yarn dev

构建

你可以使用 npm run build 或 yarn build 来构建生产环境的代码。

# npm
npm run build

# yarn
yarn build

项目结构

├── public
│   ├── index.html
│   └── ...
├── src
│   ├── App.vue
│   ├── main.js
│   └── ...
├── tailwind.config.js
├── package.json
├── vite.config.js
└── ...

• public：静态资源目录
• src：Vue代码目录
• tailwind.config.js：Tailwind CSS的配置文件
• package.json：项目依赖项和脚本
• vite.config.js：Vite的配置文件

使用说明

Vue

在src目录中添加/修改Vue组件。

Tailwind CSS

在应用程序中使用Tailwind CSS的方式是通过在模板中添加相关的CSS类名。在这个Starter中，你可以在tailwind.config.js中配置你喜欢的CSS类。

例如，如果你打算使用bg-red-500这个颜色类，你就可以在tailwind.config.js中这样配置：

// tailwind.config.js

module.exports = {
  theme: {
    extend: {
      colors: {
        red: {
          500: '#FF0000',
        },
      },
    },
  },
  variants: {},
  plugins: [],
}

然后，在你的Vue组件的模板中，你就可以这样写：

<!-- MyComponent.vue -->

<template>
  <div class="bg-red-500"></div>
</template>

自定义Vite配置

如果你需要对Vite进行自定义配置，你可以在根目录下编写vite.config.js文件，并完全控制构建流程。

// vite.config.js

const path = require('path')

module.exports = {
  alias: {
    '@': path.resolve(__dirname, 'src')
  }
}

结论

Vite+Tailwind+Vue Starter是一个快速构建现代Vue项目的不错的选择。欢迎使用！