我正在参与掘金创作者训练营第4期,点击了解活动详情,一起学习吧!
往期文章
前言
上篇主要是做了一些框架基础搭建,代码规范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
这一节主要也是为后面的开发做了一些基础性的工作
路漫漫其修远兮,吾将上下而求索