Skip to content

Commit 6f7d698

Browse files
author
Highlander Paiva
committed
creating demo frontend app
1 parent 1cc895c commit 6f7d698

39 files changed

+1921
-14
lines changed

AspDotnetVueJS/.babelrc

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"presets": [
3+
"@babel/preset-env"
4+
],
5+
"plugins": [
6+
"@babel/plugin-transform-runtime",
7+
"@babel/plugin-transform-async-to-generator",
8+
"@babel/plugin-syntax-dynamic-import",
9+
"@babel/plugin-syntax-import-meta",
10+
"@babel/plugin-proposal-class-properties",
11+
"@babel/plugin-proposal-json-strings",
12+
[
13+
"@babel/plugin-proposal-decorators",
14+
{
15+
"legacy": true
16+
}
17+
],
18+
"@babel/plugin-proposal-function-sent",
19+
"@babel/plugin-proposal-export-namespace-from",
20+
"@babel/plugin-proposal-numeric-separator",
21+
"@babel/plugin-proposal-throw-expressions"
22+
],
23+
"comments": false
24+
}

AspDotnetVueJS/.editorconfig

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,5 +8,9 @@ insert_final_newline = true
88
trim_trailing_whitespace = true
99
indent_size = 4
1010

11-
[*.{js,json,vue,sass,scss,css}]
11+
[*.{js,json,vue,sass,scss,css,html,pug}]
1212
indent_style = tab
13+
14+
[*.md]
15+
max_line_length = off
16+
trim_trailing_whitespace = false

AspDotnetVueJS/.eslintignore

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33
######################################################
44
# /node_modules/* and /bower_components/* in the project root are ignored by default
55
# Ignore built files except build/index.js
6-
/ClientApp/Static/**/*.js
6+
/ClientApp/static/**/*.js
77

8-
# !build/index.js ... if i would like to ignore all except that... then it's the way
8+
# !build/index.js ... if i would like to ignore all except that... then it's the way

AspDotnetVueJS/.eslintrc.js

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ module.exports = {
1515
'arrow-parens': 0,
1616
'generator-star-spacing': 0,
1717
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
18+
'no-console': process.env.NODE_ENV === 'production' ? 2 : 0,
1819
'comma-dangle': ['error', 'never'],
1920
'no-shadow': 0,
2021
'no-param-reassign': ["error", { "props": true, "ignorePropertyModificationsFor": ["state"] }],
@@ -24,6 +25,10 @@ module.exports = {
2425
'vue/script-indent': ['error', "tab", { 'baseIndent': 0 }],
2526
'vue/html-indent': ['error', "tab", { 'baseIndent': 1 }],
2627
'no-tabs': 0,
27-
"indent": ["error", "tab"]
28+
"indent": ["error", "tab"],
29+
"no-mixed-operators": 0,
30+
"import/prefer-default-export": 0,
31+
"no-use-before-define": 0,
32+
"no-plusplus": 0
2833
}
2934
};

AspDotnetVueJS/AspDotnetVueJS.csproj

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,26 @@
1414
<Content Include=".template.config\template.json" />
1515
</ItemGroup>
1616

17+
<ItemGroup>
18+
<Folder Include="ClientApp\components\elements" />
19+
<Folder Include="ClientApp\components\layouts" />
20+
<Folder Include="ClientApp\components\views" />
21+
</ItemGroup>
22+
23+
<ItemGroup>
24+
<_ContentIncludedByDefault Remove="wwwroot\dist\0.js" />
25+
<_ContentIncludedByDefault Remove="wwwroot\dist\0.js.map" />
26+
<_ContentIncludedByDefault Remove="wwwroot\dist\1.js" />
27+
<_ContentIncludedByDefault Remove="wwwroot\dist\1.js.map" />
28+
<_ContentIncludedByDefault Remove="wwwroot\dist\fonts\element-icons.2fad952a.woff" />
29+
<_ContentIncludedByDefault Remove="wwwroot\dist\fonts\element-icons.6f0a7632.ttf" />
30+
<_ContentIncludedByDefault Remove="wwwroot\dist\main.js" />
31+
<_ContentIncludedByDefault Remove="wwwroot\dist\main.js.map" />
32+
<_ContentIncludedByDefault Remove="wwwroot\dist\vendor.js" />
33+
<_ContentIncludedByDefault Remove="wwwroot\dist\vendor.js.map" />
34+
<_ContentIncludedByDefault Remove="wwwroot\favicon.ico" />
35+
<_ContentIncludedByDefault Remove="wwwroot\index.html" />
36+
<_ContentIncludedByDefault Remove="wwwroot\static\ie-polyfill.min.js" />
37+
</ItemGroup>
38+
1739
</Project>

AspDotnetVueJS/ClientApp/app.js

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
// Core imports
2+
import Vue from 'vue';
3+
import upperFirst from 'lodash/upperFirst';
4+
import camelCase from 'lodash/camelCase';
5+
import router from './router/index';
6+
import store from './store';
7+
import App from './components/App';
8+
import { FontAwesomeIcon } from './icons';
9+
10+
// 3th imports
11+
import { sync } from 'vuex-router-sync';
12+
import axios from 'axios';
13+
import ElementUI from 'element-ui';
14+
import locale from 'element-ui/lib/locale/lang/en'
15+
16+
// CSS imports
17+
import './styles/main.sass'
18+
19+
// Configurations
20+
Vue.use(ElementUI, { locale });
21+
Vue.component('icon', FontAwesomeIcon);
22+
Vue.prototype.$http = axios;
23+
sync(store, router);
24+
25+
// Mode details on: https://vuejs.org/v2/guide/components-registration.html
26+
const requireComponent = require.context(
27+
// The relative path of the components folder
28+
'./components',
29+
// Whether or not to look in subfolders
30+
true,
31+
// The regular expression used to match base component filenames
32+
/base[A-Z]\w+\.(vue|js)$/
33+
);
34+
35+
requireComponent.keys().forEach(fileName => {
36+
// Get component config
37+
const componentConfig = requireComponent(fileName);
38+
39+
// Get PascalCase name of component
40+
const componentName = upperFirst(
41+
camelCase(
42+
// Strip the leading `./` and extension from the filename
43+
fileName.replace(/base/, '').replace(/^\.\/(.*)\.\w+$/, '$1')
44+
)
45+
);
46+
47+
// Register component globally
48+
Vue.component(
49+
componentName,
50+
// Look for the component options on `.default`, which will
51+
// exist if the component was exported with `export default`,
52+
// otherwise fall back to module's root.
53+
componentConfig.default || componentConfig
54+
);
55+
});
56+
57+
new Vue({ // eslint-disable-line
58+
el: '#app',
59+
store,
60+
router,
61+
...App
62+
});
Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<template lang="pug">
2+
#app
3+
el-container
4+
5+
el-header
6+
header-layout(title="ASP.NET & Vue Template")
7+
8+
el-main
9+
view-layout
10+
router-view
11+
12+
</template>
13+
14+
<script>
15+
import HeaderLayout from 'components/layouts/HeaderLayout';
16+
import ViewLayout from 'components/layouts/ViewLayout';
17+
18+
export default {
19+
20+
name: 'App',
21+
22+
components: {
23+
ViewLayout,
24+
HeaderLayout
25+
}
26+
};
27+
</script>
28+
29+
<style lang="sass">
30+
@import "../styles/tools/variables"
31+
32+
#app
33+
background-color: $--border-color-extra-light
34+
width: 100%
35+
min-height: 100vh
36+
padding-bottom: 40px
37+
38+
.el-container
39+
justify-content: center
40+
41+
.el-header
42+
padding: 0
43+
44+
.el-main
45+
display: flex
46+
justify-content: center
47+
</style>
Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<template lang="pug">
2+
#counter-display
3+
.display
4+
.title {{ title.toUpperCase() }}
5+
.counter {{ value }}
6+
7+
.controls(v-if="hasControl")
8+
el-button(type="primary" icon="el-icon-minus" @click="decrementCounter()")
9+
el-button(type="secondary" icon="el-icon-delete" @click="resetCounter()")
10+
el-button(type="primary" icon="el-icon-plus" @click="incrementCounter()")
11+
12+
</template>
13+
14+
<script>
15+
export default {
16+
name: 'CounterDisplay',
17+
18+
props: {
19+
value: {
20+
type: Number,
21+
required: true
22+
},
23+
24+
title: {
25+
type: String,
26+
required: true
27+
},
28+
29+
hasControl: {
30+
type: Boolean,
31+
default: false
32+
}
33+
},
34+
35+
methods: {
36+
37+
decrementCounter() {
38+
this.$emit('on-decrement');
39+
},
40+
41+
resetCounter() {
42+
this.$emit('on-reset');
43+
},
44+
45+
incrementCounter() {
46+
this.$emit('on-increment');
47+
}
48+
}
49+
};
50+
</script>
51+
52+
<style lang="sass" scoped>
53+
@import '../../styles/tools/variables'
54+
55+
#counter-display
56+
display: flex
57+
flex-direction: column
58+
align-items: center
59+
max-width: 340px
60+
background-color: $--border-color-extra-light
61+
padding: 20px 0
62+
margin-top: 20px
63+
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
64+
65+
.display
66+
background-color: $--color-white
67+
width: 300px
68+
border: 1px solid $--color-primary
69+
border-radius: $--border-radius-base
70+
padding: 10px
71+
display: flex
72+
justify-content: space-between
73+
align-items: center
74+
75+
.title
76+
color: $--color-primary
77+
font-size: 13px
78+
79+
.counter
80+
color: $--color-primary
81+
font-size: 20px
82+
font-weight: bold
83+
84+
.controls
85+
margin-top: 20px
86+
87+
88+
</style>

0 commit comments

Comments
 (0)