您现在的位置是:自如初>Vue.jsVue.js

Vue3 & Vite 中如何使用 Tailwind CSS 之 Laravel9前后端分离演示案例(一)

温新 2022-09-12 00:57:55 Vue.js 439人已围观

简介目标:本篇文章将结合 Laravel9,passport,Vue3,Vite,Tailwind CSS 做一个前后后分离的演示案例。本篇文章属于前置篇,为后续的两篇文章做一个准备。

hi,我是温馨,一名PHPer

目标:本篇文章将结合 Laravel9,passport,Vue3,Vite,Tailwind CSS 做一个前后后分离的演示案例。本篇文章属于前置篇,为后续的两篇文章做一个准备。

第一步:安装vue3

# 1、初始化并指定模板
npm init vite@latest vue3demo_1 -- --template vue

# 安装依赖
cd vue3demo_1
npm install
npm run dev

第二步:安装 Tailwind CSS

安装 Tailwind CSS

# 安装 Twailwind CSS
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

创建配置文件

# 创建配置文件
npx tailwindcss init -p

该命令执行完成后,会在项目根目录生成 tailwind.config.cjspostcss.config.cjs 两个配置文件,内容如下:

// tailwind.config.cjs
/** @type {import('tailwindcss').Config} */
module.exports = {
 content: [],
 theme: {
   extend: {},
 },
 plugins: [],
}
// postcss.config.cjs

module.exports = {
 plugins: {
   tailwindcss: {},
   autoprefixer: {},
 },
}

安装并配置完成后,后续运行 run run devtailwind css 后自动编译,即完成即可使用。

第三步:修改tailwind.config.cjs配置文件

 module.exports = {
  purge: ['./index.html', './src/**/*.{vue,js,ts}'],
  darkMode: false,
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

第四步:项目中导入 Tailwind CSS

创建 Tailwind CSS 样式文件

文件位置:vue3demo_1/src/index.css

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

src/main.js 中引入 index.css

// src/main.js

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

createApp(App).mount('#app')

第五步:创建一个使用 Tailwind CSS 的组件

位置:src/components/Demo.vue

<template>
 <div class="relative bg-white overflow-hidden">
   <div class="max-w-7xl mx-auto">
     <div class="relative z-10 pb-8 bg-white sm:pb-16 md:pb-20 lg:max-w-2xl lg:w-full lg:pb-28 xl:pb-32">
       <main class="mt-10 mx-auto max-w-7xl px-4 sm:mt-12 sm:px-6 md:mt-16 lg:mt-20 lg:px-8 xl:mt-28">
         <div class="sm:text-center lg:text-left">
           <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
             <span class="block text-indigo-600 xl:inline">Laravel9 & Vue3 & Vite</span>
           </h1>
           <p class="mt-3 text-base text-gray-500 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
             Larave9 & Vue3 Api demo 演示
           </p>
         </div>
       </main>
     </div>
   </div>
 </div>
</template>

<script setup></script>

<style scoped></style>

第六步:run 一下,快来体验吧

npm run dev

很赞哦!(2)

文章评论

登录 注册

自如初--时间轴

QQ登录

站名:自如初

独白:向前走!向前走!

邮箱:xyhcx@foxmail.com

站点信息