編輯 package.json
文件:
{
"name": "your-project-name",
"version": "1.0.0",
"description": "您的項目描述",
"author": "您的名字",
"license": "MIT"
}
編輯 index.html
文件:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>您的項目名稱(chēng)</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
根據您的項目需求更新 README.md
和 README-zh_CN.md
文件。
編輯 .env.development
文件:
# 開(kāi)發(fā)環(huán)境配置
VITE_BASE_URL = /
VITE_API_URL_PREFIX = /api
VITE_API_BASE_URL = http://localhost:3000
# 項目標題
VITE_APP_TITLE = 您的項目名稱(chēng)
# 是否啟用Mock
VITE_USE_MOCK = true
編輯 .env
文件:
# 生產(chǎn)環(huán)境配置
VITE_BASE_URL = /
VITE_API_URL_PREFIX = /api
VITE_API_BASE_URL = https://your-api-domain.com
# 項目標題
VITE_APP_TITLE = 您的項目名稱(chēng)
# 是否啟用Mock
VITE_USE_MOCK = false
編輯 src/style/variables.less
文件:
// 主色調定制
@brand-color: #your-brand-color;
@brand-color-1: lighten(@brand-color, 45%);
@brand-color-2: lighten(@brand-color, 35%);
@brand-color-3: lighten(@brand-color, 25%);
@brand-color-4: lighten(@brand-color, 15%);
@brand-color-5: lighten(@brand-color, 5%);
@brand-color-6: @brand-color;
@brand-color-7: darken(@brand-color, 5%);
@brand-color-8: darken(@brand-color, 15%);
@brand-color-9: darken(@brand-color, 25%);
@brand-color-10: darken(@brand-color, 35%);
// 成功色
@success-color: #00a870;
// 警告色
@warning-color: #ed7b2f;
// 錯誤色
@error-color: #e34d59;
在 src/style/
目錄下創(chuàng )建自定義樣式文件:
// src/style/custom.less
.custom-button {
background: linear-gradient(45deg, @brand-color, lighten(@brand-color, 10%));
border: none;
border-radius: 6px;
&:hover {
background: linear-gradient(45deg, darken(@brand-color, 5%), @brand-color);
}
}
然后在 src/style/index.less
中引入:
@import './custom.less';
詳細的配置指南請參考以下文檔: