@@ -0,0 +1,21 @@ | |||
.DS_Store | |||
node_modules | |||
/dist | |||
# local env files | |||
.env.local | |||
.env.*.local | |||
# Log files | |||
npm-debug.log* | |||
yarn-debug.log* | |||
yarn-error.log* | |||
# Editor directories and files | |||
.idea | |||
.vscode | |||
*.suo | |||
*.ntvs* | |||
*.njsproj | |||
*.sln | |||
*.sw? |
@@ -0,0 +1,24 @@ | |||
# crud | |||
## Project setup | |||
``` | |||
npm install | |||
``` | |||
### Compiles and hot-reloads for development | |||
``` | |||
npm run serve | |||
``` | |||
### Compiles and minifies for production | |||
``` | |||
npm run build | |||
``` | |||
### Lints and fixes files | |||
``` | |||
npm run lint | |||
``` | |||
### Customize configuration | |||
See [Configuration Reference](https://cli.vuejs.org/config/). |
@@ -0,0 +1,3 @@ | |||
module.exports = { | |||
presets: ["@vue/cli-plugin-babel/preset"] | |||
}; |
@@ -0,0 +1,48 @@ | |||
{ | |||
"name": "crud", | |||
"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.4", | |||
"vue": "^2.6.11", | |||
"vue-router": "^3.1.6" | |||
}, | |||
"devDependencies": { | |||
"@vue/cli-plugin-babel": "~4.3.0", | |||
"@vue/cli-plugin-eslint": "~4.3.0", | |||
"@vue/cli-plugin-router": "~4.3.0", | |||
"@vue/cli-service": "~4.3.0", | |||
"@vue/eslint-config-prettier": "^6.0.0", | |||
"babel-eslint": "^10.1.0", | |||
"eslint": "^6.7.2", | |||
"eslint-plugin-prettier": "^3.1.1", | |||
"eslint-plugin-vue": "^6.2.2", | |||
"prettier": "^1.19.1", | |||
"vue-template-compiler": "^2.6.11" | |||
}, | |||
"eslintConfig": { | |||
"root": true, | |||
"env": { | |||
"node": true | |||
}, | |||
"extends": [ | |||
"plugin:vue/essential", | |||
"eslint:recommended", | |||
"@vue/prettier" | |||
], | |||
"parserOptions": { | |||
"parser": "babel-eslint" | |||
}, | |||
"rules": {} | |||
}, | |||
"browserslist": [ | |||
"> 1%", | |||
"last 2 versions", | |||
"not dead" | |||
] | |||
} |
@@ -0,0 +1,17 @@ | |||
<!DOCTYPE html> | |||
<html lang="en"> | |||
<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> |
@@ -0,0 +1,32 @@ | |||
<template> | |||
<div id="app"> | |||
<div id="nav"> | |||
<router-link to="/">Home</router-link> | | |||
<router-link to="/about">About</router-link> | |||
</div> | |||
<router-view /> | |||
</div> | |||
</template> | |||
<style> | |||
#app { | |||
font-family: Avenir, Helvetica, Arial, sans-serif; | |||
-webkit-font-smoothing: antialiased; | |||
-moz-osx-font-smoothing: grayscale; | |||
text-align: center; | |||
color: #2c3e50; | |||
} | |||
#nav { | |||
padding: 30px; | |||
} | |||
#nav a { | |||
font-weight: bold; | |||
color: #2c3e50; | |||
} | |||
#nav a.router-link-exact-active { | |||
color: #42b983; | |||
} | |||
</style> |
@@ -0,0 +1,122 @@ | |||
<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-router" | |||
target="_blank" | |||
rel="noopener" | |||
>router</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> |
@@ -0,0 +1,10 @@ | |||
import Vue from "vue"; | |||
import App from "./App.vue"; | |||
import router from "./router"; | |||
Vue.config.productionTip = false; | |||
new Vue({ | |||
router, | |||
render: h => h(App) | |||
}).$mount("#app"); |
@@ -0,0 +1,30 @@ | |||
import Vue from "vue"; | |||
import VueRouter from "vue-router"; | |||
import Home from "../views/Home.vue"; | |||
Vue.use(VueRouter); | |||
const routes = [ | |||
{ | |||
path: "/", | |||
name: "Home", | |||
component: Home | |||
}, | |||
{ | |||
path: "/about", | |||
name: "About", | |||
// route level code-splitting | |||
// this generates a separate chunk (about.[hash].js) for this route | |||
// which is lazy-loaded when the route is visited. | |||
component: () => | |||
import(/* webpackChunkName: "about" */ "../views/About.vue") | |||
} | |||
]; | |||
const router = new VueRouter({ | |||
mode: "history", | |||
base: process.env.BASE_URL, | |||
routes | |||
}); | |||
export default router; |
@@ -0,0 +1,5 @@ | |||
<template> | |||
<div class="about"> | |||
<h1>This is an about page</h1> | |||
</div> | |||
</template> |
@@ -0,0 +1,18 @@ | |||
<template> | |||
<div class="home"> | |||
<img alt="Vue logo" src="../assets/logo.png" /> | |||
<HelloWorld msg="Welcome to Your Vue.js App" /> | |||
</div> | |||
</template> | |||
<script> | |||
// @ is an alias to /src | |||
import HelloWorld from "@/components/HelloWorld.vue"; | |||
export default { | |||
name: "Home", | |||
components: { | |||
HelloWorld | |||
} | |||
}; | |||
</script> |