Skip to content
This repository was archived by the owner on Nov 6, 2023. It is now read-only.

Commit 1e0ffe4

Browse files
EEParkerEEParker
committed
modify quasar project to typescript
1 parent 0f51d8a commit 1e0ffe4

File tree

13 files changed

+691
-191
lines changed

13 files changed

+691
-191
lines changed

‎samples/QuasarCliSample/ClientApp/package-lock.json‎

Lines changed: 469 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎samples/QuasarCliSample/ClientApp/package.json‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,22 @@
1010
"test": "echo \"No test specified\" && exit 0"
1111
},
1212
"dependencies": {
13-
"@quasar/extras": "^1.0.0",
14-
"quasar": "^1.0.0"
13+
"@quasar/extras": "^1.2.0",
14+
"axios": "^0.19.0",
15+
"quasar": "^1.0.5",
16+
"vue-class-component": "^7.1.0",
17+
"vue-property-decorator": "^8.2.1",
18+
"vuex": "^3.1.1",
19+
"vuex-class": "^0.3.2",
20+
"vuex-module-decorators": "^0.9.9"
1521
},
1622
"devDependencies": {
17-
"@quasar/app": "^1.0.0"
23+
"@quasar/app": "^1.0.4",
24+
"@types/node": "^12.6.9",
25+
"pug": "^2.0.4",
26+
"pug-plain-loader": "^1.0.0",
27+
"ts-loader": "^6.0.4",
28+
"typescript": "^3.5.3"
1829
},
1930
"engines": {
2031
"node": ">= 8.9.0",

‎samples/QuasarCliSample/ClientApp/quasar.conf.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,32 @@
11
// Configuration for your app
22
// https://quasar.dev/quasar-cli/quasar-conf-js
33

4+
const path = require('path')
5+
6+
// Configuration for your app
7+
function extendWebpackAliases(cfg) {
8+
cfg.resolve.alias['~'] = __dirname;
9+
cfg.resolve.alias['@'] = path.resolve(__dirname, 'src');
10+
}
11+
12+
function extendWebpackTypescript(cfg) {
13+
// added the type-script support
14+
cfg.resolve.extensions.push('.ts');
15+
16+
cfg.module.rules.push({
17+
test: /\.(tsx?)$/,
18+
loader: 'ts-loader',
19+
options: { appendTsSuffixTo: [/\.vue$/] }
20+
});
21+
};
22+
23+
function extendWebpackPug(cfg) {
24+
cfg.module.rules.push({
25+
test: /\.pug$/,
26+
loader: 'pug-plain-loader'
27+
});
28+
}
29+
430
module.exports = function (ctx) {
531
return {
632
// app boot file (/src/boot)
@@ -65,7 +91,11 @@ module.exports = function (ctx) {
6591
// gzip: true,
6692
// analyze: true,
6793
// extractCSS: false,
94+
extractCSS: true,
6895
extendWebpack (cfg) {
96+
extendWebpackAliases(cfg);
97+
extendWebpackTypescript(cfg);
98+
extendWebpackPug(cfg);
6999
}
70100
},
71101

‎samples/QuasarCliSample/ClientApp/src/App.vue‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
1-
<template>
2-
<div id="q-app">
3-
<router-view />
4-
</div>
1+
<template lang="pug">
2+
div(id="q-app")
3+
router-view
54
</template>
65

7-
<script>
8-
export default {
9-
name: 'App'
6+
<script lang="ts">
7+
import { Component, Vue} from 'vue-property-decorator';
8+
@Component
9+
export default class App extends Vue {
10+
1011
}
1112
</script>
1213

13-
<style>
14+
<style lang="stylus">
15+
1416
</style>

‎samples/QuasarCliSample/ClientApp/src/layouts/MyLayout.vue‎

Lines changed: 58 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,65 @@
1-
<template>
2-
<q-layout view="lHh Lpr lFf">
3-
<q-header elevated>
4-
<q-toolbar>
5-
<q-btn
6-
flat
7-
dense
8-
round
9-
@click="leftDrawerOpen = !leftDrawerOpen"
10-
aria-label="Menu"
11-
>
12-
<q-icon name="menu" />
13-
</q-btn>
14-
15-
<q-toolbar-title>
16-
Quasar App
17-
</q-toolbar-title>
18-
19-
<div>Quasar v{{ $q.version }}</div>
20-
</q-toolbar>
21-
</q-header>
22-
23-
<q-drawer
24-
v-model="leftDrawerOpen"
25-
bordered
26-
content-class="bg-grey-2"
27-
>
28-
<q-list>
29-
<q-item-label header>Essential Links</q-item-label>
30-
<q-item clickable tag="a" target="_blank" href="https://quasar.dev">
31-
<q-item-section avatar>
32-
<q-icon name="school" />
33-
</q-item-section>
34-
<q-item-section>
35-
<q-item-label>Docs</q-item-label>
36-
<q-item-label caption>quasar.dev</q-item-label>
37-
</q-item-section>
38-
</q-item>
39-
<q-item clickable tag="a" target="_blank" href="https://github.quasar.dev">
40-
<q-item-section avatar>
41-
<q-icon name="code" />
42-
</q-item-section>
43-
<q-item-section>
44-
<q-item-label>Github</q-item-label>
45-
<q-item-label caption>github.com/quasarframework</q-item-label>
46-
</q-item-section>
47-
</q-item>
48-
<q-item clickable tag="a" target="_blank" href="https://chat.quasar.dev">
49-
<q-item-section avatar>
50-
<q-icon name="chat" />
51-
</q-item-section>
52-
<q-item-section>
53-
<q-item-label>Discord Chat Channel</q-item-label>
54-
<q-item-label caption>chat.quasar.dev</q-item-label>
55-
</q-item-section>
56-
</q-item>
57-
<q-item clickable tag="a" target="_blank" href="https://forum.quasar.dev">
58-
<q-item-section avatar>
59-
<q-icon name="record_voice_over" />
60-
</q-item-section>
61-
<q-item-section>
62-
<q-item-label>Forum</q-item-label>
63-
<q-item-label caption>forum.quasar.dev</q-item-label>
64-
</q-item-section>
65-
</q-item>
66-
<q-item clickable tag="a" target="_blank" href="https://twitter.quasar.dev">
67-
<q-item-section avatar>
68-
<q-icon name="rss_feed" />
69-
</q-item-section>
70-
<q-item-section>
71-
<q-item-label>Twitter</q-item-label>
72-
<q-item-label caption>@quasarframework</q-item-label>
73-
</q-item-section>
74-
</q-item>
75-
<q-item clickable tag="a" target="_blank" href="https://facebook.quasar.dev">
76-
<q-item-section avatar>
77-
<q-icon name="public" />
78-
</q-item-section>
79-
<q-item-section>
80-
<q-item-label>Facebook</q-item-label>
81-
<q-item-label caption>@QuasarFramework</q-item-label>
82-
</q-item-section>
83-
</q-item>
84-
</q-list>
85-
</q-drawer>
86-
87-
<q-page-container>
88-
<router-view />
89-
</q-page-container>
90-
</q-layout>
1+
<template lang="pug">
2+
q-layout(view='lHh Lpr lFf')
3+
q-header(elevated='')
4+
q-toolbar
5+
q-btn(flat='', dense='', round='', @click='leftDrawerOpen = !leftDrawerOpen', aria-label='Menu')
6+
q-icon(name='menu')
7+
q-toolbar-title
8+
| Quasar App
9+
div Quasar v{{ $q.version }}
10+
q-drawer(v-model='leftDrawerOpen', bordered='', content-class='bg-grey-2')
11+
q-list
12+
q-item-label(header='') Essential Links
13+
q-item(clickable='', tag='a', target='_blank', href='https://quasar.dev')
14+
q-item-section(avatar='')
15+
q-icon(name='school')
16+
q-item-section
17+
q-item-label Docs
18+
q-item-label(caption='') quasar.dev
19+
q-item(clickable='', tag='a', target='_blank', href='https://github.quasar.dev')
20+
q-item-section(avatar='')
21+
q-icon(name='code')
22+
q-item-section
23+
q-item-label Github
24+
q-item-label(caption='') github.com/quasarframework
25+
q-item(clickable='', tag='a', target='_blank', href='https://chat.quasar.dev')
26+
q-item-section(avatar='')
27+
q-icon(name='chat')
28+
q-item-section
29+
q-item-label Discord Chat Channel
30+
q-item-label(caption='') chat.quasar.dev
31+
q-item(clickable='', tag='a', target='_blank', href='https://forum.quasar.dev')
32+
q-item-section(avatar='')
33+
q-icon(name='record_voice_over')
34+
q-item-section
35+
q-item-label Forum
36+
q-item-label(caption='') forum.quasar.dev
37+
q-item(clickable='', tag='a', target='_blank', href='https://twitter.quasar.dev')
38+
q-item-section(avatar='')
39+
q-icon(name='rss_feed')
40+
q-item-section
41+
q-item-label Twitter
42+
q-item-label(caption='') @quasarframework
43+
q-item(clickable='', tag='a', target='_blank', href='https://facebook.quasar.dev')
44+
q-item-section(avatar='')
45+
q-icon(name='public')
46+
q-item-section
47+
q-item-label Facebook
48+
q-item-label(caption='') @QuasarFramework
49+
q-page-container
50+
router-view
9151
</template>
9252

93-
<script>
94-
import { openURL } from 'quasar'
53+
<script lang="ts">
54+
import { openURL } from 'quasar';
55+
import { Component, Vue} from 'vue-property-decorator';
9556
96-
export default {
97-
name: 'MyLayout',
98-
data () {
99-
return {
100-
leftDrawerOpen: this.$q.platform.is.desktop
101-
}
102-
},
103-
methods: {
104-
openURL
105-
}
57+
@Component
58+
export default class MyLayout extends Vue {
59+
private leftDrawerOpen: boolean = this.$q.platform.is.desktop;
60+
private openUrl = (url: any) => { openURL(url); }
10661
}
10762
</script>
10863

109-
<style>
64+
<style lang="stylus">
11065
</style>

‎samples/QuasarCliSample/ClientApp/src/pages/Error404.vue‎

Lines changed: 14 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,18 @@
1-
<template>
2-
<div class="fixed-center text-center">
3-
<p>
4-
<img
5-
src="~assets/sad.svg"
6-
style="width:30vw;max-width:150px;"
7-
>
8-
</p>
9-
<p class="text-faded">Sorry, nothing here...<strong>(404)</strong></p>
10-
<q-btn
11-
color="secondary"
12-
style="width:200px;"
13-
@click="$router.push('/')"
14-
>Go back</q-btn>
15-
</div>
1+
<template lang="pug">
2+
.fixed-center.text-center
3+
p
4+
img(src='~assets/sad.svg', style='width:30vw;max-width:150px;')
5+
p.text-faded
6+
| Sorry, nothing here...
7+
strong (404)
8+
q-btn(color='secondary', style='width:200px;', @click="$router.push('/')") Go back
169
</template>
1710

18-
<script>
19-
export default {
20-
name: 'Error404'
11+
<script lang="ts">
12+
import { Component, Vue} from 'vue-property-decorator';
13+
14+
@Component
15+
export default class Error404 extends Vue {
16+
2117
}
2218
</script>

‎samples/QuasarCliSample/ClientApp/src/pages/Index.vue‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
<template>
2-
<q-page class="flex flex-center">
3-
<img alt="Quasar logo" src="~assets/quasar-logo-full.svg">
4-
</q-page>
1+
<template lang="pug">
2+
q-page.flex.flex-center
3+
img(alt='Quasar logo' src='~assets/quasar-logo-full.svg')
54
</template>
65

7-
<style>
8-
</style>
6+
<script lang="ts">
7+
import { Component, Vue} from 'vue-property-decorator';
8+
9+
@Component
10+
export default class PageIndex extends Vue {
911
10-
<script>
11-
export default {
12-
name: 'PageIndex'
1312
}
1413
</script>
14+

‎samples/QuasarCliSample/ClientApp/src/router/index.js‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

‎samples/QuasarCliSample/ClientApp/src/router/index.ts‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import Vue from 'vue'
2+
import VueRouter, { RouterOptions } from 'vue-router'
3+
4+
import routes from './routes'
5+
6+
Vue.use(VueRouter)
7+
8+
/*
9+
* If not building with SSR mode, you can
10+
* directly export the Router instantiation
11+
*/
12+
const router = new VueRouter({
13+
scrollBehavior: () => ({ x: 0, y: 0 }),
14+
routes,
15+
16+
// Leave these as is and change from quasar.conf.js instead!
17+
// quasar.conf.js -> build -> vueRouterMode
18+
// quasar.conf.js -> build -> publicPath
19+
mode: process.env.VUE_ROUTER_MODE,
20+
base: process.env.VUE_ROUTER_BASE
21+
} as RouterOptions);
22+
23+
export default router;

‎samples/QuasarCliSample/ClientApp/src/router/routes.js‎

Lines changed: 0 additions & 20 deletions
This file was deleted.

0 commit comments

Comments
 (0)