Vue 3模板定制:Vite, Pinia, Vue Router与Tailwind CSS的完美融合

发表时间: 2022-08-30 22:01

不久前,我意识到我正在用一些重复使用的后台基础模板,浪费了我一些摸鱼时间,我突然想到--为什么不把这些可重复使用的部分重新利用起来,把它们简单地堆在一个模板里呢?

技术栈

这个后台模板中,用到了如下的框架或库:

  • Vite
  • Pinia
  • Vue Router
  • Tailwind CSS
  • Vite SVG loader

前提

开始之前,首先要安装 Node.js,这个自行百度解决。

快速入门 - Vue, Router & Store

我们先从初始化模板开始:

npm init vue@latest

接着输入项目名称 vue3-boilerplate,然后在功能提示中选择安装 PiniaVue Router:

 Project name: vue3-boilerplate... Add Vue Router for Single Page Application development? Yes Add Pinia for state management? Yes

根据提示,选择所需功能后,执行如下命令:

cd vue3-boilerplatenpm installnpm run dev

运行后在本地开发环境中查看 http://127.0.0.1:5173 此示例页面:


添加 Tailwind CSS

有了基础后,现在我们需要一些样式。按照这个指南,我们安装Tailwind CSS,然后初始化配置文件。

npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p

安装完后,在根目录中,会有一个 tailwind.config.js文件,填充内容如下:

/** @type {import('tailwindcss').Config} */module.exports = {  content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],  theme: {    extend: {},  },  plugins: [],};

接下来,我们需要加载 @tailwind 指令,所以在 /src/assets 文件夹中创建tailwind.css,其中包含以下内容(指令):

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

然后在 /src/assets/main.css 顶部导入它:

@import "./tailwind.css";

由于我们已经在 /src/main.js 中导入了 /src/assets/main.css 文件,所以,现在就可以在项目中使用 Tailwind 的实用类了。

我们在 /src/views/AboutView.vue 中的 h1 标签添加一些实用类来测试一下:

<template>  <div class="about">    <h1 class="text-xl font-medium text-white">This is an about page</h1>  </div></template>

我们也可以在下面单独定义我们的CSS属性。要做到这一点,需要安装这个PostCSS插件 - postcss-import

npm install -D postcss-import

接着,在实用类中使用 @apply:

<style lang="scss">.about {  @apply lg:min-h-screen lg:flex lg:items-center;  h1 {    @apply text-xl font-medium text-white;  }}</style>

添加 SVG loader (可选)

我比较喜欢SVG,恰好,我们新的模板可以很容易地导入SVG图像,但有一个问题--我们必须把它作为组件使用,这意味着需要手动在模板标签中添加SVG代码,然后像这样导入。

幸运的是,有这样一个 vit-svg-loader 包,它基本上可以让我们在Vue模板中简单地导入 .svg 文件作为组件。

首先,安装它:

npm install vite-svg-loader --save-dev

vite.config.js 配置文件中添加这个插件:

import svgLoader from 'vite-svg-loader'export default defineConfig({   plugins: [vue(), svgLoader()],   ...})

最后,为了测试,把/src/assets/logo.svg 中的 Vue logo 代码改成这个,然后保存:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2454.32 2457.41"><defs><linearGradient id="a" x1="285.11" y1="1790.44" x2="285.7" y2="1789.74" gradientTransform="matrix(2454.32, 0, 0, -2187.24, -699180.9, 3916163.49)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#41d1ff"/><stop offset="1" stop-color="#bd34fe"/></linearGradient><linearGradient id="b" x1="285.22" y1="1790.33" x2="285.29" y2="1789.46" gradientTransform="matrix(1125.42, 0, 0, -2051.66, -319596.68, 3673197.31)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#ffea83"/><stop offset="0.08" stop-color="#ffdd35"/><stop offset="1" stop-color="#ffa800"/></linearGradient></defs><path d="M2464.14,381.6,1311.22,2443.21c-23.8,42.57-85,42.82-109.12.46L26.33,381.79C0,335.63,39.47,279.72,91.78,289.08L1245.93,495.37a62.88,62.88,0,0,0,22.27,0l1130-206C2450.35,279.87,2490,335.35,2464.14,381.6Z" transform="translate(-17.94 -17.87)" style="fill:url(#a)"/><path d="M1795.71,18.48,942.53,185.66a31.33,31.33,0,0,0-25.25,28.9L864.8,1101a31.33,31.33,0,0,0,29.41,33.14,31.77,31.77,0,0,0,8.91-.75l237.54-54.82a31.32,31.32,0,0,1,37.73,36.79l-70.57,345.59a31.33,31.33,0,0,0,39.8,36.24l146.72-44.57a31.34,31.34,0,0,1,39.79,36.32L1222,2031.73c-7,33.95,38.14,52.47,57,23.36l12.59-19.44L1986.77,648.19c11.65-23.23-8.44-49.72-33.94-44.79l-244.52,47.18a31.33,31.33,0,0,1-36-39.44L1831.86,57.91a31.34,31.34,0,0,0-36.14-39.43Z" transform="translate(-17.94 -17.87)" style="fill:url(#b)"/></svg>

然后在 /src/App.vue 文件中,把它作为SVG组件导入,并用<img class="logo" />替换它。

<script setup>   ...   import LogoSVG from './assets/logo.svg?component'</script><template>   ...   <LogoSVG alt="Vite logo" class="logo" />   ...</template>

至此,一个简单的模板框架就搭建完啦。

下一步是什么?

你可以将它,发布到 npm 上,然后可以类似的命令安装:

npm i @richardecom/vue3-boilerplate

下面还有份清单,你可以选择性添加进去:

  • NuxtJS
  • Vue Meta
  • VeeValidate
  • Vue Toastification