cesi/hn-vue
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

first day!

Browse Source
This commit is contained in:
YuukanOO 2021-01-20 17:04:31 +01:00
commit 75b818c378
32 changed files with 24473 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
bundler-free/index.html Normal file
View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue js sans bundler !</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!-- <p>Mon nom est {{ name }}</p> -->
<greet v-bind:message="name"></greet>
<input type="text" v-bind:value="name" v-on:input="name = $event.target.value" />
</div>
<script>
Vue.component('greet', {
template: '<p>Mon nom est {{ message }}</p>',
props: ['message']
});
new Vue({
el: '#app',
data: {
name: 'julien',
}
});
</script>
</body>
</html>

1
hn-vue/.env Normal file
View File

@ -0,0 +1 @@
VUE_APP_API_URL=https://hn-dotnet.herokuapp.com

23
hn-vue/.gitignore vendored Normal file
View File

@ -0,0 +1,23 @@
.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?

24
hn-vue/README.md Normal file
View File

@ -0,0 +1,24 @@
# hn-vue
## 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/).

5
hn-vue/babel.config.js Normal file
View File

@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

11881
hn-vue/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

42
hn-vue/package.json Normal file
View File

@ -0,0 +1,42 @@
{
"name": "hn-vue",
"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": "^2.6.11"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

BIN
hn-vue/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

17
hn-vue/public/index.html Normal file
View File

@ -0,0 +1,17 @@
<!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>

56
hn-vue/src/Links.vue Normal file
View File

@ -0,0 +1,56 @@
<template>
<div>
<h1>Derniers liens publiés</h1>
<loading
v-if="links === null"
message="Chargement des liens en cours ..."
/>
<error v-else-if="err" :error="err" />
<ul v-else>
<li v-for="link in links" :key="link.id">
<link-item :link="link" />
</li>
</ul>
</div>
</template>
<script>
import Error from "./components/Error.vue";
import Loading from "./components/Loading.vue";
import LinkItem from "./components/LinkItem.vue";
import api from "./api";
export default {
components: { Loading, Error, LinkItem },
name: "Links",
data() {
return {
// loading: false,
links: null,
err: null,
};
},
async mounted() {
try {
// this.loading = true;
this.links = await api.getLinks();
} catch (e) {
this.err = e;
}
// } finally {
// this.loading = false;
// }
},
};
</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>

19
hn-vue/src/api.js Normal file
View File

@ -0,0 +1,19 @@
class Api {
constructor(baseUrl) {
this.baseUrl = baseUrl;
}
getLinks() {
return this._get("/api/links");
}
_get(path) {
return fetch(this.baseUrl + path, {
headers: {
Accept: "application/json",
},
}).then((r) => r.json());
}
}
export default new Api(process.env.VUE_APP_API_URL);

BIN
hn-vue/src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

11
hn-vue/src/components/Error.vue Normal file
View File

@ -0,0 +1,11 @@
<template>
<div class="error">{{ err.message }}</div>
</template>
<script>
export default {
props: {
error: Error,
},
};
</script>

19
hn-vue/src/components/LinkItem.vue Normal file
View File

@ -0,0 +1,19 @@
<template>
<article>
<h2>{{ link.url }}</h2>
<p>Publié le {{ link.createdAt }} par {{ link.createdBy.username }}</p>
<p>👍 {{ link.upvotesCount }} / 👎 {{ link.downvotesCount }}</p>
</article>
</template>
<script>
export default {
name: "LinkItem",
props: {
link: {
type: Object,
required: true,
},
},
};
</script>

11
hn-vue/src/components/Loading.vue Normal file
View File

@ -0,0 +1,11 @@
<template>
<div class="loading">{{ message }}</div>
</template>
<script>
export default {
props: {
message: String,
},
};
</script>

8
hn-vue/src/main.js Normal file
View File

@ -0,0 +1,8 @@
import Vue from "vue";
import Links from "./Links.vue";
Vue.config.productionTip = false;
new Vue({
render: (h) => h(Links),
}).$mount("#app");

23
vue2/.gitignore vendored Normal file
View File

@ -0,0 +1,23 @@
.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?

24
vue2/README.md Normal file
View File

@ -0,0 +1,24 @@
# vue2
## 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/).

5
vue2/babel.config.js Normal file
View File

@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

11886
vue2/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

43
vue2/package.json Normal file
View File

@ -0,0 +1,43 @@
{
"name": "vue2",
"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": "^2.6.11",
"vue-router": "^3.4.9"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

BIN
vue2/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

17
vue2/public/index.html Normal file
View File

@ -0,0 +1,17 @@
<!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>

65
vue2/src/App.vue Normal file
View File

@ -0,0 +1,65 @@
<template>
<div id="app">
<card firstname="john" lastname="doe" />
<greet />
<counter :initialValue="58" />
<a-form @custom-event="logEventTime" />
<ul>
<li v-for="(person, index) in people" :key="person.lastname">
<card
v-if="index % 2 === 0"
:firstname="person.firstname"
:lastname="person.lastname"
/>
<card
v-else
alternate
:firstname="person.firstname"
:lastname="person.lastname"
/>
</li>
</ul>
</div>
</template>
<script>
import Card from "./components/Card";
import Counter from "./components/Counter.vue";
import AForm from "./components/AForm.vue";
export default {
name: "App",
components: {
// MyCard: Card,
Card,
Counter,
AForm,
},
data() {
return {
people: [
{ firstname: "john", lastname: "doe" },
{ firstname: "bob", lastname: "dylan" },
{ firstname: "john", lastname: "wick" },
],
};
},
methods: {
logEventTime(date) {
console.log("événément custom reçu à", date);
},
},
};
</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>

7
vue2/src/ComponentLayout.vue Normal file
View File

@ -0,0 +1,7 @@
<template>
<div>
<h2>Tests de composants</h2>
<hr />
<router-view></router-view>
</div>
</template>

20
vue2/src/Layout.vue Normal file
View File

@ -0,0 +1,20 @@
<template>
<div class="layout">
<nav>
<router-link :to="{ name: 'home' }">Accueil</router-link>
<router-link :to="{ name: 'form' }">Un formulaire !</router-link>
<router-link :to="{ name: 'counter' }">Un compteur !</router-link>
<router-link
:to="{
name: 'card',
params: { a: 'john', b: 'doe' },
query: {
alternate: '1',
},
}"
>Une carte pour john !</router-link
>
</nav>
<router-view></router-view>
</div>
</template>

BIN
vue2/src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

25
vue2/src/components/AForm.vue Normal file
View File

@ -0,0 +1,25 @@
<template>
<form @submit.prevent="submitForm">
<button @click.prevent="$emit('custom-event', new Date())">
Envoyé événement personnalisé
</button>
<button type="submit">Envoyer</button>
</form>
</template>
<script>
export default {
// data() {
// return {
// window,
// };
// },
methods: {
submitForm() {
alert("Formulaire envoyé");
this.$router.push({ name: "home" });
},
},
// beforeRouteEnter(to, from, next) {},
};
</script>

50
vue2/src/components/Card.vue Normal file
View File

@ -0,0 +1,50 @@
<template>
<article class="card" :class="{ 'card--alternate': alternate }">
<p>Prénom : {{ firstname | capitalize }}</p>
<p>Nom : {{ lastname | capitalize | uppercase }}</p>
</article>
</template>
<script>
export default {
name: "Card",
// props: ["firstname", "lastname"],
// props: {
// firstname: String,
// lastname: String,
// // person: Object
// },
props: {
alternate: Boolean,
firstname: String,
lastname: {
type: String,
required: true,
validator: (v) => v.length > 2,
},
},
filters: {
capitalize(value) {
if (!value) {
return value;
}
return value.charAt(0).toUpperCase() + value.slice(1);
},
},
mounted() {
// console.log("Prénom", this.firstname, "Nom", this.lastname);
// this.firstname = this.$route.params.firstname;
// this.lastname = this.$route.params.lastname;
},
};
</script>
<style>
.card {
/** styles par défaut de la carte */
}
.card--alternate {
color: red;
}
</style>

51
vue2/src/components/Counter.vue Normal file
View File

@ -0,0 +1,51 @@
<template>
<div>
<p>Valeur actuelle : {{ count }}</p>
<p>Valeur doublée : {{ countDoubled }}</p>
<button @click="count += 1">Incrémenter</button>
<button @click="count -= 1">Décrémenter</button>
<p>Valeur de settableCount : {{ settableCount }}</p>
<button @click="settableCount = 1">Mise à 2</button>
</div>
</template>
<script>
export default {
props: {
initialValue: {
type: Number,
default: 42,
},
},
data() {
return {
count: this.initialValue,
};
},
computed: {
countDoubled() {
return this.count * 2;
},
settableCount: {
get() {
return this.count - 1;
},
set(v) {
this.count = v + 1;
},
},
},
watch: {
count(newValue, oldValue) {
console.log("Passage de", oldValue, "à", newValue);
},
// count: {
// deep: true,
// handler() {
// }
// },
// count: 'nomDeLaMethodeAExecuter'
},
};
</script>

107
vue2/src/main.js Normal file
View File

@ -0,0 +1,107 @@
import Vue from "vue";
import VueRouter from "vue-router";
import Layout from "./Layout.vue";
import ComponentLayout from "./ComponentLayout.vue";
// import NotFound from "./pages/NotFound.vue";
// import Card from "./components/Card.vue";
// import AForm from "./components/AForm";
// import Counter from "./components/Counter";
// import App from "./App.vue";
const App = () => import(/* webpackChunkName: "home" */ "./App.vue");
const NotFound = () =>
import(/* webpackChunkName: "notfound" */ "./pages/NotFound.vue");
const Card = () =>
import(/* webpackChunkName: "card" */ "./components/Card.vue");
const AForm = () =>
import(/* webpackChunkName: "aform" */ "./components/AForm.vue");
const Counter = () =>
import(/* webpackChunkName: "counter" */ "./components/Counter.vue");
Vue.use(VueRouter);
Vue.config.productionTip = false;
Vue.component("greet", {
render: (h) => h("p", "Hello there"),
});
Vue.filter("uppercase", (v) => v.toString().toUpperCase());
// function requireAuth(to, from, next) {
// // On vérifie si l'utilisateur est authentifié
// const isAuthenticated = false;
// if (!isAuthenticated) {
// next({ name: "login" });
// } else {
// next();
// }
// }
const router = new VueRouter({
// linkActiveClass: '',
mode: "history",
routes: [
{
path: "/components",
component: ComponentLayout,
beforeEnter(to, from, next) {
// next(vm => {
// vm.$data.count = 2;
// });
// console.log("going into /components");
next();
},
children: [
{
path: "aform",
component: AForm,
// beforeEnter: requireAuth,
// beforeEnter() {},
name: "form",
meta: { title: "Un formulaire" },
},
{
path: "some-counter",
component: Counter,
name: "counter",
meta: { title: "Un compteur" },
},
],
},
{
path: "/card/:a/:b",
component: Card,
name: "card",
// props: true,
props: (route) => ({
alternate: !!route.query.alternate,
firstname: route.params.a,
lastname: route.params.b,
}),
meta: { title: "Carte" },
},
// { path: "/", redirect: "/counter", name: "home" },
{ path: "/", component: App, name: "home", meta: { title: "Acceuil" } },
{ path: "*", component: NotFound, meta: { title: "Non trouvée" } },
],
});
router.beforeEach((to, from, next) => {
// document.title = to.meta.title;
next();
});
router.afterEach((to) => {
document.title = to.meta.title;
});
new Vue({
router,
render: (h) => h(Layout),
}).$mount("#app");

3
vue2/src/pages/NotFound.vue Normal file
View File

@ -0,0 +1,3 @@
<template>
<p>Page non trouvée !</p>
</template>