Move to view
This commit is contained in:
parent
c955497e93
commit
0d739a5806
@ -5,7 +5,7 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
|
extends: ["plugin:vue/vue3-essential", "eslint:recommended", "@vue/prettier"],
|
||||||
parserOptions: {
|
parserOptions: {
|
||||||
parser: "babel-eslint",
|
parser: '@babel/eslint-parser',
|
||||||
},
|
},
|
||||||
rules: {
|
rules: {
|
||||||
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
|
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
|
||||||
|
|||||||
@ -1,5 +1,14 @@
|
|||||||
{
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es2015",
|
||||||
|
"module": "esnext",
|
||||||
|
"baseUrl": "./",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["components/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
"include": [
|
"include": [
|
||||||
"./src/**/*"
|
"src/**/*.vue",
|
||||||
|
"src/**/*.js"
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
38
package.json
38
package.json
@ -8,25 +8,35 @@
|
|||||||
"lint": "vue-cli-service lint"
|
"lint": "vue-cli-service lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@mdi/font": "5.9.55",
|
||||||
"core-js": "^3.6.5",
|
"core-js": "^3.6.5",
|
||||||
"register-service-worker": "^1.7.1",
|
"register-service-worker": "^1.7.1",
|
||||||
|
"roboto-fontface": "*",
|
||||||
"vue": "^3.0.0",
|
"vue": "^3.0.0",
|
||||||
"vue-router": "^4.0.0-0"
|
"vue-router": "^4.0.0-0",
|
||||||
|
"vuetify": "^3.0.0-alpha.0",
|
||||||
|
"webfontloader": "^1.0.0",
|
||||||
|
"webpack": "^4.0.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vue/cli-plugin-babel": "~4.5.0",
|
"@babel/core": "^7.12.16",
|
||||||
"@vue/cli-plugin-eslint": "~4.5.0",
|
"@babel/eslint-parser": "^7.12.16",
|
||||||
"@vue/cli-plugin-pwa": "~4.5.0",
|
"@vue/cli-plugin-babel": "~5.0.0-rc.3",
|
||||||
"@vue/cli-plugin-router": "~4.5.0",
|
"@vue/cli-plugin-eslint": "~5.0.0-rc.3",
|
||||||
"@vue/cli-service": "~4.5.0",
|
"@vue/cli-plugin-pwa": "~5.0.0-rc.3",
|
||||||
|
"@vue/cli-plugin-router": "~5.0.0-rc.3",
|
||||||
|
"@vue/cli-service": "~5.0.0-rc.3",
|
||||||
"@vue/compiler-sfc": "^3.0.0",
|
"@vue/compiler-sfc": "^3.0.0",
|
||||||
"@vue/eslint-config-prettier": "^6.0.0",
|
"@vue/eslint-config-prettier": "^6.0.0",
|
||||||
"babel-eslint": "^10.1.0",
|
"eslint": "^7.32.0",
|
||||||
"eslint": "^6.7.2",
|
"eslint-config-prettier": "^8.3.0",
|
||||||
"eslint-plugin-prettier": "^3.3.1",
|
"eslint-plugin-prettier": "^4.0.0",
|
||||||
"eslint-plugin-vue": "^7.0.0",
|
"eslint-plugin-vue": "^8.0.3",
|
||||||
"prettier": "^2.2.1",
|
"prettier": "^2.4.1",
|
||||||
"sass": "^1.26.5",
|
"sass": "^1.38.0",
|
||||||
"sass-loader": "^8.0.2"
|
"sass-loader": "^10.0.0",
|
||||||
}
|
"vue-cli-plugin-vuetify": "~2.4.5",
|
||||||
|
"vuetify-loader": "^2.0.0-alpha.0"
|
||||||
|
},
|
||||||
|
"packageManager": "yarn@1.22.15"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
|||||||
44
src/App.vue
44
src/App.vue
@ -1,30 +1,22 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="nav">
|
<v-app>
|
||||||
<router-link to="/">Home</router-link> |
|
<v-app-bar elevation="4">
|
||||||
<router-link to="/about">About</router-link>
|
<v-app-bar-title>Vue CNC Calculator</v-app-bar-title>
|
||||||
</div>
|
</v-app-bar>
|
||||||
<router-view />
|
<v-main>
|
||||||
|
<v-container>
|
||||||
|
<router-view />
|
||||||
|
</v-container>
|
||||||
|
</v-main>
|
||||||
|
</v-app>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss">
|
<script>
|
||||||
#app {
|
export default {
|
||||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
name: "App",
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
text-align: center;
|
|
||||||
color: #2c3e50;
|
|
||||||
}
|
|
||||||
|
|
||||||
#nav {
|
data: () => ({
|
||||||
padding: 30px;
|
//
|
||||||
|
}),
|
||||||
a {
|
};
|
||||||
font-weight: bold;
|
</script>
|
||||||
color: #2c3e50;
|
|
||||||
|
|
||||||
&.router-link-exact-active {
|
|
||||||
color: #42b983;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
1
src/assets/logo.svg
Normal file
1
src/assets/logo.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
|
||||||
|
After Width: | Height: | Size: 539 B |
@ -1,130 +1,129 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="hello">
|
<v-container>
|
||||||
<h1>{{ msg }}</h1>
|
<v-row class="text-center">
|
||||||
<p>
|
<v-col cols="12">
|
||||||
For a guide and recipes on how to configure / customize this project,<br />
|
<v-img :src="logo" class="my-3" contain height="200" />
|
||||||
check out the
|
</v-col>
|
||||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener"
|
|
||||||
>vue-cli documentation</a
|
<v-col class="mb-4">
|
||||||
>.
|
<h1 class="display-2 font-weight-bold mb-3">
|
||||||
</p>
|
<div>Welcome to the Vuetify 3 Alpha</div>
|
||||||
<h3>Installed CLI Plugins</h3>
|
</h1>
|
||||||
<ul>
|
|
||||||
<li>
|
<p class="subheading font-weight-regular">
|
||||||
<a
|
For help and collaboration with other Vuetify developers,
|
||||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
|
<br />please join our online
|
||||||
target="_blank"
|
<a href="https://community.vuetifyjs.com" target="_blank"
|
||||||
rel="noopener"
|
>Discord Community</a
|
||||||
>babel</a
|
>
|
||||||
>
|
</p>
|
||||||
</li>
|
</v-col>
|
||||||
<li>
|
|
||||||
<a
|
<v-col class="mb-5" cols="12">
|
||||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa"
|
<h2 class="headline font-weight-bold mb-5">What's next?</h2>
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
<v-row justify="center">
|
||||||
>pwa</a
|
<a
|
||||||
>
|
v-for="(next, i) in whatsNext"
|
||||||
</li>
|
:key="i"
|
||||||
<li>
|
:href="next.href"
|
||||||
<a
|
class="subheading mx-3"
|
||||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
|
target="_blank"
|
||||||
target="_blank"
|
>
|
||||||
rel="noopener"
|
{{ next.text }}
|
||||||
>router</a
|
</a>
|
||||||
>
|
</v-row>
|
||||||
</li>
|
</v-col>
|
||||||
<li>
|
|
||||||
<a
|
<v-col class="mb-5" cols="12">
|
||||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
|
<h2 class="headline font-weight-bold mb-5">Important Links</h2>
|
||||||
target="_blank"
|
|
||||||
rel="noopener"
|
<v-row justify="center">
|
||||||
>eslint</a
|
<a
|
||||||
>
|
v-for="(link, i) in importantLinks"
|
||||||
</li>
|
:key="i"
|
||||||
</ul>
|
:href="link.href"
|
||||||
<h3>Essential Links</h3>
|
class="subheading mx-3"
|
||||||
<ul>
|
target="_blank"
|
||||||
<li>
|
>
|
||||||
<a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
|
{{ link.text }}
|
||||||
</li>
|
</a>
|
||||||
<li>
|
</v-row>
|
||||||
<a href="https://forum.vuejs.org" target="_blank" rel="noopener"
|
</v-col>
|
||||||
>Forum</a
|
|
||||||
>
|
<v-col class="mb-5" cols="12">
|
||||||
</li>
|
<h2 class="headline font-weight-bold mb-5">Ecosystem</h2>
|
||||||
<li>
|
|
||||||
<a href="https://chat.vuejs.org" target="_blank" rel="noopener"
|
<v-row justify="center">
|
||||||
>Community Chat</a
|
<a
|
||||||
>
|
v-for="(eco, i) in ecosystem"
|
||||||
</li>
|
:key="i"
|
||||||
<li>
|
:href="eco.href"
|
||||||
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
|
class="subheading mx-3"
|
||||||
>Twitter</a
|
target="_blank"
|
||||||
>
|
>
|
||||||
</li>
|
{{ eco.text }}
|
||||||
<li>
|
</a>
|
||||||
<a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
|
</v-row>
|
||||||
</li>
|
</v-col>
|
||||||
</ul>
|
</v-row>
|
||||||
<h3>Ecosystem</h3>
|
</v-container>
|
||||||
<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>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import logo from "../assets/logo.svg";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "HelloWorld",
|
name: "HelloWorld",
|
||||||
props: {
|
|
||||||
msg: String,
|
data: () => ({
|
||||||
},
|
ecosystem: [
|
||||||
|
{
|
||||||
|
text: "vuetify-loader",
|
||||||
|
href: "https://github.com/vuetifyjs/vuetify-loader",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "github",
|
||||||
|
href: "https://github.com/vuetifyjs/vuetify",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "awesome-vuetify",
|
||||||
|
href: "https://github.com/vuetifyjs/awesome-vuetify",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
importantLinks: [
|
||||||
|
{
|
||||||
|
text: "Chat",
|
||||||
|
href: "https://community.vuetifyjs.com",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "Made with Vuetify",
|
||||||
|
href: "https://madewithvuejs.com/vuetify",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "Twitter",
|
||||||
|
href: "https://twitter.com/vuetifyjs",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "Articles",
|
||||||
|
href: "https://medium.com/vuetify",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
logo,
|
||||||
|
whatsNext: [
|
||||||
|
{
|
||||||
|
text: "Explore components",
|
||||||
|
href: "https://vuetifyjs.com",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "Roadmap",
|
||||||
|
href: "https://vuetifyjs.com/introduction/roadmap/",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: "Frequently Asked Questions",
|
||||||
|
href: "https://vuetifyjs.com/getting-started/frequently-asked-questions",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}),
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
|
||||||
<style scoped lang="scss">
|
|
||||||
h3 {
|
|
||||||
margin: 40px 0 0;
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
list-style-type: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 10px;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: #42b983;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -1,6 +1,9 @@
|
|||||||
import { createApp } from "vue";
|
import { createApp } from "vue";
|
||||||
import App from "./App.vue";
|
import App from "./App.vue";
|
||||||
import "./registerServiceWorker";
|
|
||||||
import router from "./router";
|
import router from "./router";
|
||||||
|
import vuetify from "./plugins/vuetify";
|
||||||
|
import { loadFonts } from "./plugins/webfontloader";
|
||||||
|
|
||||||
createApp(App).use(router).mount("#app");
|
loadFonts();
|
||||||
|
|
||||||
|
createApp(App).use(router).use(vuetify).mount("#app");
|
||||||
|
|||||||
13
src/plugins/vuetify.js
Normal file
13
src/plugins/vuetify.js
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
// Styles
|
||||||
|
import "@mdi/font/css/materialdesignicons.css";
|
||||||
|
import "vuetify/styles";
|
||||||
|
|
||||||
|
// Vuetify
|
||||||
|
import { createVuetify } from "vuetify";
|
||||||
|
|
||||||
|
export default createVuetify({
|
||||||
|
theme: {
|
||||||
|
defaultTheme: "dark",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
|
||||||
17
src/plugins/webfontloader.js
Normal file
17
src/plugins/webfontloader.js
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
/**
|
||||||
|
* plugins/webfontloader.js
|
||||||
|
*
|
||||||
|
* webfontloader documentation: https://github.com/typekit/webfontloader
|
||||||
|
*/
|
||||||
|
|
||||||
|
export async function loadFonts() {
|
||||||
|
const webFontLoader = await import(
|
||||||
|
/* webpackChunkName: "webfontloader" */ "webfontloader"
|
||||||
|
);
|
||||||
|
|
||||||
|
webFontLoader.load({
|
||||||
|
google: {
|
||||||
|
families: ["Roboto:100,300,400,500,700,900&display=swap"],
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
@ -1,11 +1,11 @@
|
|||||||
import { createRouter, createWebHistory } from "vue-router";
|
import { createRouter, createWebHistory } from "vue-router";
|
||||||
import Home from "../views/Home.vue";
|
import HomeView from "../views/HomeView.vue";
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
path: "/",
|
path: "/",
|
||||||
name: "Home",
|
name: "Home",
|
||||||
component: Home,
|
component: HomeView,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/about",
|
path: "/about",
|
||||||
@ -14,7 +14,7 @@ const routes = [
|
|||||||
// 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/About.vue"),
|
import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|||||||
@ -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: "Home",
|
|
||||||
components: {
|
|
||||||
HelloWorld,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
17
src/views/HomeView.vue
Normal file
17
src/views/HomeView.vue
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<p>test</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// import HelloWorld from "../components/HelloWorld.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "HomeView",
|
||||||
|
|
||||||
|
// components: {
|
||||||
|
// HelloWorld,
|
||||||
|
// },
|
||||||
|
};
|
||||||
|
</script>
|
||||||
7
vue.config.js
Normal file
7
vue.config.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
module.exports = {
|
||||||
|
pluginOptions: {
|
||||||
|
vuetify: {
|
||||||
|
// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vuetify-loader
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue
Block a user