Skip to content

Commit 41f544d

Browse files
justinyoojustinyoo
committed
Add TypeScript conversion
1 parent a1b7a66 commit 41f544d

File tree

13 files changed

+222
-51
lines changed

13 files changed

+222
-51
lines changed

‎src/VueJsTsWebcamAspNetCoreSample/build/webpack.base.conf.js‎

Lines changed: 23 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ function resolve (dir) {
99

1010
module.exports = {
1111
entry: {
12-
app: './src/main.js'
12+
app: './src/main.ts'
1313
},
1414
output: {
1515
path: config.build.assetsRoot,
@@ -19,32 +19,41 @@ module.exports = {
1919
: config.dev.assetsPublicPath
2020
},
2121
resolve: {
22-
extensions: ['.js', '.vue', '.json'],
22+
extensions: ['.js', '.vue', '.json', '.ts'],
2323
alias: {
2424
'vue$': 'vue/dist/vue.esm.js',
2525
'@': resolve('src'),
26+
// 'vue-router$': 'vue-router/dist/vue-router.common.js'
2627
}
2728
},
2829
module: {
2930
rules: [
30-
{
31-
test: /\.(js|vue)$/,
32-
loader: 'eslint-loader',
33-
enforce: "pre",
34-
include: [resolve('src'), resolve('test')],
35-
options: {
36-
formatter: require('eslint-friendly-formatter')
37-
}
38-
},
31+
// {
32+
// test: /\.(js|vue)$/,
33+
// loader: 'eslint-loader',
34+
// enforce: 'pre',
35+
// include: [resolve('src'), resolve('test')],
36+
// options: {
37+
// formatter: require('eslint-friendly-formatter')
38+
// }
39+
// },
3940
{
4041
test: /\.vue$/,
4142
loader: 'vue-loader',
4243
options: vueLoaderConfig
4344
},
45+
// {
46+
// test: /\.js$/,
47+
// loader: 'babel-loader',
48+
// include: [resolve('src'), resolve('test')]
49+
// },
4450
{
45-
test: /\.js$/,
46-
loader: 'babel-loader',
47-
include: [resolve('src'), resolve('test')]
51+
test: /\.ts$/,
52+
loader: 'ts-loader',
53+
exclude: /node_modules/,
54+
options: {
55+
appendTsSuffixTo: [/\.vue$/]
56+
}
4857
},
4958
{
5059
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

‎src/VueJsTsWebcamAspNetCoreSample/package.json‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,9 @@
66
"private": true,
77
"scripts": {
88
"dev": "node build/dev-server.js",
9-
"build": "node build/build.js",
9+
"build": "npm run build:ts && npm run build:main",
10+
"build:ts": "tsc -p .",
11+
"build:main": "node build/build.js",
1012
"unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
1113
"e2e": "node test/e2e/runner.js",
1214
"test": "npm run unit && npm run e2e",
@@ -16,26 +18,32 @@
1618
"aspnet-webpack": "^1.0.28",
1719
"axios": "^0.15.3",
1820
"vue": "^2.2.1",
21+
"vue-class-component": "^5.0.0",
1922
"vue-router": "^2.2.0"
2023
},
2124
"devDependencies": {
2225
"autoprefixer": "^6.7.2",
2326
"babel-core": "^6.22.1",
2427
"babel-eslint": "^7.1.1",
2528
"babel-loader": "^6.2.10",
29+
"babel-plugin-istanbul": "^3.1.2",
2630
"babel-plugin-transform-runtime": "^6.22.0",
2731
"babel-preset-latest": "^6.22.0",
2832
"babel-preset-stage-2": "^6.22.0",
2933
"babel-register": "^6.22.0",
34+
"chai": "^3.5.0",
3035
"chalk": "^1.1.3",
36+
"chromedriver": "^2.27.2",
3137
"connect-history-api-fallback": "^1.3.0",
3238
"copy-webpack-plugin": "^4.0.1",
39+
"cross-env": "^3.1.4",
40+
"cross-spawn": "^5.0.1",
3341
"css-loader": "^0.26.1",
3442
"eslint": "^3.14.1",
43+
"eslint-config-standard": "^6.2.1",
3544
"eslint-friendly-formatter": "^2.0.7",
3645
"eslint-loader": "^1.6.1",
3746
"eslint-plugin-html": "^2.0.0",
38-
"eslint-config-standard": "^6.2.1",
3947
"eslint-plugin-promise": "^3.4.0",
4048
"eslint-plugin-standard": "^2.0.1",
4149
"eventsource-polyfill": "^0.9.6",
@@ -46,8 +54,7 @@
4654
"function-bind": "^1.1.0",
4755
"html-webpack-plugin": "^2.28.0",
4856
"http-proxy-middleware": "^0.17.3",
49-
"webpack-bundle-analyzer": "^2.2.1",
50-
"cross-env": "^3.1.4",
57+
"inject-loader": "^2.0.1",
5158
"karma": "^1.4.1",
5259
"karma-coverage": "^1.1.1",
5360
"karma-mocha": "^1.3.0",
@@ -58,26 +65,25 @@
5865
"karma-webpack": "^2.0.2",
5966
"lolex": "^1.5.2",
6067
"mocha": "^3.2.0",
61-
"chai": "^3.5.0",
62-
"sinon": "^1.17.7",
63-
"sinon-chai": "^2.8.0",
64-
"inject-loader": "^2.0.1",
65-
"babel-plugin-istanbul": "^3.1.2",
66-
"phantomjs-prebuilt": "^2.1.14",
67-
"chromedriver": "^2.27.2",
68-
"cross-spawn": "^5.0.1",
6968
"nightwatch": "^0.9.12",
70-
"selenium-server": "^3.0.1",
71-
"semver": "^5.3.0",
7269
"opn": "^4.0.2",
7370
"optimize-css-assets-webpack-plugin": "^1.3.0",
7471
"ora": "^1.1.0",
72+
"phantomjs-prebuilt": "^2.1.14",
7573
"rimraf": "^2.6.0",
74+
"selenium-server": "^3.0.1",
75+
"semver": "^5.3.0",
76+
"sinon": "^1.17.7",
77+
"sinon-chai": "^2.8.0",
78+
"ts-loader": "^2.0.1",
7679
"url-loader": "^0.5.7",
7780
"vue-loader": "^11.0.0",
81+
"vue-property-decorator": "^4.0.0",
7882
"vue-style-loader": "^2.0.0",
7983
"vue-template-compiler": "^2.2.1",
84+
"vue-typescript-import-dts": "^3.0.1",
8085
"webpack": "^2.2.1",
86+
"webpack-bundle-analyzer": "^2.2.1",
8187
"webpack-dev-middleware": "^1.10.0",
8288
"webpack-hot-middleware": "^2.16.1",
8389
"webpack-merge": "^2.6.1"

‎src/VueJsTsWebcamAspNetCoreSample/src/App.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import Vue from "vue";
2+
import Component from "vue-class-component";
3+
4+
@Component({
5+
name: "App",
6+
})
7+
export default class App extends Vue {
8+
}

‎src/VueJsTsWebcamAspNetCoreSample/src/App.vue‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,9 @@
55
</div>
66
</template>
77

8-
<script>
9-
export default {
10-
name: 'app'
11-
}
8+
<script lang="ts">
9+
import App from './App.ts'
10+
export default App
1211
</script>
1312

1413
<style>

‎src/VueJsTsWebcamAspNetCoreSample/src/App.vue.bak‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<div id="app">
3+
<img src="./assets/logo.png">
4+
<router-view></router-view>
5+
</div>
6+
</template>
7+
8+
<script>
9+
export default {
10+
name: 'app'
11+
}
12+
</script>
13+
14+
<style>
15+
#app {
16+
font-family: 'Avenir', Helvetica, Arial, sans-serif;
17+
-webkit-font-smoothing: antialiased;
18+
-moz-osx-font-smoothing: grayscale;
19+
text-align: center;
20+
color: #2c3e50;
21+
margin-top: 60px;
22+
}
23+
</style>

‎src/VueJsTsWebcamAspNetCoreSample/src/components/Hello.ts‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import Vue from "vue";
2+
import Component from "vue-class-component";
3+
import axios from "axios";
4+
5+
@Component({
6+
name: "Hello",
7+
})
8+
export default class Hello extends Vue {
9+
msg: string = "Welcome to Your Vue.js App";
10+
created (): void {
11+
axios
12+
.get("/api/hello")
13+
.then((res) => {
14+
this.msg = res.data.message;
15+
})
16+
.catch((ex) => console.log(ex));
17+
}
18+
}

‎src/VueJsTsWebcamAspNetCoreSample/src/components/Hello.vue‎

Lines changed: 3 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -20,25 +20,9 @@
2020
</div>
2121
</template>
2222

23-
<script>
24-
import axios from 'axios'
25-
26-
export default {
27-
name: 'hello',
28-
data () {
29-
return {
30-
msg: 'Welcome to Your Vue.js App'
31-
}
32-
},
33-
created () {
34-
axios
35-
.get('/api/hello')
36-
.then((res) => {
37-
this.msg = res.data.message
38-
})
39-
.catch((ex) => console.log(ex))
40-
}
41-
}
23+
<script lang="ts">
24+
import Hello from './Hello.ts'
25+
export default Hello
4226
</script>
4327

4428
<!-- Add "scoped" attribute to limit CSS to this component only -->

‎src/VueJsTsWebcamAspNetCoreSample/src/components/Hello.vue.bak‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<template>
2+
<div class="hello">
3+
<h1>{{ msg }}</h1>
4+
<h2>Essential Links</h2>
5+
<ul>
6+
<li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
7+
<li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
8+
<li><a href="https://gitter.im/vuejs/vue" target="_blank">Gitter Chat</a></li>
9+
<li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
10+
<br>
11+
<li><a href="http://vuejs-templates.github.io/webpack/" target="_blank">Docs for This Template</a></li>
12+
</ul>
13+
<h2>Ecosystem</h2>
14+
<ul>
15+
<li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
16+
<li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
17+
<li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
18+
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
19+
</ul>
20+
</div>
21+
</template>
22+
23+
<script>
24+
import axios from 'axios'
25+
26+
export default {
27+
name: 'hello',
28+
data () {
29+
return {
30+
msg: 'Welcome to Your Vue.js App'
31+
}
32+
},
33+
created () {
34+
axios
35+
.get('/api/hello')
36+
.then((res) => {
37+
this.msg = res.data.message
38+
})
39+
.catch((ex) => console.log(ex))
40+
}
41+
}
42+
</script>
43+
44+
<!-- Add "scoped" attribute to limit CSS to this component only -->
45+
<style scoped>
46+
h1, h2 {
47+
font-weight: normal;
48+
}
49+
50+
ul {
51+
list-style-type: none;
52+
padding: 0;
53+
}
54+
55+
li {
56+
display: inline-block;
57+
margin: 0 10px;
58+
}
59+
60+
a {
61+
color: #42b983;
62+
}
63+
</style>

‎src/VueJsTsWebcamAspNetCoreSample/src/main.js.bak‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// The Vue build version to load with the `import` command
2+
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3+
import Vue from 'vue'
4+
import App from './App'
5+
import router from './router'
6+
7+
Vue.config.productionTip = false
8+
9+
/* eslint-disable no-new */
10+
new Vue({
11+
el: '#app',
12+
router,
13+
template: '<App/>',
14+
components: { App }
15+
})

‎src/VueJsTsWebcamAspNetCoreSample/src/main.ts‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
// The Vue build version to load with the `import` command
2+
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
3+
import Vue from "vue";
4+
import App from "./App.vue";
5+
import router from "./router";
6+
7+
Vue.config.productionTip = false;
8+
9+
/* eslint-disable no-new */
10+
new Vue({
11+
el: "#app",
12+
router,
13+
render: h => h(App)
14+
// template: "<App/>",
15+
// components: { App }
16+
});

0 commit comments

Comments
 (0)