🎨 重构用户端前端为vue开发，完善基础类和角色相关接口
This commit is contained in:
356
create-vue-app.sh
Executable file
356
create-vue-app.sh
Executable file
@@ -0,0 +1,356 @@
|
||||
#!/bin/bash
|
||||
|
||||
# 云酒馆 Vue 3 前台应用快速创建脚本
|
||||
|
||||
echo "🚀 开始创建 web-app-vue 项目..."
|
||||
|
||||
# 检查是否已存在
|
||||
if [ -d "web-app-vue" ]; then
|
||||
echo "❌ web-app-vue 目录已存在，请先删除或重命名"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
# 创建 Vue 项目
|
||||
echo "📦 创建 Vue 3 + TypeScript 项目..."
|
||||
npm create vite@latest web-app-vue -- --template vue-ts
|
||||
|
||||
# 进入项目目录
|
||||
cd web-app-vue
|
||||
|
||||
echo "📚 安装依赖..."
|
||||
npm install
|
||||
|
||||
# 安装 Element Plus
|
||||
echo "🎨 安装 Element Plus..."
|
||||
npm install element-plus
|
||||
|
||||
# 安装路由和状态管理
|
||||
echo "🛣️ 安装 Vue Router 和 Pinia..."
|
||||
npm install vue-router@4 pinia
|
||||
|
||||
# 安装 HTTP 客户端
|
||||
echo "🌐 安装 Axios..."
|
||||
npm install axios
|
||||
|
||||
# 安装工具库
|
||||
echo "🔧 安装工具库..."
|
||||
npm install @vueuse/core
|
||||
|
||||
# 安装开发依赖
|
||||
echo "🛠️ 安装开发依赖..."
|
||||
npm install -D sass
|
||||
npm install -D unplugin-vue-components unplugin-auto-import
|
||||
|
||||
# 创建目录结构
|
||||
echo "📂 创建项目目录结构..."
|
||||
mkdir -p src/api
|
||||
mkdir -p src/assets/styles
|
||||
mkdir -p src/components/common
|
||||
mkdir -p src/components/chat
|
||||
mkdir -p src/components/character
|
||||
mkdir -p src/components/settings
|
||||
mkdir -p src/composables
|
||||
mkdir -p src/layouts
|
||||
mkdir -p src/router
|
||||
mkdir -p src/stores
|
||||
mkdir -p src/types
|
||||
mkdir -p src/utils
|
||||
mkdir -p src/views/auth
|
||||
mkdir -p src/views/home
|
||||
mkdir -p src/views/character
|
||||
mkdir -p src/views/chat
|
||||
mkdir -p src/views/settings
|
||||
mkdir -p src/views/user
|
||||
|
||||
# 创建环境配置文件
|
||||
echo "⚙️ 创建环境配置..."
|
||||
cat > .env.development << 'EOF'
|
||||
# 开发环境配置
|
||||
VITE_API_BASE_URL=http://localhost:8888
|
||||
VITE_WS_URL=ws://localhost:8888
|
||||
EOF
|
||||
|
||||
cat > .env.production << 'EOF'
|
||||
# 生产环境配置
|
||||
VITE_API_BASE_URL=https://your-domain.com
|
||||
VITE_WS_URL=wss://your-domain.com
|
||||
EOF
|
||||
|
||||
# 创建 Vite 配置
|
||||
echo "⚙️ 配置 Vite..."
|
||||
cat > vite.config.ts << 'EOF'
|
||||
import { defineConfig } from 'vite'
|
||||
import vue from '@vitejs/plugin-vue'
|
||||
import { resolve } from 'path'
|
||||
import AutoImport from 'unplugin-auto-import/vite'
|
||||
import Components from 'unplugin-vue-components/vite'
|
||||
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [
|
||||
vue(),
|
||||
AutoImport({
|
||||
resolvers: [ElementPlusResolver()],
|
||||
imports: ['vue', 'vue-router', 'pinia'],
|
||||
dts: 'src/auto-imports.d.ts',
|
||||
}),
|
||||
Components({
|
||||
resolvers: [ElementPlusResolver()],
|
||||
dts: 'src/components.d.ts',
|
||||
}),
|
||||
],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': resolve(__dirname, 'src'),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
port: 3000,
|
||||
proxy: {
|
||||
'/app': {
|
||||
target: 'http://localhost:8888',
|
||||
changeOrigin: true,
|
||||
},
|
||||
'/api': {
|
||||
target: 'http://localhost:8888',
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
build: {
|
||||
outDir: 'dist',
|
||||
sourcemap: false,
|
||||
rollupOptions: {
|
||||
output: {
|
||||
manualChunks: {
|
||||
'element-plus': ['element-plus'],
|
||||
'vue-vendor': ['vue', 'vue-router', 'pinia'],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
EOF
|
||||
|
||||
# 创建 TypeScript 配置
|
||||
echo "⚙️ 配置 TypeScript..."
|
||||
cat > tsconfig.json << 'EOF'
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "preserve",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
|
||||
/* Path mapping */
|
||||
"baseUrl": ".",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
EOF
|
||||
|
||||
# 创建基础文件
|
||||
echo "📝 创建基础文件..."
|
||||
|
||||
# 创建 main.ts
|
||||
cat > src/main.ts << 'EOF'
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import ElementPlus from 'element-plus'
|
||||
import 'element-plus/dist/index.css'
|
||||
import 'element-plus/theme-chalk/dark/css-vars.css'
|
||||
import router from './router'
|
||||
import App from './App.vue'
|
||||
import './assets/styles/index.scss'
|
||||
|
||||
const app = createApp(App)
|
||||
const pinia = createPinia()
|
||||
|
||||
app.use(pinia)
|
||||
app.use(router)
|
||||
app.use(ElementPlus)
|
||||
|
||||
app.mount('#app')
|
||||
EOF
|
||||
|
||||
# 创建路由配置
|
||||
cat > src/router/index.ts << 'EOF'
|
||||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import type { RouteRecordRaw } from 'vue-router'
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/auth',
|
||||
name: 'Auth',
|
||||
component: () => import('@/layouts/AuthLayout.vue'),
|
||||
children: [
|
||||
{
|
||||
path: 'login',
|
||||
name: 'Login',
|
||||
component: () => import('@/views/auth/Login.vue'),
|
||||
},
|
||||
{
|
||||
path: 'register',
|
||||
name: 'Register',
|
||||
component: () => import('@/views/auth/Register.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
component: () => import('@/layouts/DefaultLayout.vue'),
|
||||
children: [
|
||||
{
|
||||
path: '',
|
||||
name: 'Home',
|
||||
component: () => import('@/views/home/Index.vue'),
|
||||
},
|
||||
{
|
||||
path: 'characters',
|
||||
name: 'Characters',
|
||||
component: () => import('@/views/character/List.vue'),
|
||||
},
|
||||
{
|
||||
path: 'chat',
|
||||
name: 'Chat',
|
||||
component: () => import('@/views/chat/Index.vue'),
|
||||
},
|
||||
{
|
||||
path: 'settings',
|
||||
name: 'Settings',
|
||||
component: () => import('@/views/settings/Index.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes,
|
||||
})
|
||||
|
||||
// 路由守卫
|
||||
router.beforeEach((to, from, next) => {
|
||||
const token = localStorage.getItem('st_access_token')
|
||||
|
||||
if (!token && !to.path.startsWith('/auth')) {
|
||||
next('/auth/login')
|
||||
} else if (token && to.path.startsWith('/auth')) {
|
||||
next('/')
|
||||
} else {
|
||||
next()
|
||||
}
|
||||
})
|
||||
|
||||
export default router
|
||||
EOF
|
||||
|
||||
# 创建全局样式
|
||||
cat > src/assets/styles/index.scss << 'EOF'
|
||||
/* 全局样式 */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', 'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
/* 自定义滚动条 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--el-fill-color-light);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--el-border-color-darker);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--el-border-color-dark);
|
||||
}
|
||||
EOF
|
||||
|
||||
# 创建 README
|
||||
cat > README.md << 'EOF'
|
||||
# 云酒馆前台应用 (Vue 3)
|
||||
|
||||
## 技术栈
|
||||
|
||||
- Vue 3 + TypeScript
|
||||
- Vite 5
|
||||
- Element Plus
|
||||
- Vue Router 4
|
||||
- Pinia
|
||||
- Axios
|
||||
|
||||
## 开发
|
||||
|
||||
```bash
|
||||
# 安装依赖
|
||||
npm install
|
||||
|
||||
# 启动开发服务器
|
||||
npm run dev
|
||||
|
||||
# 构建生产版本
|
||||
npm run build
|
||||
|
||||
# 预览生产构建
|
||||
npm run preview
|
||||
```
|
||||
|
||||
## 访问地址
|
||||
|
||||
- 开发环境: http://localhost:3000
|
||||
- API 代理: http://localhost:8888
|
||||
|
||||
## 项目结构
|
||||
|
||||
详见 `/docs/Vue重构方案.md`
|
||||
EOF
|
||||
|
||||
echo "✅ 项目创建完成！"
|
||||
echo ""
|
||||
echo "📖 下一步："
|
||||
echo " cd web-app-vue"
|
||||
echo " npm run dev"
|
||||
echo ""
|
||||
echo "🌐 访问地址："
|
||||
echo " http://localhost:3000"
|
||||
echo ""
|
||||
echo "📚 详细文档："
|
||||
echo " 请查看 docs/Vue重构方案.md"
|
||||
Reference in New Issue
Block a user