feature: init

This commit is contained in:
Aleksei Tsybin 2022-02-22 18:56:54 +03:00
parent ff123ef485
commit 16fb4c2973
13 changed files with 173 additions and 187 deletions

View File

@ -4,15 +4,15 @@ module.exports = {
node: true, node: true,
}, },
extends: [ extends: [
"plugin:vue/essential", 'plugin:vue/essential',
"eslint:recommended", 'eslint:recommended',
"plugin:prettier/recommended", 'plugin:prettier/recommended',
], ],
parserOptions: { parserOptions: {
parser: "@babel/eslint-parser", parser: '@babel/eslint-parser',
}, },
rules: { rules: {
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off", 'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off", 'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
}, },
}; }

6
.prettierrc.js Normal file
View File

@ -0,0 +1,6 @@
module.exports = {
trailingComma: 'es5',
tabWidth: 2,
semi: false,
singleQuote: true,
}

View File

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

View File

@ -8,6 +8,7 @@
"lint": "vue-cli-service lint" "lint": "vue-cli-service lint"
}, },
"dependencies": { "dependencies": {
"buefy": "^0.9.17",
"core-js": "^3.8.3", "core-js": "^3.8.3",
"vue": "^2.6.14", "vue": "^2.6.14",
"vue-router": "^3.5.1" "vue-router": "^3.5.1"

View File

@ -5,6 +5,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">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.8.55/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">
<title><%= htmlWebpackPlugin.options.title %></title> <title><%= htmlWebpackPlugin.options.title %></title>
</head> </head>
<body> <body>

View File

@ -1,13 +1,121 @@
<template> <template>
<div id="app"> <div id="app">
<nav> <div class="container">
<router-link to="/">Home</router-link> | <b-navbar>
<router-link to="/about">About</router-link> <template #start>
</nav> <b-navbar-item href="#"> Home </b-navbar-item>
<router-view /> <b-navbar-dropdown label="Info">
<b-navbar-item href="#"> About </b-navbar-item>
<b-navbar-item href="#"> Contact </b-navbar-item>
</b-navbar-dropdown>
</template>
<template #end>
<b-navbar-item tag="div">
<div class="buttons">
<a class="button is-light">
<strong>Sign up</strong>
</a>
<a class="button is-light"> Log in </a>
</div>
</b-navbar-item>
</template>
</b-navbar>
<div class="notification is-primary">
This container is <strong>centered</strong> on desktop and larger
viewports.
</div>
<div class="card">
<div class="card-content">
<div class="content">
Lorem ipsum leo risus, porta ac consectetur ac, vestibulum at eros.
Donec id elit non mi porta gravida at eget metus. Cum sociis natoque
penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Cras mattis consectetur purus sit amet fermentum.
</div>
<footer class="card-footer">
<a href="#" class="card-footer-item">Save</a>
<a href="#" class="card-footer-item">Edit</a>
<a href="#" class="card-footer-item">Delete</a>
</footer>
</div>
</div>
<b-table :data="data" :columns="columns"></b-table>
</div>
</div> </div>
</template> </template>
<script>
export default {
data() {
return {
data: [
{
id: 1,
first_name: 'Jesse',
last_name: 'Simmons',
date: '2016-10-15 13:43:27',
gender: 'Male',
},
{
id: 2,
first_name: 'John',
last_name: 'Jacobs',
date: '2016-12-15 06:00:53',
gender: 'Male',
},
{
id: 3,
first_name: 'Tina',
last_name: 'Gilbert',
date: '2016-04-26 06:26:28',
gender: 'Female',
},
{
id: 4,
first_name: 'Clarence',
last_name: 'Flores',
date: '2016-04-10 10:28:46',
gender: 'Male',
},
{
id: 5,
first_name: 'Anne',
last_name: 'Lee',
date: '2016-12-06 14:38:38',
gender: 'Female',
},
],
columns: [
{
field: 'id',
label: 'ID',
width: '40',
numeric: true,
},
{
field: 'first_name',
label: 'First Name',
},
{
field: 'last_name',
label: 'Last Name',
},
{
field: 'date',
label: 'Date',
centered: true,
},
{
field: 'gender',
label: 'Gender',
},
],
}
},
}
</script>
<style> <style>
#app { #app {
font-family: Avenir, Helvetica, Arial, sans-serif; font-family: Avenir, Helvetica, Arial, sans-serif;

View File

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

View File

@ -1,10 +1,13 @@
import Vue from "vue"; import Vue from 'vue'
import App from "./App.vue"; import App from './App.vue'
import router from "./router"; import router from './router'
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
Vue.config.productionTip = false; Vue.config.productionTip = false
Vue.use(Buefy)
new Vue({ new Vue({
router, router,
render: (h) => h(App), render: (h) => h(App),
}).$mount("#app"); }).$mount('#app')

View File

@ -1,28 +1,27 @@
import Vue from "vue"; import Vue from 'vue'
import VueRouter from "vue-router"; import VueRouter from 'vue-router'
import HomeView from "../views/HomeView.vue";
Vue.use(VueRouter); Vue.use(VueRouter)
const routes = [ const routes = [
{ // {
path: "/", // path: '/',
name: "home", // name: 'home',
component: HomeView, // component: HomeView,
}, // },
{ // {
path: "/about", // path: '/about',
name: "about", // name: 'about',
// route level code-splitting // // route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route // // this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited. // // which is lazy-loaded when the route is visited.
component: () => // component: () =>
import(/* webpackChunkName: "about" */ "../views/AboutView.vue"), // import(/* webpackChunkName: "about" */ '../views/AboutView.vue'),
}, // },
]; ]
const router = new VueRouter({ const router = new VueRouter({
routes, routes,
}); })
export default router; export default router

View File

@ -1,5 +0,0 @@
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>

View File

@ -1,18 +0,0 @@
<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: "HomeView",
components: {
HelloWorld,
},
};
</script>

View File

@ -1,4 +1,4 @@
const { defineConfig } = require("@vue/cli-service"); const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({ module.exports = defineConfig({
transpileDependencies: true, transpileDependencies: true,
}); })

View File

@ -1975,6 +1975,13 @@ browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.16.3, browserslist@^4
node-releases "^2.0.2" node-releases "^2.0.2"
picocolors "^1.0.0" picocolors "^1.0.0"
buefy@^0.9.17:
version "0.9.17"
resolved "https://registry.yarnpkg.com/buefy/-/buefy-0.9.17.tgz#ac5857a1413f253cbb9beb0d87a48021e5b21c78"
integrity sha512-+rERzamvkflMsoE6GDqGdj5vpDUmdm5MnCnwjK2O8pdnwr8Pmab94cO//0Vd8ys539qWoeqsjh+B7vPg/lT/nQ==
dependencies:
bulma "0.9.3"
buffer-from@^1.0.0: buffer-from@^1.0.0:
version "1.1.2" version "1.1.2"
resolved "https://registry.npmmirror.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5" resolved "https://registry.npmmirror.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
@ -1993,6 +2000,11 @@ buffer@^5.5.0:
base64-js "^1.3.1" base64-js "^1.3.1"
ieee754 "^1.1.13" ieee754 "^1.1.13"
bulma@0.9.3:
version "0.9.3"
resolved "https://registry.yarnpkg.com/bulma/-/bulma-0.9.3.tgz#ddccb7436ebe3e21bf47afe01d3c43a296b70243"
integrity sha512-0d7GNW1PY4ud8TWxdNcP6Cc8Bu7MxcntD/RRLGWuiw/s0a9P+XlH/6QoOIrmbj6o8WWJzJYhytiu9nFjTszk1g==
bytes@3.0.0: bytes@3.0.0:
version "3.0.0" version "3.0.0"
resolved "https://registry.npmmirror.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048" resolved "https://registry.npmmirror.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"