hi，我是温馨，一名PHPer

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

第一步：安装vue3

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important"># 1、初始化并指定模板</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(232, 191, 106) !important">npm</span> init vite@latest vue3demo_1 <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">--</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">--template</span> vue</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important"># 安装依赖</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(232, 191, 106) !important">cd</span> vue3demo_1</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(232, 191, 106) !important">npm</span> install</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(232, 191, 106) !important">npm</span> run dev</span>

第二步：安装 Tailwind CSS

安装 Tailwind CSS

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important"># 安装 Twailwind CSS</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(232, 191, 106) !important">npm</span> install <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">-D</span> tailwindcss@latest postcss@latest autoprefixer@latest</span>

创建配置文件

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important"># 创建配置文件</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">npx</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">tailwindcss</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">init</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">-</span><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">p</span></span>

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

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// tailwind.config.cjs</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">/** @type {import('tailwindcss').Config} */</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">module</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">exports</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">  <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">content</span>: [],</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">  <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">theme</span>: {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">extend</span>: {},</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">  },</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">  <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">plugins</span>: [],</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">}</span>

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// postcss.config.cjs</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">module</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">exports</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">  <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">plugins</span>: {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">tailwindcss</span>: {},</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">autoprefixer</span>: {},</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">  },</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">}</span>

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

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

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">module</span>.<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">exports</span> <span style="box-sizing: border-box;color: rgb(86, 182, 194) !important">=</span> {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">purge</span>: [<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'./index.html'</span>, <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'./src/**/*.{vue,js,ts}'</span>],</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">darkMode</span>: <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">false</span>, </span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">theme</span>: {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">     <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">extend</span>: {},</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">   },</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">variants</span>: {</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">     <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">extend</span>: {},</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">   },</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">   <span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">plugins</span>: [],</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"> }</span>

第四步：项目中导入 Tailwind CSS

创建 Tailwind CSS 样式文件

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

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">@tailwind</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">base</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">@tailwind</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">components</span>;</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">@tailwind</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">utilities</span>;</span>

src/main.js 中引入 index.css

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(98, 151, 85) !important">// src/main.js</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">import</span> { <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">createApp</span> } <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">from</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'vue'</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">import</span> <span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">App</span> <span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">from</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'./App.vue'</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(198, 120, 221) !important">import</span> <span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'./index.css'</span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">createApp</span>(<span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">App</span>).<span style="box-sizing: border-box;color: rgb(97, 175, 239) !important">mount</span>(<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">'#app'</span>)</span>

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

位置：src/components/Demo.vue

<span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">template</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">  <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">class</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"relative bg-white overflow-hidden"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">class</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"max-w-7xl mx-auto"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">      <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">class</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"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"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">main</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">class</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"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"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">          <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">class</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"sm:text-center lg:text-left"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">h1</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">class</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">              <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">span</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">class</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"block text-indigo-600 xl:inline"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span>Laravel9 <span style="box-sizing: border-box;color: rgb(255, 255, 255) !important;background-color: rgb(236, 95, 103) !important">&</span> Vue3 <span style="box-sizing: border-box;color: rgb(255, 255, 255) !important;background-color: rgb(236, 95, 103) !important">&</span> Vite<span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">span</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">h1</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">p</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">class</span>=<span style="box-sizing: border-box;color: rgb(152, 195, 121) !important">"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"</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">              Larave9 <span style="box-sizing: border-box;color: rgb(255, 255, 255) !important;background-color: rgb(236, 95, 103) !important">&</span> Vue3 Api demo 演示</span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">            <span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">p</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">          <span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">        <span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">main</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">      <span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px">  <span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">div</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">template</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">script</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">setup</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">script</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span style="box-sizing: border-box"></span></span><br></br><span style="box-sizing: border-box;color: rgb(171, 178, 191);padding-right: 0.1px"><span class="cm-tag cm-bracket" style="box-sizing: border-box"><</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">style</span> <span style="box-sizing: border-box;color: rgb(209, 154, 102) !important">scoped</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></</span><span style="box-sizing: border-box;color: rgb(224, 108, 117) !important">style</span><span class="cm-tag cm-bracket" style="box-sizing: border-box">></span></span>

第六步：run 一下，快来体验吧

<span style="color: rgb(255, 192, 0);">npm run dev</span><br></br>