feat: 项目初始化

master
shengwen.chen 2 months ago
commit 1e72f12edb

@ -0,0 +1,9 @@
[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue,css,scss,sass,less,styl}]
charset = utf-8
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
end_of_line = lf
max_line_length = 100

@ -0,0 +1,6 @@
module.exports = {
extends: ['@vue/eslint-config-standard'],
rules: {
'vue/multi-word-component-names': 'off',
},
}

1
.gitattributes vendored

@ -0,0 +1 @@
* text=auto eol=lf

30
.gitignore vendored

@ -0,0 +1,30 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
/cypress/videos/
/cypress/screenshots/
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
*.tsbuildinfo

@ -0,0 +1,6 @@
{
"$schema": "https://json.schemastore.org/prettierrc",
"semi": false,
"singleQuote": true,
"printWidth": 100
}

@ -0,0 +1,13 @@
{
"recommendations": [
"Vue.volar",
"vitest.explorer",
"dbaeumer.vscode-eslint",
"EditorConfig.EditorConfig",
"esbenp.prettier-vscode",
"vscode-icons-team.vscode-icons",
"esbenp.prettier-vscode",
"stylelint.vscode-stylelint",
"csstools.postcss"
]
}

@ -0,0 +1,45 @@
# SMDocEditor
This template should help get you started developing with Vue 3 in Vite.
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
## Type Support for `.vue` Imports in TS
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
## Customize configuration
See [Vite Configuration Reference](https://vite.dev/config/).
## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Type-Check, Compile and Minify for Production
```sh
npm run build
```
### Run Unit Tests with [Vitest](https://vitest.dev/)
```sh
npm run test:unit
```
### Lint with [ESLint](https://eslint.org/)
```sh
npm run lint
```

1
env.d.ts vendored

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

@ -0,0 +1,28 @@
import { globalIgnores } from 'eslint/config'
import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
import pluginVue from 'eslint-plugin-vue'
import pluginVitest from '@vitest/eslint-plugin'
import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
// import { configureVueProject } from '@vue/eslint-config-typescript'
// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
export default defineConfigWithVueTs(
{
name: 'app/files-to-lint',
files: ['**/*.{ts,mts,tsx,vue}'],
},
globalIgnores(['**/dist/**', '**/dist-ssr/**', '**/coverage/**']),
pluginVue.configs['flat/essential'],
vueTsConfigs.recommended,
{
...pluginVitest.configs.recommended,
files: ['src/**/__tests__/*'],
},
skipFormatting,
)

@ -0,0 +1,26 @@
<!doctype html>
<html lang="">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
<style>
* {
margin: 0;
}
html,
body {
height: 100%;
}
#app {
height: 100%;
}
</style>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

7519
package-lock.json generated

File diff suppressed because it is too large Load Diff

@ -0,0 +1,50 @@
{
"name": "smdoceditor",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"test:unit": "vitest",
"build-only": "vite build",
"type-check": "vue-tsc --build",
"lint": "eslint . --fix",
"format": "prettier --write src/"
},
"dependencies": {
"axios": "^1.8.4",
"element-plus": "^2.9.7",
"pinia": "^3.0.1",
"vue": "^3.5.13",
"vue-router": "^4.5.0"
},
"devDependencies": {
"@tsconfig/node22": "^22.0.1",
"@types/jsdom": "^21.1.7",
"@types/node": "^22.14.0",
"@vitejs/plugin-vue": "^5.2.3",
"@vitejs/plugin-vue-jsx": "^4.1.2",
"@vitest/eslint-plugin": "^1.1.39",
"@vue/eslint-config-prettier": "^10.2.0",
"@vue/eslint-config-typescript": "^14.5.0",
"@vue/test-utils": "^2.4.6",
"@vue/tsconfig": "^0.7.0",
"autoprefixer": "^10.4.21",
"eslint": "^9.22.0",
"eslint-plugin-vue": "~10.0.0",
"jiti": "^2.4.2",
"jsdom": "^26.0.0",
"npm-run-all2": "^7.0.2",
"postcss": "^8.5.3",
"prettier": "3.5.3",
"sass-embedded": "^1.86.3",
"tailwindcss": "^3.4.1",
"typescript": "~5.8.0",
"vite": "^6.2.4",
"vite-plugin-vue-devtools": "^7.7.2",
"vitest": "^3.1.1",
"vue-tsc": "^2.2.8"
}
}

@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

@ -0,0 +1,15 @@
<script setup lang="ts">
import { RouterView } from 'vue-router'
</script>
<template>
<section class="wrapperBox">
<RouterView />
</section>
</template>
<style lang="scss">
.wrapperBox {
height: 100%;
}
</style>

@ -0,0 +1 @@
@tailwind utilities;

@ -0,0 +1,5 @@
<script setup lang="ts"></script>
<template>
<section>组件设置...</section>
</template>

@ -0,0 +1,5 @@
<script setup lang="ts"></script>
<template>
<section>数据源设置...</section>
</template>

@ -0,0 +1,5 @@
<script setup lang="ts"></script>
<template>
<section>全局设置...</section>
</template>

@ -0,0 +1,14 @@
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './assets/css/main.css'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(ElementPlus)
app.use(createPinia())
app.use(router)
app.mount('#app')

@ -0,0 +1,20 @@
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/Home/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView,
},
{
path: '/melon',
name: 'melon',
component: () => import('../views/Melon/MelonView.vue'),
},
],
})
export default router

@ -0,0 +1,12 @@
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, doubleCount, increment }
})

@ -0,0 +1,26 @@
<script setup lang="ts">
import LeftSide from './subCom/LeftSide.vue'
import NavBar from './subCom/NavBar.vue'
import MainWrapper from './subCom/MainWrapper.vue'
import RightSide from './subCom/RightSide.vue'
</script>
<template>
<section class="h-full flex">
<LeftSide class="w-[260px]" />
<main class="grow h-full">
<NavBar />
<MainWrapper />
</main>
<RightSide class="w-[300px]" />
</section>
</template>
<style lang="scss" scoped>
section {
main {
border-left: 1px solid #e4e7ed;
border-right: 1px solid #e4e7ed;
}
}
</style>

@ -0,0 +1,69 @@
<script setup lang="ts">
import { ref } from 'vue'
import { DataBoard } from '@element-plus/icons-vue'
const tabsActive = ref('ZJK')
const collapseActive = ref(['RQ', 'JCZD'])
</script>
<template>
<section class="h-full">
<el-tabs v-model="tabsActive">
<el-tab-pane label="组件库" name="ZJK">
<div class="px-2">
<el-collapse v-model="collapseActive">
<el-collapse-item title="容器" name="RQ">
<div class="flex flex-wrap justify-between content-center px-2">
<div
class="basis-2/5 flex justify-between items-center border border-solid border-[#c1c1c1] px-2 mb-4"
>
<el-icon><DataBoard /></el-icon>
<p>组件一</p>
</div>
<div
class="basis-2/5 flex justify-between items-center border border-solid border-[#c1c1c1] px-2 mb-4"
>
<el-icon><DataBoard /></el-icon>
<p>组件一</p>
</div>
<div
class="basis-2/5 flex justify-between items-center border border-solid border-[#c1c1c1] px-2 mb-4"
>
<el-icon><DataBoard /></el-icon>
<p>组件一</p>
</div>
</div>
</el-collapse-item>
<el-collapse-item title="基础字段" name="JCZD">
<div class="flex flex-wrap justify-between content-center px-2">
<div
class="basis-2/5 flex justify-between items-center border border-solid border-[#c1c1c1] px-2 mb-4"
>
<el-icon><DataBoard /></el-icon>
<p>组件一</p>
</div>
<div
class="basis-2/5 flex justify-between items-center border border-solid border-[#c1c1c1] px-2 mb-4"
>
<el-icon><DataBoard /></el-icon>
<p>组件一</p>
</div>
</div>
</el-collapse-item>
</el-collapse>
</div>
</el-tab-pane>
</el-tabs>
<div></div>
</section>
</template>
<style lang="scss" scoped>
section {
:deep(.el-tabs) {
.el-tabs__nav-wrap {
padding-left: 8px;
}
}
}
</style>

@ -0,0 +1,5 @@
<script setup lang="ts"></script>
<template>
<section></section>
</template>

@ -0,0 +1,17 @@
<script setup lang="ts"></script>
<template>
<section class="h-[38px] flex justify-between items-center">
<div></div>
<div>
<el-button type="danger" text size="small">清空</el-button>
<el-button type="primary" text size="small">导出JSON</el-button>
</div>
</section>
</template>
<style lang="scss" scoped>
section {
border-bottom: 2px solid #e4e7ed;
}
</style>

@ -0,0 +1,37 @@
<script setup lang="ts">
import { ref } from 'vue'
import componentConfig from '@/components/componentConfig.vue'
import globalConfig from '@/components/globalConfig.vue'
import DataSource from '@/components/DataSource.vue'
const tabsActive = ref('ZJSZ')
const componentMap = {
ZJSZ: componentConfig,
QJSZ: globalConfig,
SJY: DataSource,
}
</script>
<template>
<section>
<el-tabs v-model="tabsActive">
<el-tab-pane label="组件设置" name="ZJSZ"> </el-tab-pane>
<el-tab-pane label="全局设置" name="QJSZ"> </el-tab-pane>
<el-tab-pane label="数据源" name="SJY"> </el-tab-pane>
<div class="px-2">
<component :is="componentMap[tabsActive as keyof typeof componentMap]" />
</div>
</el-tabs>
</section>
</template>
<style lang="scss" scoped>
section {
:deep(.el-tabs) {
.el-tabs__nav-wrap {
padding-left: 8px;
}
}
}
</style>

@ -0,0 +1,7 @@
<script setup lang="ts"></script>
<template>
<main>
<h1>Melon</h1>
</main>
</template>

@ -0,0 +1,8 @@
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],
theme: {
extend: {},
},
plugins: [],
}

@ -0,0 +1,12 @@
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"paths": {
"@/*": ["./src/*"]
}
}
}

@ -0,0 +1,14 @@
{
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.vitest.json"
}
]
}

@ -0,0 +1,19 @@
{
"extends": "@tsconfig/node22/tsconfig.json",
"include": [
"vite.config.*",
"vitest.config.*",
"cypress.config.*",
"nightwatch.conf.*",
"playwright.config.*",
"eslint.config.*"
],
"compilerOptions": {
"noEmit": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"module": "ESNext",
"moduleResolution": "Bundler",
"types": ["node"]
}
}

@ -0,0 +1,11 @@
{
"extends": "./tsconfig.app.json",
"include": ["src/**/__tests__/*", "env.d.ts"],
"exclude": [],
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
"lib": [],
"types": ["node", "jsdom"]
}
}

@ -0,0 +1,18 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
vueJsx(),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
},
})

@ -0,0 +1,14 @@
import { fileURLToPath } from 'node:url'
import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
import viteConfig from './vite.config'
export default mergeConfig(
viteConfig,
defineConfig({
test: {
environment: 'jsdom',
exclude: [...configDefaults.exclude, 'e2e/**'],
root: fileURLToPath(new URL('./', import.meta.url)),
},
}),
)
Loading…
Cancel
Save