I’m participating in nuggets Creators Camp # 4, click here to learn more and learn together!

The articles

  • About setting up background template with Vite2 + VUe3 +Ts (I)· Basic framework

preface

The last article mainly did some framework infrastructure, code specification Lint, submission specification Lint, etc..

The content of this article is also based on the configuration of other items

Learning project: Soybean Admin

Configuration alias

invite.config.jsIn the configuration

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, ". /"),}}}; });Copy the code

intsconfig.jsonIn the configuration

{
  "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"}}]Copy the code

To configure the CSS

scss

pnpm add scss -D
Copy the code

Add the configuration in viet.config.js

// ...
css: {
  preprocessorOptions: {
    scss: {
      // You can use predefined variables globally
      additionalData: '@import "@/styles/scss/global.scss"; ',,}}}// ...
Copy the code

Windi CSS

Windi Css is used as the Css framework in the project.

pnpm add vite-plugin-windicss windicss - D
Copy the code

Add the configuration in viet.config.js

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

Introduce virtual:windi.css in main.ts

// main.ts
import "virtual:windi.css";
Copy the code

> windi.config.ts > windi.config.ts > windi.config

App started page Loading

First look at the renderings:

Implementation logic: inindex.htmlTemplates,<div id='app'>Loading static UI is preset in the containerVue APPNodes are automatically removed after being mounted.

Tools and Materials required:

  1. App Logo (WorldVectorLogo is a good tool for Amway)
  2. vite-plugin-html, one is provided for index.htmlminifyAnd based onEJSVite plugin for template functionality.
pnpm add vite-plugin-html -D
Copy the code

Add the configuration in viet.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",},},}),]// ...
})
Copy the code

Add the configuration in 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>
Copy the code

And you’re done!

This paper summarizes

  • Configuring a Path Aliasalias
  • configurationscss
  • configurationWindi Css
  • App loading

This section is mainly for the following development of some basic work

Code warehouse

The way ahead is so long without ending, yet high and low I’ll search with my will unbending.