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.
```
npm install
```
### Compiles and hot-reloads for development
## Run in development mode
```
npm run serve
```
### Compiles and minifies for production
### Build for production
```
npm run build
```
### Lints and fixes files
## License
```
npm run lint
```
MIT

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",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0",
"node-sass": "^5.0.0",
"sass-loader": "^10.1.0",
"typescript": "~3.9.3"
}
}

View File

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

View File

@@ -1,6 +1,6 @@
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
<img alt="Vue logo" src="./assets/logo.png" />
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
</template>
<script lang="ts">
@@ -15,13 +15,6 @@ export default defineComponent({
});
</script>
<style>
#app {
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 lang="scss">
@import "@/sass/main.scss";
</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-eslint" target="_blank" rel="noopener">eslint</a></li>
</ul>
<h3>Essential Links</h3>
<h3>Essential Links!</h3>
<ul>
<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>
@@ -31,30 +31,31 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import {defineComponent} from 'vue';
export default defineComponent({
name: 'HelloWorld',
props: {
msg: String,
},
msg: String
}
});
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
<style lang="scss">
h3 {
margin: 40px 0 0;
}
ul {
}
ul {
list-style-type: none;
padding: 0;
}
li {
}
li {
display: inline-block;
margin: 0 10px;
}
a {
}
a {
color: #42b983;
}
}
</style>

View File

@@ -1,4 +1,5 @@
import { createApp } from '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);
}