0.1

.eslintrc.cjs

@@ -0,0 +1,15 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}

.gitignore

@@ -1,8 +1,27 @@
-.sass-cache
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
+.DS_Store
+dist-ssr
+coverage
+*.local
 
-dist
+/cypress/videos/
+/cypress/screenshots/
 
-*.sublime-workspace
-
-Thumbs.db
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.prettierrc.json

@@ -0,0 +1 @@
+{}

README.md

@@ -1,38 +1,8 @@
+<<<<<<< HEAD
 # Flexbox Playground   
-CSS3 FlexBox 在线调试：  
-http://www.fly63.com/tool/flexbox/  
-https://codepen.io/whqet/full/vOEjVK/  
+CSS3 FlexBox 在线调试：   
+https://www.qtyyw.com/  
   
 文档解说：   
 https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
 
-This is project to demonstrate the capabilities of the CSS3 Flexbox Layout.
-
-## Prerequisites
-
-In order to build this project you need to have Node.js and npm (Node Package Manager) installed on your system. You can download them from [here](https://nodejs.org/download/) and follow this [install instructions](https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager).
-
-To compile the Sass source to CSS, you'll need Ruby, Sass and Compass. To install Ruby follow this [guide](https://www.ruby-lang.org/en/documentation/installation/), for Sass [this](http://sass-lang.com/install), and for Compass refer to [this guide](http://compass-style.org/install/).
-
-In some cases when installing node packages you'll need [Python 2.7](https://www.python.org/downloads/) and [C++ Libraries](https://support.microsoft.com/en-us/kb/2977003) (Windows) to build them.
-
-Note that these executables need to be accessed from command line, so make sure they're added in the environment path. On Linux and Mac they're automatically added to the path, and for Windows you may need to follow this [instructions](http://www.computerhope.com/issues/ch000549.htm), just be careful not to mess the existing path value.
-
-## Setup
-
-First install gulp command line tool globally with:
-
-`npm install --global gulp`
-
-And from the project's root install the dependencies with:
-
-`npm install`
-
-After it's done, this will attempt to run `bundle` in the current dir to install the `compass` gem defines as a dependency in the `Gemfile`. Without the Ruby `compass` gem, `gulp build` will fail.
-
-## Build
-
-To build the code just run `gulp` from the command line. This will produce functional version in the `dist` folder.
-
-## License
-This source code is under [MIT license](https://github.com/imjustd/flexbox-playground/blob/master/LICENSE).

auto-imports.d.ts

@@ -0,0 +1,5 @@
+// Generated by 'unplugin-auto-import'
+export {}
+declare global {
+
+}

components.d.ts

@@ -0,0 +1,32 @@
+// generated by unplugin-vue-components
+// We suggest you to commit this file into source control
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    AAlert: typeof import('@arco-design/web-vue')['Alert']
+    AButton: typeof import('@arco-design/web-vue')['Button']
+    ACard: typeof import('@arco-design/web-vue')['Card']
+    ACol: typeof import('@arco-design/web-vue')['Col']
+    ADivider: typeof import('@arco-design/web-vue')['Divider']
+    AForm: typeof import('@arco-design/web-vue')['Form']
+    AInput: typeof import('@arco-design/web-vue')['Input']
+    AInputNumber: typeof import('@arco-design/web-vue')['InputNumber']
+    ALayout: typeof import('@arco-design/web-vue')['Layout']
+    ALayoutContent: typeof import('@arco-design/web-vue')['LayoutContent']
+    ALayoutFooter: typeof import('@arco-design/web-vue')['LayoutFooter']
+    ALayoutHeader: typeof import('@arco-design/web-vue')['LayoutHeader']
+    AList: typeof import('@arco-design/web-vue')['List']
+    AListItem: typeof import('@arco-design/web-vue')['ListItem']
+    AOption: typeof import('@arco-design/web-vue')['Option']
+    ARadio: typeof import('@arco-design/web-vue')['Radio']
+    ARadioGroup: typeof import('@arco-design/web-vue')['RadioGroup']
+    ARow: typeof import('@arco-design/web-vue')['Row']
+    ASelect: typeof import('@arco-design/web-vue')['Select']
+    ASlider: typeof import('@arco-design/web-vue')['Slider']
+    ATooltip: typeof import('@arco-design/web-vue')['Tooltip']
+  }
+}

dist/index.html

@@ -0,0 +1,15 @@
+<!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>CSS3 Flexbox 在线演示---语言爱好网</title>
+    <script type="module" crossorigin src="/assets/index.6cde3632.js"></script>
+    <link rel="stylesheet" href="/assets/index.a55e32e0.css">
+  </head>
+  <body>
+    <div id="app"></div>
+    
+  </body>
+</html>

env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

index.html

@@ -0,0 +1,13 @@
+<!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>CSS3 Flexbox 在线演示---语言爱好网</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package.json

@@ -1,31 +1,34 @@
 {
-  "name": "flexbox-playground",
-  "version": "1.0.0",
-  "description": "Web demo to demonstrate CSS3 flexbox properties",
-  "homepage": "http://invoicebus.com",
-  "repository": "imjustd/flexbox-playground",
-  "main": "index.js",
-  "keywords": [
-    "CSS3",
-    "flexbox",
-    "demo"
-  ],
-  "author": "Dimitar Stojanov <dimitar@invoicebus.com>",
-  "license": "MIT",
-  "engines": {
-    "node": ">= 0.10"
+  "name": "flex",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check build-only",
+    "preview": "vite preview --port 4173",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --noEmit",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore"
+  },
+  "dependencies": {
+    "vue": "^3.2.38"
   },
   "devDependencies": {
-    "gulp": "^3.8.11",
-    "gulp-compass": "^2.0.3",
-    "gulp-concat": "^2.5.2",
-    "gulp-jshint": "^1.9.2",
-    "gulp-sourcemaps": "^1.3.0",
-    "gulp-uglify": "^1.1.0",
-    "gulp-util": "^3.0.4",
-    "jshint-stylish": "^1.0.1"
-  },
-  "scripts": {
-    "postinstall": "which bundle && bundle"
+    "@arco-design/web-vue": "^2.38.0",
+    "@rushstack/eslint-patch": "^1.1.4",
+    "@types/node": "^16.11.56",
+    "@vitejs/plugin-vue": "^3.0.3",
+    "@vitejs/plugin-vue-jsx": "^2.0.1",
+    "@vue/eslint-config-prettier": "^7.0.0",
+    "@vue/eslint-config-typescript": "^11.0.0",
+    "@vue/tsconfig": "^0.1.3",
+    "eslint": "^8.22.0",
+    "eslint-plugin-vue": "^9.3.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.7.1",
+    "typescript": "~4.7.4",
+    "unplugin-auto-import": "^0.11.4",
+    "unplugin-vue-components": "^0.22.9",
+    "vite": "^3.0.9",
+    "vue-tsc": "^0.40.7"
   }
 }

src/App.vue

@@ -0,0 +1,523 @@
+<script setup lang="ts">
+import {ref, watch, onMounted, reactive} from "vue";
+
+/** 子项默认宽度 */
+const itemWidth = ref(18);
+/** 父Flex属性–Flex容器 默认值 */
+const flexContainerForm: { [key: string]: any } = reactive({
+  "flex-direction": "row",
+  "flex-wrap": "nowrap",
+  "justify-content": "flex-start",
+  "align-items": "stretch",
+  "align-content": "stretch",
+});
+
+/** 选项值，默认值 */
+const flexContainerList = {
+  "flex-direction": {
+    title: "flex-direction",
+    list: ["row", "row-reverse", "column", "column-reverse"],
+    modelValue: "row",
+  },
+  "flex-wrap": {
+    title: "flex-wrap",
+    list: ["nowrap", "wrap", "wrap-reverse"],
+    modelValue: "nowrap",
+  },
+  "justify-content": {
+    title: "justify-content",
+    list: ["flex-start", "flex-end", "center", "space-between", "space-around"],
+    modelValue: "flex-start",
+  },
+  "align-items": {
+    title: "align-items",
+    list: ["stretch", "flex-start", "flex-end", "center", "baseline"],
+    modelValue: "stretch",
+  },
+  "align-content": {
+    title: "align-content",
+    list: [
+      "stretch",
+      "flex-start",
+      "flex-end",
+      "center",
+      "space-between",
+      "space-around",
+    ],
+    modelValue: "stretch",
+  },
+};
+
+/** 子项初始个数 */
+const itemCount = 5;
+/** 当前子项总数 */
+let itemListCount = ref(itemCount);
+/** 子项-单项默认值 */
+const itemFormDefaultValue: { [key: string]: number | string } = {
+  order: 0,
+  "flex-grow": 0,
+  "flex-shrink": 1,
+  "flex-basis": "auto",
+  "align-self": "auto",
+};
+
+/** align-self 选项 */
+const itemAlignSelf = [
+  "auto",
+  "stretch",
+  "center",
+  "flex-start",
+  "flex-end",
+  "baseline",
+];
+
+/** 子项列表 JSON 数据 */
+let flexItemForm: {
+  [key: string]: any;
+} = reactive({});
+
+/** 增加子项 */
+const addItem = () => {
+  itemListCount.value++;
+  flexItemForm[`item-` + itemListCount.value] = JSON.parse(
+      JSON.stringify(itemFormDefaultValue)
+  );
+};
+
+/** 减少子项 */
+const removeItem = (key: string | number) => {
+  delete flexItemForm[key];
+  delete flexItemFormStyle[key];
+};
+
+/** 横杆后的字母变大写 */
+const toUp = (str: string) => {
+  let newStr = "";
+  let arr = str.split("-"); //先用字符串分割成数组
+
+  arr.forEach((item, index) => {
+    if (index > 0) {
+      return (newStr += item.replace(item[0], item[0].toUpperCase()));
+    } else {
+      return (newStr += item);
+    }
+  });
+  return newStr;
+};
+
+/** flexBox style */
+let flexContainerFormStyle: { [key: string]: any } = reactive({});
+const flexContainerFormStyleFun = () => {
+  Object.keys(flexContainerForm).forEach((key) => {
+    flexContainerFormStyle["display"] = "flex";
+    flexContainerFormStyle["height"] = "95%";
+    flexContainerFormStyle[toUp(key)] = flexContainerForm[key];
+  });
+};
+/** flexContainerForm 父属性 默认值监听*/
+watch(flexContainerForm, () => {
+  // flexContainerFormStyle = {};
+  flexContainerFormStyleFun();
+});
+
+/** 子项 style 生成 */
+let flexItemFormStyle: { [key: string]: any } = reactive({});
+const flexItemFormStyleFun = () => {
+  Object.keys(flexItemForm).forEach((ikey) => {
+    let valueObj: any = {};
+    let flexItemFormIkey = flexItemForm[ikey];
+    Object.keys(flexItemFormIkey).forEach((_ikeys) => {
+      // valueObj['backgroundColor'] = 'cornsilk';
+      valueObj["width"] = itemWidth.value + "%";
+      // valueObj['minHeight'] = '80px';
+      // valueObj['display'] = 'inline-block';
+      valueObj[toUp(_ikeys)] = flexItemFormIkey[_ikeys];
+    });
+    flexItemFormStyle[ikey] = valueObj;
+  });
+};
+/** 监听子项 和 宽度样式变化 */
+watch([flexItemForm, itemWidth], () => {
+  // flexItemFormStyle = {};
+  flexItemFormStyleFun();
+});
+
+/** 初始 子项 默认值 */
+const initialFlexItemForm = () => {
+  for (let index = 0; index < itemCount; index++) {
+    flexItemForm[`item-` + index] = JSON.parse(
+        JSON.stringify(itemFormDefaultValue)
+    );
+  }
+}
+
+/**
+ * 准备html和css 打印准备
+ */
+/** 盒子dom */
+let fiexBoxDom: any = ref(null);
+/** 要输出的html */
+let fiexBoxDomHtml: any = ref(``);
+/** 外层 CSS */
+let fiexBoxCssString: any = ref(``);
+/** 子项 CSS */
+let fiexItemCssString: any = ref(``);
+/** 生成HTML方法 */
+const fiexSubmitHtml = () => {
+  let html = `<div class="flexbox">`;
+  // 获取所有子项
+  Object.keys(flexItemForm).forEach((ikey, index) => {
+    const itemClass = "flex-item item-" + (index + 1);
+    html += `<div class="${itemClass}">${itemClass}</div>`;
+  });
+  html += `</div>`;
+  fiexBoxDomHtml.value = html;
+};
+/** 生成CSS方法{} */
+const fiexSubmitCss = () => {
+  /** 增加CSS外层{} */
+  const addKuohao = (css: string) => {
+    return `{` + css + `}`;
+  };
+  const flexboxitemDom = fiexBoxDom.value.querySelectorAll(".flexboxitem");
+  let css: string = ".flex-item{display: inline-block; min-height: 80px; background-color: cornsilk; margin: 5px; overflow: hidden;}";
+  flexboxitemDom.forEach((dom: any, index: string) => {
+    css += `.item-` + (index + 1) + addKuohao(dom.style.cssText);
+  });
+
+  fiexBoxCssString.value = `.flexbox{` + fiexBoxDom.value.style.cssText + `}`;
+  fiexItemCssString.value = css;
+};
+/** 获取打印html和css */
+const fiexSubmit = () => {
+  fiexSubmitHtml();
+  fiexSubmitCss();
+};
+
+/** 初始页面加载后只执行一次 */
+onMounted(() => {
+  initialFlexItemForm();
+  flexContainerFormStyleFun();
+  flexItemFormStyleFun();
+});
+
+/**
+ * 底部
+ */
+const showTime: any = ref('');
+const showTimeYear: any = ref(0);
+const checkTime = function (i: any) {
+  if (i < 10) {
+    i = "0" + i;
+  }
+  return i;
+};
+const showTimeFun = function () {
+  const nowdate = new Date();
+  let year = nowdate.getFullYear(),
+      month = nowdate.getMonth() + 1,
+      date = nowdate.getDate(),
+      day = nowdate.getDay(),
+      week = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
+      h: string | number = nowdate.getHours(),
+      m: string | number = nowdate.getMinutes(),
+      s: string | number = nowdate.getSeconds();
+  h = checkTime(h);
+  m = checkTime(m);
+  s = checkTime(s);
+  // 年
+  showTimeYear.value = year.toString();
+  // 日期时间
+  showTime.value = year + "年" + month + "月" + date + "日" + week[day] + " " + h + ":" + m + ":" + s;
+};
+
+showTimeFun();
+setInterval(() => {
+  showTimeFun();
+}, 1000);  //反复执行函数
+
+</script>
+
+<template>
+  <div class="layout">
+    <a-layout>
+      <a-layout-header>
+        <h1><strong>CSS3 Flexbox 在线演示</strong></h1>
+      </a-layout-header>
+      <a-layout-content>
+        <a-row class="flexrow">
+          <a-col class="arcocol">
+            <h3>子项宽度</h3>
+            <div>
+              <span>Width：{{ itemWidth }}</span>
+              <a-slider
+                  v-model="itemWidth"
+                  :min="18"
+                  :max="100"
+                  :step="1"
+                  :style="{ paddingLeft: '10px', width: '90%' }"
+              />
+            </div>
+            <a-divider :margin="20" :size="2">
+              <icon-heart/>
+            </a-divider>
+            <h3>父Flex属性–Flex容器</h3>
+            <div>
+              <a-form :model="flexContainerForm">
+                <a-row class="flexcontainer">
+                  <a-col
+                      class="acol"
+                      v-for="(item, key) in flexContainerList"
+                      :key="key"
+                  >
+                    <h4>
+                      <strong>{{ item.title }}</strong>
+                    </h4>
+                    <a-radio-group
+                        direction="vertical"
+                        v-model="flexContainerForm[key]"
+                    >
+                      <a-radio
+                          v-for="(value, keys) in item.list"
+                          :value="value"
+                          :key="keys"
+                      >
+                        {{ value }}
+                      </a-radio>
+                    </a-radio-group>
+                  </a-col>
+                </a-row>
+                <a-button
+                    @click="fiexSubmit"
+                    :style="{ marginTop: '15px' }"
+                    type="primary"
+                    status="success"
+                >获取
+                </a-button
+                >
+                <a-alert
+                    type="success"
+                    :show-icon="false"
+                    :style="{ padding: '20px', marginTop: '15px' }"
+                    v-if="fiexBoxDomHtml || fiexBoxCssString || fiexItemCssString"
+                >
+                  {{ fiexBoxDomHtml }}
+                  <a-divider/>
+                  {{ fiexBoxCssString }}
+                  <a-divider/>
+                  {{ fiexItemCssString }}
+                  <a-divider/>
+                </a-alert>
+              </a-form>
+            </div>
+          </a-col>
+          <a-col class="arcocol" :style="{ padding: '20px 5px' }">
+            <h3>
+              实现效果
+              <a-button
+                  type="primary"
+                  @click="addItem"
+                  :style="{ float: 'right' }"
+              >
+                <template #icon>
+                  <icon-plus/>
+                </template>
+                新增子项
+              </a-button>
+            </h3>
+            <div :style="{ height: '100%' }">
+              <div
+                  class="flexbox"
+                  :style="flexContainerFormStyle"
+                  ref="fiexBoxDom"
+              >
+                <div
+                    class="flexboxitem"
+                    v-for="(_, indexKey, index) in flexItemForm"
+                    :key="index"
+                    :style="flexItemFormStyle[indexKey]"
+                >
+                  <a-card :title="(index + 1).toString()" :bordered="false">
+                    <template #extra>
+                      <a-button
+                          type="text"
+                          shape="circle"
+                          @click="removeItem(indexKey)"
+                      >
+                        <icon-close/>
+                      </a-button>
+                    </template>
+                    <a-list>
+                      <a-list-item>
+                        <a-tooltip content="order">
+                          <a-input-number
+                              v-model="flexItemForm[indexKey].order"
+                              :min="0"
+                              model-event="input"
+                          />
+                        </a-tooltip>
+                      </a-list-item>
+                      <a-list-item>
+                        <a-tooltip content="flex-grow">
+                          <a-input-number
+                              v-model="flexItemForm[indexKey]['flex-grow']"
+                              :min="0"
+                              model-event="input"
+                          />
+                        </a-tooltip>
+                      </a-list-item>
+                      <a-list-item>
+                        <a-tooltip content="flex-shrink">
+                          <a-input-number
+                              v-model="flexItemForm[indexKey]['flex-shrink']"
+                              :min="1"
+                              :max="100"
+                              model-event="input"
+                          />
+                        </a-tooltip>
+                      </a-list-item>
+                      <a-list-item>
+                        <a-tooltip content="flex-basis">
+                          <a-input
+                              v-model="flexItemForm[indexKey]['flex-basis']"
+                              allow-clear
+                          />
+                        </a-tooltip>
+                      </a-list-item>
+                      <a-list-item>
+                        <a-tooltip content="align-self">
+                          <a-select
+                              v-model="flexItemForm[indexKey]['align-self']"
+                          >
+                            <a-option
+                                v-for="ikeys in itemAlignSelf"
+                                :key="ikeys"
+                            >
+                              {{ ikeys }}
+                            </a-option>
+                          </a-select>
+                        </a-tooltip>
+                      </a-list-item>
+                    </a-list>
+                  </a-card>
+                </div>
+              </div>
+            </div>
+          </a-col>
+        </a-row>
+      </a-layout-content>
+      <a-layout-footer ref="showTimeDom">
+        <a-row class="footer" :gutter="24">
+          <a-col :span="12">
+            <div>{{ showTime }}</div>
+          </a-col>
+          <a-col :span="12">
+            <span :style="{padding:'0 10px'}">Copyright © 2015-{{ showTimeYear }}</span>
+            <a target="_blank" rel="noopener" href="https://beian.miit.gov.cn/"> 鲁ICP备10001546号 </a>
+          </a-col>
+        </a-row>
+
+      </a-layout-footer>
+    </a-layout>
+  </div>
+</template>
+
+<style scoped>
+h3 {
+  font-weight: 700;
+  padding-bottom: 15px;
+}
+
+/**
+效果实现
+ */
+.flexbox {
+  padding: 10px;
+  background-color: goldenrod;
+}
+
+.flexbox :deep(.arco-card-size-medium .arco-card-body) {
+  padding: 5px;
+}
+
+.flexbox :deep(.arco-list-bordered) {
+  border: none;
+}
+
+.flexbox :deep(.arco-input-wrapper),
+.flexbox :deep(.arco-select-view-single) {
+  background-color: transparent;
+}
+
+.flexboxitem {
+  min-height: 80px;
+  background-color: cornsilk;
+  display: inline-block;
+  margin: 5px;
+  overflow: hidden;
+}
+
+.flexboxitem :deep(.arco-card) {
+  background: transparent;
+}
+
+.flexboxitem :deep(.arco-list-wrapper),
+.flexboxitem :deep(.arco-list-medium .arco-list-content-wrapper .arco-list-content > .arco-list-item) {
+  padding: 0;
+}
+
+.layout,
+.layout :deep(.arco-layout) {
+  height: 100%;
+}
+
+.layout :deep(.arco-layout-header),
+.layout :deep(.arco-layout-footer),
+.layout :deep(.arco-layout-content) {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  /*color: var(--color-white);*/
+  font-size: 16px;
+  font-stretch: condensed;
+  text-align: center;
+}
+
+.layout :deep(.arco-layout-header),
+.layout :deep(.arco-layout-footer) {
+  height: 64px;
+  background-color: #00bd7e;
+}
+
+.layout :deep(.arco-layout-footer) {
+  background-color: transparent;
+}
+
+.layout :deep(.arco-layout-content) {
+  /*background-color: goldenrod;*/
+}
+
+.flexrow,
+.flexcontainer {
+  /*color: var(--color-white);*/
+  align-items: stretch;
+  height: 100%;
+  text-align: left;
+}
+
+.flexrow .arcocol {
+  flex: 1 1 50%;
+  padding: 20px;
+  color: #181818;
+}
+
+.flexcontainer .acol {
+  flex: 1 0 20%;
+  /*flex-basis: 0;*/
+}
+
+.footer {
+  color: hsla(160, 100%, 37%, 1);
+}
+
+</style>

src/assets/base.css

@@ -0,0 +1,74 @@
+/* color palette from <https://github.com/vuejs/theme> */
+:root {
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+}
+
+/* semantic color variables for this project */
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    --color-text: var(--vt-c-text-dark-2);
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  position: relative;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+  color: var(--color-text);
+  background: var(--color-background);
+  transition: color 0.5s, background-color 0.5s;
+  line-height: 1.6;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
+    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-size: 15px;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

src/assets/main.css

@@ -0,0 +1,27 @@
+@import "./base.css";
+
+body {
+    /*display: flex;*/
+    /*place-items: center;*/
+}
+
+#app {
+    width: 100%;
+    height: 100vh;
+    margin: 0 auto;
+    /*padding: 0 2rem;*/
+    font-weight: normal;
+    overflow: hidden;
+}
+
+a {
+    text-decoration: none;
+    color: hsla(160, 100%, 37%, 1);
+    transition: 0.4s;
+}
+
+@media (hover: hover) {
+    a:hover {
+        background-color: hsla(160, 100%, 37%, 0.2);
+    }
+}

src/components/hello.vue

@@ -0,0 +1,13 @@
+<template>
+
+</template>
+
+<script>
+export default {
+  name: "hello"
+}
+</script>
+
+<style scoped>
+
+</style>

src/main.ts

@@ -0,0 +1,10 @@
+import {createApp} from 'vue'
+import App from './App.vue'
+// 额外引入图标库
+import ArcoVueIcon from '@arco-design/web-vue/es/icon';
+
+import './assets/main.css'
+
+const app = createApp(App);
+app.use(ArcoVueIcon);
+app.mount('#app');

tsconfig.config.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*"],
+  "compilerOptions": {
+    "composite": true,
+    "types": ["node"]
+  }
+}

tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+
+  "references": [
+    {
+      "path": "./tsconfig.config.json"
+    }
+  ]
+}

vite.config.ts

@@ -0,0 +1,28 @@
+import {fileURLToPath, URL} from 'node:url'
+
+import {defineConfig} from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueJsx from '@vitejs/plugin-vue-jsx'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite';
+import {ArcoResolver} from 'unplugin-vue-components/resolvers';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [vue(), vueJsx(),
+        AutoImport({
+            resolvers: [ArcoResolver()],
+        }),
+        Components({
+            resolvers: [
+                ArcoResolver({
+                    sideEffect: true
+                })
+            ]
+        })],
+    resolve: {
+        alias: {
+            '@': fileURLToPath(new URL('./src', import.meta.url))
+        }
+    }
+})