.DS_Store | |||||
node_modules | |||||
/dist | |||||
# local env files | |||||
.env.local | |||||
.env.*.local | |||||
# Log files | |||||
npm-debug.log* | |||||
yarn-debug.log* | |||||
yarn-error.log* | |||||
pnpm-debug.log* | |||||
# Editor directories and files | |||||
.idea | |||||
.vscode | |||||
*.suo | |||||
*.ntvs* | |||||
*.njsproj | |||||
*.sln | |||||
*.sw? |
# jam-pots-vuejs | |||||
## Project setup | |||||
``` | |||||
yarn install | |||||
``` | |||||
### Compiles and hot-reloads for development | |||||
``` | |||||
yarn serve | |||||
``` | |||||
### Compiles and minifies for production | |||||
``` | |||||
yarn build | |||||
``` | |||||
### Lints and fixes files | |||||
``` | |||||
yarn lint | |||||
``` | |||||
### Customize configuration | |||||
See [Configuration Reference](https://cli.vuejs.org/config/). |
module.exports = { | |||||
presets: [ | |||||
'@vue/cli-plugin-babel/preset' | |||||
] | |||||
} |
{ | |||||
"folders": [ | |||||
{ | |||||
"path": "." | |||||
} | |||||
], | |||||
"settings": {} | |||||
} |
{ | |||||
"name": "jam-pots-vuejs", | |||||
"version": "0.1.0", | |||||
"private": true, | |||||
"scripts": { | |||||
"serve": "vue-cli-service serve", | |||||
"build": "vue-cli-service build", | |||||
"lint": "vue-cli-service lint" | |||||
}, | |||||
"dependencies": { | |||||
"core-js": "^3.6.5", | |||||
"vue": "^3.0.0" | |||||
}, | |||||
"devDependencies": { | |||||
"@vue/cli-plugin-babel": "~4.5.0", | |||||
"@vue/cli-plugin-eslint": "~4.5.0", | |||||
"@vue/cli-service": "~4.5.0", | |||||
"@vue/compiler-sfc": "^3.0.0", | |||||
"babel-eslint": "^10.1.0", | |||||
"eslint": "^6.7.2", | |||||
"eslint-plugin-vue": "^7.0.0-0" | |||||
}, | |||||
"eslintConfig": { | |||||
"root": true, | |||||
"env": { | |||||
"node": true | |||||
}, | |||||
"extends": [ | |||||
"plugin:vue/vue3-essential", | |||||
"eslint:recommended" | |||||
], | |||||
"parserOptions": { | |||||
"parser": "babel-eslint" | |||||
}, | |||||
"rules": {} | |||||
}, | |||||
"browserslist": [ | |||||
"> 1%", | |||||
"last 2 versions", | |||||
"not dead" | |||||
] | |||||
} |
<!DOCTYPE html> | |||||
<html lang=""> | |||||
<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> | |||||
<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> | |||||
</html> |
<template> | |||||
<img alt="Vue logo" src="./assets/logo.png"> | |||||
<HelloWorld msg="Welcome to Your Vue.js App"/> | |||||
</template> | |||||
<script> | |||||
import HelloWorld from './components/HelloWorld.vue' | |||||
export default { | |||||
name: 'App', | |||||
components: { | |||||
HelloWorld | |||||
} | |||||
} | |||||
</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> |
<template> | |||||
<div class="hello"> | |||||
<h1>{{ msg }}</h1> | |||||
<p> | |||||
For a guide and recipes on how to configure / customize this project,<br> | |||||
check out the | |||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>. | |||||
</p> | |||||
<h3>Installed CLI Plugins</h3> | |||||
<ul> | |||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</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> | |||||
<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> | |||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li> | |||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li> | |||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li> | |||||
</ul> | |||||
<h3>Ecosystem</h3> | |||||
<ul> | |||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li> | |||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li> | |||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li> | |||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li> | |||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li> | |||||
</ul> | |||||
</div> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
name: 'HelloWorld', | |||||
props: { | |||||
msg: String | |||||
} | |||||
} | |||||
</script> | |||||
<!-- Add "scoped" attribute to limit CSS to this component only --> | |||||
<style scoped> | |||||
h3 { | |||||
margin: 40px 0 0; | |||||
} | |||||
ul { | |||||
list-style-type: none; | |||||
padding: 0; | |||||
} | |||||
li { | |||||
display: inline-block; | |||||
margin: 0 10px; | |||||
} | |||||
a { | |||||
color: #42b983; | |||||
} | |||||
</style> |
import { createApp } from 'vue' | |||||
import App from './App.vue' | |||||
createApp(App).mount('#app') |