Added Sass compiler and correct indenting.

This commit is contained in:
2020-12-14 23:11:31 +01:00
parent 05b4a26ac4
commit dade39f81e
9 changed files with 950 additions and 88 deletions

View File

@@ -1,25 +1,19 @@
# breach # Breach
## Project setup A browser game inspired by Breach Protocol from Cyberpunk 2077.
``` ## Run in development mode
npm install
```
### Compiles and hot-reloads for development
``` ```
npm run serve npm run serve
``` ```
### Compiles and minifies for production ### Build for production
``` ```
npm run build npm run build
``` ```
### Lints and fixes files ## License
``` MIT
npm run lint
```

872
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -20,6 +20,8 @@
"@vue/eslint-config-typescript": "^5.0.2", "@vue/eslint-config-typescript": "^5.0.2",
"eslint": "^6.7.2", "eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0", "eslint-plugin-vue": "^7.0.0-0",
"node-sass": "^5.0.0",
"sass-loader": "^10.1.0",
"typescript": "~3.9.3" "typescript": "~3.9.3"
} }
} }

View File

@@ -1,17 +1,17 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
</body> </body>
</html> </html>

View File

@@ -1,6 +1,6 @@
<template> <template>
<img alt="Vue logo" src="./assets/logo.png"> <img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/> <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
</template> </template>
<script lang="ts"> <script lang="ts">
@@ -15,13 +15,6 @@ export default defineComponent({
}); });
</script> </script>
<style> <style lang="scss">
#app { @import "@/sass/main.scss";
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style> </style>

View File

@@ -11,7 +11,7 @@
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li> <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li> <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul> </ul>
<h3>Essential Links</h3> <h3>Essential Links!</h3>
<ul> <ul>
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li> <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li> <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
@@ -31,30 +31,31 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import {defineComponent} from 'vue';
export default defineComponent({ export default defineComponent({
name: 'HelloWorld',
props: { props: {
msg: String, msg: String
}, }
}); });
</script> </script>
<!-- Add "scoped" attribute to limit CSS to this component only --> <style lang="scss">
<style scoped> h3 {
h3 {
margin: 40px 0 0; margin: 40px 0 0;
} }
ul {
ul {
list-style-type: none; list-style-type: none;
padding: 0; padding: 0;
} }
li {
li {
display: inline-block; display: inline-block;
margin: 0 10px; margin: 0 10px;
} }
a {
a {
color: #42b983; color: #42b983;
} }
</style> </style>

View File

@@ -1,4 +1,5 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import App from './App.vue' import App from './App.vue'
createApp(App).mount('#app') createApp(App)
.mount('#app');

3
src/sass/main.scss Normal file
View File

@@ -0,0 +1,3 @@
body {
background: rgb(238, 238, 238);
}