关于用vite2+vue3+Ts搭建后台模版这件事(二)

我正在参与掘金创作者训练营第4期，点击了解活动详情，一起学习吧！

往期文章

关于用vite2+vue3+Ts搭建后台模版这件事(一)·基础框架

前言

上篇主要是做了一些框架基础搭建，代码规范lint,提交规范lint等..

本篇的内容也是以其他项的基础配置

学习项目: Soybean Admin

配置alias

在`vite.config.js`中配置

import { defineConfig } from "vite";
import * as path from "node:path";
import vue from "@vitejs/plugin-vue";

export default defineConfig((configEnv) => {
  console.log(configEnv);
  return {
    plugins: [vue()],
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src"),
        "~": path.resolve(__dirname, "./"),
      },
    },
  };
});
复制代码

在`tsconfig.json`中配置

{
  "compilerOptions": {
    "target": "esnext",
    "allowSyntheticDefaultImports": true,
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"],
    "baseUrl": ".",
    "paths": {
      "@/*":["src/*"],
      "~/*":["./*"]
    },
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}
复制代码

配置css

scss

pnpm add scss -D
复制代码

在vite.config.js中添加配置

// ...
css: {
  preprocessorOptions: {
    scss: {
      //全局中可以使用预定义的变量了
      additionalData: '@import "@/styles/scss/global.scss";',
    },
  },
}
// ...
复制代码

Windi CSS

项目中使用Windi Css作为css框架。

pnpm add vite-plugin-windicss windicss - D
复制代码

在vite.config.js中添加配置

// ...
import WindiCSS from "vite-plugin-windicss";
export default defineConfig((configEnv) => {
  return {
    plugins: [vue(), WindiCSS()],
    // ...
  };
});
复制代码

在main.ts中引入virtual:windi.css

// main.ts
import "virtual:windi.css";
复制代码

在根目录下新建windi.config.ts, 内容有点多，自行查看~传送门

App启动页Loading

先看效果图:

实现逻辑: 在index.html模版，<div id='app'>容器内先预设好loading静态ui，当Vue APP挂载节点后自动移除.

所需工具及物料:

App logo （安利一个好工具worldvectorlogo）
vite-plugin-html, 一个为index.html提供minify和基于EJS模板功能的Vite插件。

pnpm add vite-plugin-html -D
复制代码

在vite.config.js添加配置

//...
import { createHtmlPlugin } from "vite-plugin-html";
export default defineConfig((configEnv) => {
// ...
  return {
    plugins: [
      vue(),
      WindiCSS(),
      createHtmlPlugin({
        minify: true,
        inject: {
          data: {
            appName: "lite Admin",
            appTitle: "lite Admin",
          },
        },
      }),
    ]
    // ...
})
复制代码

在index.html添加配置

//...
    <title><%= appName %></title>
  </head>
  <body>
    <div id="app">
      <div class="loading-container">
        <div id="loadingLogo" class="loading-svg"></div>
        <div class="loading-spin__container">
          <div class="loading-spin">
            <div class="left-0 top-0 loading-spin-item"></div>
            <div class="left-0 bottom-0 loading-spin-item loading-delay-500"></div>
            <div class="right-0 top-0 loading-spin-item loading-delay-1000"></div>
            <div class="right-0 bottom-0 loading-spin-item loading-delay-1500"></div>
          </div>
        </div>
        <h2 class="loading-title"><%= appTitle %></h2>
      </div>
      <script src="/resource/loading.js"></script>
    </div>
复制代码

大功告成!

本篇总结

配置路径别名alias
配置scss
配置Windi Css
App loading

这一节主要也是为后面的开发做了一些基础性的工作

代码仓库

路漫漫其修远兮，吾将上下而求索