viewlogic 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +519 -0
- package/dist/viewlogic-router.js +2476 -0
- package/dist/viewlogic-router.js.map +7 -0
- package/dist/viewlogic-router.min.js +53 -0
- package/dist/viewlogic-router.min.js.map +7 -0
- package/dist/viewlogic-router.umd.js +120 -0
- package/package.json +85 -0
- package/src/core/ComponentLoader.js +182 -0
- package/src/core/ErrorHandler.js +331 -0
- package/src/core/RouteLoader.js +368 -0
- package/src/plugins/AuthManager.js +505 -0
- package/src/plugins/CacheManager.js +352 -0
- package/src/plugins/I18nManager.js +507 -0
- package/src/plugins/QueryManager.js +402 -0
- package/src/viewlogic-router.js +465 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 hopegiver
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,519 @@
|
|
|
1
|
+
# ViewLogic Router
|
|
2
|
+
|
|
3
|
+
<p align="center">
|
|
4
|
+
<a href="https://github.com/hopegiver/viewlogic">
|
|
5
|
+
<img src="https://img.shields.io/npm/v/viewlogic.svg" alt="npm version">
|
|
6
|
+
</a>
|
|
7
|
+
<a href="https://github.com/hopegiver/viewlogic/blob/main/LICENSE">
|
|
8
|
+
<img src="https://img.shields.io/npm/l/viewlogic.svg" alt="license">
|
|
9
|
+
</a>
|
|
10
|
+
<a href="https://github.com/hopegiver/viewlogic">
|
|
11
|
+
<img src="https://img.shields.io/npm/dm/viewlogic.svg" alt="downloads">
|
|
12
|
+
</a>
|
|
13
|
+
</p>
|
|
14
|
+
|
|
15
|
+
> A revolutionary Vue 3 routing system with clear separation of View and Logic, enabling real-time development without build steps
|
|
16
|
+
|
|
17
|
+
## 🎯 Core Philosophy: View-Logic Separation
|
|
18
|
+
|
|
19
|
+
ViewLogic Router revolutionizes Vue development by clearly separating **View** (presentation) from **Logic** (business logic), making your code more maintainable, testable, and scalable.
|
|
20
|
+
|
|
21
|
+
## ✨ Features
|
|
22
|
+
|
|
23
|
+
- 🎭 **View-Logic Separation** - Clear separation between presentation and business logic
|
|
24
|
+
- 🚀 **Zero Build Development** - Work in real-time without any build step in development mode
|
|
25
|
+
- ⚡ **Optimized Production** - Pre-built individual route bundles for lightning-fast production
|
|
26
|
+
- 📁 **Intuitive Structure** - Organized folder structure for views, logic, styles, layouts, and components
|
|
27
|
+
- 🔄 **Hot Development** - See changes instantly without compilation
|
|
28
|
+
- 📦 **Smart Production Build** - Each route becomes an optimized JavaScript bundle
|
|
29
|
+
- 🛠️ **Built-in Components** - Preloaded UI components
|
|
30
|
+
- 🌐 **i18n Ready** - Built-in internationalization support
|
|
31
|
+
- 🔐 **Authentication** - Built-in auth management system
|
|
32
|
+
- 💾 **Smart Caching** - Intelligent route and component caching
|
|
33
|
+
|
|
34
|
+
## 📦 Installation
|
|
35
|
+
|
|
36
|
+
```bash
|
|
37
|
+
npm install viewlogic
|
|
38
|
+
# or
|
|
39
|
+
yarn add viewlogic
|
|
40
|
+
# or
|
|
41
|
+
pnpm add viewlogic
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## 🚀 Quick Start
|
|
45
|
+
|
|
46
|
+
### Development Mode (No Build Required!)
|
|
47
|
+
|
|
48
|
+
```html
|
|
49
|
+
<!DOCTYPE html>
|
|
50
|
+
<html>
|
|
51
|
+
<head>
|
|
52
|
+
<meta charset="UTF-8">
|
|
53
|
+
<title>My ViewLogic App - Development</title>
|
|
54
|
+
<link rel="stylesheet" href="/css/base.css">
|
|
55
|
+
</head>
|
|
56
|
+
<body>
|
|
57
|
+
<div id="app"></div>
|
|
58
|
+
|
|
59
|
+
<!-- Vue 3 (development version) -->
|
|
60
|
+
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
61
|
+
<script src="https://cdn.jsdelivr.net/npm/viewlogic/dist/viewlogic-router.umd.js"></script>
|
|
62
|
+
|
|
63
|
+
<script>
|
|
64
|
+
// Development mode - loads files directly from src/
|
|
65
|
+
ViewLogicRouter({
|
|
66
|
+
environment: 'development',
|
|
67
|
+
}).then(router => {
|
|
68
|
+
console.log('Development router ready!');
|
|
69
|
+
// Router automatically combines view + logic + style on the fly
|
|
70
|
+
});
|
|
71
|
+
</script>
|
|
72
|
+
</body>
|
|
73
|
+
</html>
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
### Production Mode (Optimized Bundles)
|
|
77
|
+
|
|
78
|
+
```html
|
|
79
|
+
<!DOCTYPE html>
|
|
80
|
+
<html>
|
|
81
|
+
<head>
|
|
82
|
+
<meta charset="UTF-8">
|
|
83
|
+
<title>My ViewLogic App</title>
|
|
84
|
+
<link rel="stylesheet" href="/css/base.css">
|
|
85
|
+
</head>
|
|
86
|
+
<body>
|
|
87
|
+
<div id="app"></div>
|
|
88
|
+
|
|
89
|
+
<!-- Vue 3 (production version) -->
|
|
90
|
+
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
|
|
91
|
+
<script src="https://cdn.jsdelivr.net/npm/viewlogic/dist/viewlogic-router.min.js"></script>
|
|
92
|
+
|
|
93
|
+
<script>
|
|
94
|
+
// Production mode - loads pre-built bundles from routes/
|
|
95
|
+
ViewLogicRouter({
|
|
96
|
+
environment: 'production',
|
|
97
|
+
useI18n: true,
|
|
98
|
+
logLevel: 'error' // Only log errors
|
|
99
|
+
}).then(router => {
|
|
100
|
+
console.log('Production router ready!');
|
|
101
|
+
});
|
|
102
|
+
</script>
|
|
103
|
+
</body>
|
|
104
|
+
</html>
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
### ES6 Module Usage
|
|
108
|
+
|
|
109
|
+
```javascript
|
|
110
|
+
import { ViewLogicRouter } from 'js/viewlogic-router.js';
|
|
111
|
+
|
|
112
|
+
// Create router instance
|
|
113
|
+
const router = new ViewLogicRouter({
|
|
114
|
+
environment: 'development'
|
|
115
|
+
});
|
|
116
|
+
|
|
117
|
+
// Router will automatically initialize and handle routing
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
### CommonJS/Node.js Usage
|
|
121
|
+
|
|
122
|
+
```javascript
|
|
123
|
+
const { createRouter } = require('js/viewlogic-router.umd.js');
|
|
124
|
+
|
|
125
|
+
createRouter({
|
|
126
|
+
environment: 'development'
|
|
127
|
+
}).then(router => {
|
|
128
|
+
console.log('Router ready');
|
|
129
|
+
});
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
## 📁 Project Structure
|
|
133
|
+
|
|
134
|
+
### Development Mode Structure
|
|
135
|
+
```
|
|
136
|
+
my-app/
|
|
137
|
+
├── index.html
|
|
138
|
+
├── i18n/ # Language files (top-level)
|
|
139
|
+
│ ├── ko.json
|
|
140
|
+
│ └── en.json
|
|
141
|
+
├── css/ # Global styles
|
|
142
|
+
│ └── base.css # Base styles for entire site
|
|
143
|
+
├── js/ # System files (optional, can use CDN)
|
|
144
|
+
│ ├── viewlogic-router.js
|
|
145
|
+
│ ├── viewlogic-router.min.js
|
|
146
|
+
│ └── viewlogic-router.umd.js
|
|
147
|
+
├── src/ # Source files (not deployed)
|
|
148
|
+
│ ├── views/ # View templates (HTML)
|
|
149
|
+
│ │ ├── home.html
|
|
150
|
+
│ │ ├── about.html
|
|
151
|
+
│ │ └── products/
|
|
152
|
+
│ │ ├── list.html
|
|
153
|
+
│ │ └── detail.html
|
|
154
|
+
│ ├── logic/ # Business logic (JavaScript)
|
|
155
|
+
│ │ ├── home.js
|
|
156
|
+
│ │ ├── about.js
|
|
157
|
+
│ │ └── products/
|
|
158
|
+
│ │ ├── list.js
|
|
159
|
+
│ │ └── detail.js
|
|
160
|
+
│ ├── styles/ # Page-specific CSS
|
|
161
|
+
│ │ ├── home.css
|
|
162
|
+
│ │ ├── about.css
|
|
163
|
+
│ │ └── products/
|
|
164
|
+
│ │ ├── list.css
|
|
165
|
+
│ │ └── detail.css
|
|
166
|
+
│ ├── layouts/ # Layout templates
|
|
167
|
+
│ │ ├── default.html
|
|
168
|
+
│ │ └── admin.html
|
|
169
|
+
│ └── components/ # Reusable components
|
|
170
|
+
│ ├── Button.js
|
|
171
|
+
│ ├── Modal.js
|
|
172
|
+
│ └── Card.js
|
|
173
|
+
└── package.json
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
### Production Deployment Structure
|
|
177
|
+
```
|
|
178
|
+
my-app/
|
|
179
|
+
├── index.html
|
|
180
|
+
├── i18n/ # Language files
|
|
181
|
+
│ ├── ko.json
|
|
182
|
+
│ └── en.json
|
|
183
|
+
├── css/ # Global styles
|
|
184
|
+
│ └── base.css
|
|
185
|
+
├── js/ # Router system (or use CDN)
|
|
186
|
+
│ ├── viewlogic-router.umd.js
|
|
187
|
+
│ └── viewlogic-router.min.js
|
|
188
|
+
├── routes/ # Built & optimized route bundles
|
|
189
|
+
│ ├── home.js # Combined view + logic + style
|
|
190
|
+
│ ├── about.js
|
|
191
|
+
│ └── products/
|
|
192
|
+
│ ├── list.js
|
|
193
|
+
│ └── detail.js
|
|
194
|
+
└── assets/ # Static assets
|
|
195
|
+
├── images/
|
|
196
|
+
└── fonts/
|
|
197
|
+
|
|
198
|
+
Note: src/ folder is excluded from production deployment
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
## 🔧 Configuration Options
|
|
202
|
+
|
|
203
|
+
```javascript
|
|
204
|
+
const config = {
|
|
205
|
+
// Basic Configuration
|
|
206
|
+
basePath: '/src', // Base path for all resources
|
|
207
|
+
mode: 'hash', // 'hash' or 'history'
|
|
208
|
+
environment: 'development', // 'development' or 'production'
|
|
209
|
+
|
|
210
|
+
// Routing
|
|
211
|
+
routesPath: '/routes', // Routes directory path
|
|
212
|
+
defaultLayout: 'default', // Default layout name
|
|
213
|
+
useLayout: true, // Enable layouts
|
|
214
|
+
|
|
215
|
+
// Caching
|
|
216
|
+
cacheMode: 'memory', // 'memory' or 'session' or 'none'
|
|
217
|
+
cacheTTL: 300000, // Cache TTL in milliseconds
|
|
218
|
+
maxCacheSize: 50, // Maximum cache entries
|
|
219
|
+
|
|
220
|
+
// Components
|
|
221
|
+
useComponents: true, // Enable built-in components
|
|
222
|
+
componentNames: [ // Components to preload
|
|
223
|
+
'Button', 'Modal', 'Card', 'Toast',
|
|
224
|
+
'Input', 'Tabs', 'Checkbox', 'Alert'
|
|
225
|
+
],
|
|
226
|
+
|
|
227
|
+
// Internationalization
|
|
228
|
+
useI18n: true, // Enable i18n
|
|
229
|
+
defaultLanguage: 'ko', // Default language
|
|
230
|
+
|
|
231
|
+
// Authentication
|
|
232
|
+
authEnabled: false, // Enable authentication
|
|
233
|
+
loginRoute: 'login', // Login route name
|
|
234
|
+
protectedRoutes: [], // Protected route names
|
|
235
|
+
publicRoutes: ['login', 'register', 'home'],
|
|
236
|
+
authStorage: 'cookie', // 'cookie' or 'localStorage'
|
|
237
|
+
|
|
238
|
+
// Security
|
|
239
|
+
enableParameterValidation: true,
|
|
240
|
+
maxParameterLength: 1000,
|
|
241
|
+
maxParameterCount: 50,
|
|
242
|
+
|
|
243
|
+
// Development
|
|
244
|
+
logLevel: 'info', // 'debug', 'info', 'warn', 'error'
|
|
245
|
+
enableErrorReporting: true
|
|
246
|
+
};
|
|
247
|
+
```
|
|
248
|
+
|
|
249
|
+
## 📖 API Reference
|
|
250
|
+
|
|
251
|
+
### Router Instance Methods
|
|
252
|
+
|
|
253
|
+
```javascript
|
|
254
|
+
// Navigation
|
|
255
|
+
router.navigateTo('routeName', { param: 'value' });
|
|
256
|
+
router.navigateTo({ route: 'products', params: { id: 123 } });
|
|
257
|
+
|
|
258
|
+
// Get current route
|
|
259
|
+
const currentRoute = router.getCurrentRoute();
|
|
260
|
+
|
|
261
|
+
// Query parameters
|
|
262
|
+
router.queryManager.setQueryParams({ page: 2, sort: 'asc' });
|
|
263
|
+
const params = router.queryManager.getQueryParams();
|
|
264
|
+
router.queryManager.removeQueryParams(['sort']);
|
|
265
|
+
|
|
266
|
+
// Authentication (if enabled)
|
|
267
|
+
router.authManager.login(token);
|
|
268
|
+
router.authManager.logout();
|
|
269
|
+
const isAuth = router.authManager.isAuthenticated();
|
|
270
|
+
|
|
271
|
+
// Internationalization (if enabled)
|
|
272
|
+
router.i18nManager.setLanguage('en');
|
|
273
|
+
const t = router.i18nManager.translate('welcome.message');
|
|
274
|
+
|
|
275
|
+
// Cache management
|
|
276
|
+
router.cacheManager.clearAll();
|
|
277
|
+
|
|
278
|
+
// Cleanup
|
|
279
|
+
router.destroy();
|
|
280
|
+
```
|
|
281
|
+
|
|
282
|
+
### Global Access
|
|
283
|
+
|
|
284
|
+
After initialization, the router is available globally:
|
|
285
|
+
|
|
286
|
+
```javascript
|
|
287
|
+
// UMD build automatically sets window.router
|
|
288
|
+
window.router.navigateTo('about');
|
|
289
|
+
|
|
290
|
+
// Also available as
|
|
291
|
+
window.createRouter(config);
|
|
292
|
+
window.ViewLogicRouter(config);
|
|
293
|
+
```
|
|
294
|
+
|
|
295
|
+
## 🎯 View-Logic Separation Example
|
|
296
|
+
|
|
297
|
+
### Development Mode (Separated Files)
|
|
298
|
+
|
|
299
|
+
#### View File (src/views/products/list.html)
|
|
300
|
+
```html
|
|
301
|
+
<div class="products-page">
|
|
302
|
+
<h1>{{ title }}</h1>
|
|
303
|
+
<div class="product-grid">
|
|
304
|
+
<div v-for="product in products" :key="product.id" class="product-card">
|
|
305
|
+
<img :src="product.image" :alt="product.name">
|
|
306
|
+
<h3>{{ product.name }}</h3>
|
|
307
|
+
<p class="price">{{ formatPrice(product.price) }}</p>
|
|
308
|
+
<button @click="viewDetail(product.id)">View Detail</button>
|
|
309
|
+
</div>
|
|
310
|
+
</div>
|
|
311
|
+
</div>
|
|
312
|
+
```
|
|
313
|
+
|
|
314
|
+
#### Logic File (src/logic/products/list.js)
|
|
315
|
+
```javascript
|
|
316
|
+
export default {
|
|
317
|
+
name: 'ProductsList',
|
|
318
|
+
data() {
|
|
319
|
+
return {
|
|
320
|
+
title: 'Our Products',
|
|
321
|
+
products: []
|
|
322
|
+
};
|
|
323
|
+
},
|
|
324
|
+
async mounted() {
|
|
325
|
+
this.products = await this.loadProducts();
|
|
326
|
+
},
|
|
327
|
+
methods: {
|
|
328
|
+
async loadProducts() {
|
|
329
|
+
const response = await fetch('/api/products');
|
|
330
|
+
return response.json();
|
|
331
|
+
},
|
|
332
|
+
formatPrice(price) {
|
|
333
|
+
return new Intl.NumberFormat('ko-KR', {
|
|
334
|
+
style: 'currency',
|
|
335
|
+
currency: 'KRW'
|
|
336
|
+
}).format(price);
|
|
337
|
+
},
|
|
338
|
+
viewDetail(id) {
|
|
339
|
+
this.$router.navigateTo('products/detail', { id });
|
|
340
|
+
}
|
|
341
|
+
}
|
|
342
|
+
};
|
|
343
|
+
```
|
|
344
|
+
|
|
345
|
+
#### Style File (src/styles/products/list.css)
|
|
346
|
+
```css
|
|
347
|
+
.products-page {
|
|
348
|
+
padding: 20px;
|
|
349
|
+
}
|
|
350
|
+
|
|
351
|
+
.product-grid {
|
|
352
|
+
display: grid;
|
|
353
|
+
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
|
354
|
+
gap: 20px;
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
.product-card {
|
|
358
|
+
border: 1px solid #e0e0e0;
|
|
359
|
+
border-radius: 8px;
|
|
360
|
+
padding: 15px;
|
|
361
|
+
transition: transform 0.2s;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
.product-card:hover {
|
|
365
|
+
transform: translateY(-2px);
|
|
366
|
+
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
367
|
+
}
|
|
368
|
+
|
|
369
|
+
.price {
|
|
370
|
+
font-weight: bold;
|
|
371
|
+
color: #2196F3;
|
|
372
|
+
}
|
|
373
|
+
```
|
|
374
|
+
|
|
375
|
+
### Production Mode (Built Bundle)
|
|
376
|
+
|
|
377
|
+
After build, these files are automatically combined into a single optimized bundle:
|
|
378
|
+
|
|
379
|
+
```javascript
|
|
380
|
+
// routes/products/list.js (Auto-generated)
|
|
381
|
+
export default {
|
|
382
|
+
name: 'ProductsList',
|
|
383
|
+
template: `<div class="products-page">...`, // View injected
|
|
384
|
+
_style: `.products-page { ... }`, // Style injected
|
|
385
|
+
// ... logic code
|
|
386
|
+
}
|
|
387
|
+
```
|
|
388
|
+
|
|
389
|
+
## 🔄 Development vs Production Mode
|
|
390
|
+
|
|
391
|
+
### Development Mode Benefits
|
|
392
|
+
- **No Build Required**: Edit files and refresh browser to see changes
|
|
393
|
+
- **Clear Separation**: View, Logic, and Style in separate files for better organization
|
|
394
|
+
- **Easy Debugging**: Source maps and unminified code
|
|
395
|
+
- **Real-time Updates**: Changes reflect immediately without compilation
|
|
396
|
+
|
|
397
|
+
### Production Mode Benefits
|
|
398
|
+
- **Optimized Bundles**: Each route is a single, minified JavaScript file
|
|
399
|
+
- **Faster Loading**: Pre-built bundles eliminate compilation overhead
|
|
400
|
+
- **Reduced Requests**: Combined view + logic + style in one file
|
|
401
|
+
- **CDN Ready**: Individual route files can be cached and served from CDN
|
|
402
|
+
|
|
403
|
+
### Automatic Environment Detection
|
|
404
|
+
|
|
405
|
+
```javascript
|
|
406
|
+
// Development Mode (loads from src/)
|
|
407
|
+
ViewLogicRouter({
|
|
408
|
+
environment: 'development',
|
|
409
|
+
});
|
|
410
|
+
|
|
411
|
+
// Production Mode (loads from dist/routes/)
|
|
412
|
+
ViewLogicRouter({
|
|
413
|
+
environment: 'production',
|
|
414
|
+
});
|
|
415
|
+
```
|
|
416
|
+
|
|
417
|
+
## 🛡️ Error Handling
|
|
418
|
+
|
|
419
|
+
The router includes comprehensive error handling:
|
|
420
|
+
|
|
421
|
+
```javascript
|
|
422
|
+
// Global error handler
|
|
423
|
+
router.errorHandler.log('error', 'Custom error message');
|
|
424
|
+
|
|
425
|
+
// Route error handling
|
|
426
|
+
router.errorHandler.handleRouteError('routeName', error);
|
|
427
|
+
|
|
428
|
+
// 404 handling is automatic
|
|
429
|
+
```
|
|
430
|
+
|
|
431
|
+
## 🚀 Production Deployment
|
|
432
|
+
|
|
433
|
+
### 1. Build your routes for production:
|
|
434
|
+
```bash
|
|
435
|
+
npm run build
|
|
436
|
+
# This will:
|
|
437
|
+
# - Combine view + logic + style files from src/
|
|
438
|
+
# - Generate optimized route bundles in routes/ folder
|
|
439
|
+
# - Minify and optimize each route
|
|
440
|
+
# - Copy routes/ to root level for deployment
|
|
441
|
+
```
|
|
442
|
+
|
|
443
|
+
### 2. Deploy with production configuration:
|
|
444
|
+
```html
|
|
445
|
+
<!DOCTYPE html>
|
|
446
|
+
<html>
|
|
447
|
+
<head>
|
|
448
|
+
<title>My ViewLogic App</title>
|
|
449
|
+
<link rel="stylesheet" href="/css/base.css">
|
|
450
|
+
</head>
|
|
451
|
+
<body>
|
|
452
|
+
<div id="app"></div>
|
|
453
|
+
|
|
454
|
+
<!-- Vue 3 Production -->
|
|
455
|
+
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
|
|
456
|
+
|
|
457
|
+
<!-- ViewLogic Router from CDN -->
|
|
458
|
+
<script src="https://cdn.jsdelivr.net/npm/viewlogic/dist/viewlogic-router.umd.js"></script>
|
|
459
|
+
|
|
460
|
+
<script>
|
|
461
|
+
ViewLogicRouter({
|
|
462
|
+
environment: 'production',
|
|
463
|
+
basePath: '/', // Root path
|
|
464
|
+
routesPath: '/routes', // Routes folder at root level
|
|
465
|
+
i18nPath: '/i18n', // i18n folder at root level
|
|
466
|
+
cacheMode: 'session', // Enable session caching
|
|
467
|
+
useComponents: true,
|
|
468
|
+
useI18n: true
|
|
469
|
+
});
|
|
470
|
+
</script>
|
|
471
|
+
</body>
|
|
472
|
+
</html>
|
|
473
|
+
```
|
|
474
|
+
|
|
475
|
+
### 3. Production deployment structure:
|
|
476
|
+
```
|
|
477
|
+
production/
|
|
478
|
+
├── index.html
|
|
479
|
+
├── i18n/ # Language files
|
|
480
|
+
│ ├── ko.json
|
|
481
|
+
│ └── en.json
|
|
482
|
+
├── css/
|
|
483
|
+
│ └── base.css # Global styles
|
|
484
|
+
├── js/ # Optional (can use CDN instead)
|
|
485
|
+
│ ├── viewlogic-router.umd.js
|
|
486
|
+
│ └── viewlogic-router.min.js
|
|
487
|
+
├── routes/ # Built route bundles
|
|
488
|
+
│ ├── home.js # Bundled: view + logic + style
|
|
489
|
+
│ ├── about.js
|
|
490
|
+
│ └── products/
|
|
491
|
+
│ ├── list.js
|
|
492
|
+
│ └── detail.js
|
|
493
|
+
└── assets/
|
|
494
|
+
├── images/
|
|
495
|
+
└── fonts/
|
|
496
|
+
|
|
497
|
+
# Note: src/ folder is NOT deployed to production
|
|
498
|
+
```
|
|
499
|
+
|
|
500
|
+
## 🤝 Contributing
|
|
501
|
+
|
|
502
|
+
Contributions are welcome! Please feel free to submit a Pull Request.
|
|
503
|
+
|
|
504
|
+
## 📄 License
|
|
505
|
+
|
|
506
|
+
MIT License - see the [LICENSE](LICENSE) file for details.
|
|
507
|
+
|
|
508
|
+
## 🙏 Author
|
|
509
|
+
|
|
510
|
+
Created by [hopegiver](https://github.com/hopegiver)
|
|
511
|
+
|
|
512
|
+
## 📞 Support
|
|
513
|
+
|
|
514
|
+
- 🐛 Issues: [GitHub Issues](https://github.com/hopegiver/viewlogic/issues)
|
|
515
|
+
- 💬 Discussions: [GitHub Discussions](https://github.com/hopegiver/viewlogic/discussions)
|
|
516
|
+
|
|
517
|
+
---
|
|
518
|
+
|
|
519
|
+
<p align="center">Made with ❤️ for the Vue.js community</p>
|