如何使用Vite、TypeScript和Tailwind CSS设置Svelte

DebugUsery
1,034 阅读7分钟

如何使用Vite、TypeScript和Tailwind CSS设置Svelte

Svelte是一个JavaScript前端框架，用于构建反应式和交互式UI组件，就像React、Angular和Vue一样。

与其他框架不同的是，Svelte为浏览器提供了一个JavaScript运行时来使你的代码工作，它将你写的声明性代码转换为与本地浏览器API一起工作的命令性代码。

这就产生了高性能的应用程序，其代码库很小，允许你加入许多功能。

在本教程中，我们将建立一个投资组合应用程序。这个应用程序将帮助你学习如何在Svelte应用程序中使用Vite、TypeScript和Tailwind CSS。

前提条件

要想跟着学习，你需要。

  • TypeScript、Tailwind CSS和Svelte的基本知识。
  • 在你的电脑上安装[Node.js]。

用Vite和TypeScript设置应用程序

Vite是一个JavaScript开发服务器工具，使前端开发更容易。Vite通过本地ES模块分发你的应用程序源文件。

这让你可以快速启动或重新加载你的开发服务器。Vite会立即启动服务器，它采取不经常变化的依赖关系，并使用ES构建预先捆绑它们。

Vite使用基于路由的代码分割来计算哪些部分需要被加载。一个巨大的优势是，它不必每次都重新捆绑文件。

由于ES build是用Go编写的，它比基于JavaScript的捆绑器（如Webpack）要快。

Vite的一些主要特点包括。

  • 按需编译--Vite在浏览器要求时编译你的项目源文件。只有当前屏幕/页面上导入和需要的代码才会被编译。这使你的网页加载速度更快。因此，Vite适用于构建和服务大型项目。

  • 热模块替换--Vite捆绑器确保文件变化几乎立即反映在浏览器中。

  • 小熊模块解析--Vite检查你的软件包导入，重写它们，并执行模块解析，在你的项目依赖中找到正确的文件。

  • 高级配置选项 - Vite允许人们扩展项目的默认配置。例如，开发者可以扩展、使用和运行TypeScript。

TypeScript是JavaScript的超集，支持静态类型化。这意味着TypeScript包括所有可能的有效JavaScript功能，以及一些额外的功能。

TypeScript被编译成常规的JavaScript，这样浏览器就能理解它。

TypeScript提供的一些主要功能是。

  • 它支持类型检查 - 这允许你在使用变量和函数时指定它们的类型。这使得你的代码具有可读性和描述性，特别是在建立一个大型项目时。

  • 它有静态类型 - 静态类型意味着很多基本错误可以被编译器捕获。这允许你在运行前纠正许多错误。

  • TypeScript支持类 - 这意味着你可以使用面向对象的编程原则，如封装、访问修改器和继承。

  • 它具有ES6语法。

要设置一个支持Vite和TypeScript的Svelte应用程序，请创建一个项目文件夹，并在该文件夹内运行以下命令。

npm init vite@latest

上述命令将创建一个交互式窗口。请继续。

  • 输入你喜欢的应用程序名称为svelte-app 。
  • 选择svelte 作为你想要的框架。
  • 选择svelte.ts 作为framework variant ，因为你是用TypeScript工作的。

svelte-app

当这个过程完成后，使用以下命令导航到你生成的应用程序文件夹。

cd svelte-app

然后运行下面的命令来安装默认的依赖项。

npm install

你的应用程序将使用Vite依赖项进行构建。

vite

上述命令将创建一个简单的TypeScript模板应用程序。你可以通过使用下面的命令启动开发服务器来测试它。

npm run dev

在你的浏览器上，导航到你的控制台中记录的URL，例如，http://localhost:3000 。这将为你提供一个简单的TypeScript Svelte应用程序。

设置Tailwind CSS

Tailwind是一个CSS实用类的集合，允许你写更少的CSS代码。

Tailwind使你能够使用这些实用类，并更容易和更快地创建响应式、动画式UI组件。

Tailwind受欢迎的一个重要原因是，它与基于组件的JavaScript框架（如Svelte、Vue、React和Angular）合作良好。

要为Svelte设置Tailwind，请在你的终端上打开一个新的标签，运行以下命令来安装TailwindCSS 及其对等的依赖。

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Tailwind需要创建两个配置文件：tailwind.config.js 和postcss.config.js 。运行下面的命令来生成这些文件。

npx tailwindcss init -p

我们正在使用Vite 2 ，它依赖于ES modules 。因此，我们将不得不编辑我们的配置文件，以便用Vite执行Tailwind。

导航到tailwind.config.js 文件，并按如下方式编辑。

export default {
  plugins: [],
    theme: {
    extend: {},
  },
  purge: ["./index.html",'./src/**/*.{svelte,js,ts}'], // for unused CSS
  variants: {
    extend: {},
  },
  darkMode: false, // or 'media' or 'class'
}

我们还将index.html,svelte,js, 和ts 文件列入清理范围，以便从具有此类扩展名的文件中删除任何未使用的CSS。

同时，更新postcss.config.js ，如下所示。

import tailwind from 'tailwindcss'
import tailwindConfig from './tailwind.config.js'
import autoprefixer from 'autoprefixer'

export default {
  plugins:[tailwind(tailwindConfig),autoprefixer]
}

将postcss.config.js 中的postcss 应用于vite.config.js 文件，以定义Tailwind的CSS配置。

import postcss from './postcss.config.js';
import { svelte } from '@sveltejs/vite-plugin-svelte'
import { defineConfig } from 'vite'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte()],
  css:{
    postcss
  }
})

在你项目的src 目录内，创建一个TailwindCSS.svelte 文件。为了纳入Tailwind的base 、components 、和utilities ，将@tailwind 标签添加到该代码中，如下所示。

<style global>
@tailwind utilities;
@tailwind components;
@tailwind base;
</style>

由于我们使用了global 关键字，这种风格将在应用程序中全局应用。

将TailwindCSS.svelte 文件导入到App.svelte 文件的script 标签内。

import TailwindCss from './TailwindCSS.svelte';

在脚本标签之后，调用TailwindCSS 组件来应用整体风格设置。

<TailwindCss />

建立一个简单的投资组合

在配置了TailwindCSS之后，让我们创建一个简单的投资组合页面，以演示如何使用整个设置。

首先，在src/lib 文件夹中创建以下组件。

  • Nav.svelte:这个模块将被用来构建一个导航条。
  • Hero.svelte:这个模块将被用来创建一个英雄部分组件。
  • Services.svelte:: 这将被用来创建服务部分的组件。
  • Team.svelte:这将用于创建团队部分组件。
  • Footer.svelte:这将被用来创建页脚部分。

设置导航栏组件

在Nav.svelte 中添加以下代码。

<script>
  import * as animateScroll from "svelte-scrollto";
</script>

<header class="text-gray-600 body-font">
  <div class="container mx-auto flex flex-wrap p-5 flex-col md:flex-row items-center">
    <a class="flex title-font font-medium items-center text-gray-900 mb-4 md:mb-0" href="/" 
    on:click={
      () => {
        window.scrollTo({
          top:0,
          left:0,
          behavior:"smooth"
        })
      }
    }
    >       
      <h2 class="ml-3 text-xl">ABC</h2>
    </a>
    <nav class="md:mx-auto flex flex-wrap items-center justify-center">
      <a class="mr-5"
      name="navigation"
      on:click={
        () => 
          animateScroll.scrollTo({
            element:"#home",
            offset:50
          })
        
      }>Home</a>
      <a class="mr-5"  
      name="navigation"
      on:click={
        () => 
          animateScroll.scrollTo({
            element:"#services",
            offset:50
          })
        
      }>Our Services</a>
      <a class="mr-5"
      name="navigation"
      on:click={
        () => 
          animateScroll.scrollTo({
            element:"#team",
            offset:50
          })
        
      }>Our team</a>
    </nav>
  </div>
</header>

上面的代码将用一个on-click 函数渲染导航链接，让你滚动到指定的部分。

我们需要从svelte-scrollto 包中导入animateScroll 。这个包将允许用户浏览和滚动我们页面的各个部分。

从你的终端运行下面的命令来安装svelte-scrollto 包。

npm i svelte-scrollto

设置Hero组件

在Hero.svelte 组件中添加以下内容。

<script>
  import * as animateScroll from "svelte-scrollto";
</script>

<section id="home" class="text-gray-600 body-font">
  <div class="container mx-auto flex items-start justify-between">
    <div class="py-20">
      <h1 class="title-font text-gray-900 mb-10 title-font font-medium">
        Trusted by over one thousand clients
      </h1>
      <p class="mb-8 leading-relaxed">We offer the best web service to our clients. </p>
      <div class="flex items-center">
        <button
        class="bg-blue-600 px-6 py-2 text-white rounded-full hover:bg-blue-500 focus:outline-none focus:shadow-outline"
        on:click={
          () => animateScroll.scrollTo({
            element:"#services",
            offset:50
          })
        }
        >Our services</button>
      </div>
      </div>
    <div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
      <img class="object-cover object-center rounded" alt="hero" src="https://images.unsplash.com/photo-1633114127451-558041183c3b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80">
    </div>
  </div>
</section>

上面的代码显示假的内容，包括一个滚动到服务部分的按钮。

设置服务组件

在services.svelte 组件中添加以下内容。

<section id="services">
  <div class="container mx-auto">
    <div class="py-20">
      <h1 class="title-font text-center text-gray-900 mb-10 title-font font-medium">
        Our services
      </h1>
      <p class="mb-8 leading-relaxed text-center">We offer the following services to our clients. </p>
      <div class="flex flex-wrap lg:w-4/5 sm:mx-auto">
          <div class="p-2 md:w-1/2 w-full">
              <div class="bg-blue-600 rounded p-4 text-center text-white">
                  <p>Website design</p>
              </div>
          </div>
          <div class="p-2 md:w-1/2 w-full">
              <div class="bg-blue-600 rounded p-4 text-center text-white">
                  <p>Website development</p>
              </div>
          </div>
          <div class="p-2 md:w-1/2 w-full">
              <div class="bg-blue-600 rounded p-4 text-center text-white">
                  <p>Mobile application design</p>
              </div>
          </div>
          <div class="p-2 md:w-1/2 w-full">
              <div class="bg-blue-600 rounded p-4 text-center text-white">
                  <p>Mobile application development</p>
              </div>
          </div>
      </div>
      </div>
  </div>
</section>

上面的代码创建了一个虚拟的services 部分。

设置团队组件

在Team.svelte 组件中添加以下代码。

<section id="teams">
    <div class="container mx-auto">
      <div class="py-20">
        <h1 class="title-font text-center text-gray-900 mb-10 title-font font-medium">
          Our team
        </h1>
        <p class="mb-8 leading-relaxed text-center"> Our pool of talented employees </p>
        <div class="flex flex-wrap lg:w-4/5 sm:mx-auto">
            <div class="p-2 md:w-1/2 w-full">
                <div class="bg-gray-400 rounded p-4 text-center ">
                    <p>John Doe</p>
                    <p>C.E.O/Co-founder</p>
                </div>
            </div>
            <div class="p-2 md:w-1/2 w-full">
                <div class="bg-gray-400 rounded p-4 text-center">
                    <p>Jane Doe</p>
                    <p>Co-founder/ Product management</p>
                </div>
            </div>
            <div class="p-2 md:w-1/2 w-full">
                <div class="bg-gray-400 rounded p-4 text-center">
                    <p>Alex Doe</p>
                    <p>Wed developer</p>
                </div>
            </div>
            <div class="p-2 md:w-1/2 w-full">
                <div class="bg-gray-400 rounded p-4 text-center">
                    <p>Alice Doe</p>
                    <p>Mobile application developer</p>
                </div>
            </div>
        </div>
        </div>
    </div>
</section>

上面的代码生成了一个假的team members 部分。

设置页脚组件

在Footer.svelte 组件中添加以下代码。

<footer class="text-gray-600 body-font">
    <div class="container mx-auto text-center">
      <a href="/">
        <span class="ml-3 text-xl text-gray-900">ABC Company</span>
      </a>
      <p class="text-sm text-gray-500">© 2021 </p>
    </div>
</footer>

上面的代码创建并渲染了一个简单的页脚部分。

在script 部分下导入src/App.svelte 中的组件。

import Nav from './lib/Nav.svelte';
import Hero from './lib/Hero.svelte';
import Team from './lib/Team.svelte';
import Services from './lib/Services.svelte';
import Footer from './lib/Footer.svelte';

接下来，在应用程序的main 部分内调用这些组件，如下所示。

<script lang="ts">
  import TailwindCss from './TailwindCSS.svelte';
</script>

<TailwindCss />
<main class="max-w mx-auto px-4">
<div class="pt-4 pb-12">
  <Nav />
  <Hero />
  <Services />
  <Team />
  <Footer />
  </div>
</main>

要查看这个组合，请使用npm run dev 命令启动你的Svelte开发服务器，然后在浏览器中导航到http://localhost:3000 。

our-services-section

our-team-section

总结

在本指南中，我们已经学会了如何设置一个TypeScript-Svelte应用程序。我们还讨论了如何在Svelte应用程序中编写TypeScript代码。

我们配置并使用TailwindCSS来创建一个Svelte组合应用程序。

avatar
文章
阅读
粉丝