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"],
|
||||
parserOptions: {
|
||||
parser: "babel-eslint",
|
||||
parser: '@babel/eslint-parser',
|
||||
},
|
||||
rules: {
|
||||
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
|
||||
|
||||
@ -1,5 +1,14 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es2015",
|
||||
"module": "esnext",
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"@/*": ["components/*"]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"./src/**/*"
|
||||
"src/**/*.vue",
|
||||
"src/**/*.js"
|
||||
]
|
||||
}
|
||||
38
package.json
38
package.json
@ -8,25 +8,35 @@
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@mdi/font": "5.9.55",
|
||||
"core-js": "^3.6.5",
|
||||
"register-service-worker": "^1.7.1",
|
||||
"roboto-fontface": "*",
|
||||
"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": {
|
||||
"@vue/cli-plugin-babel": "~4.5.0",
|
||||
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||
"@vue/cli-plugin-pwa": "~4.5.0",
|
||||
"@vue/cli-plugin-router": "~4.5.0",
|
||||
"@vue/cli-service": "~4.5.0",
|
||||
"@babel/core": "^7.12.16",
|
||||
"@babel/eslint-parser": "^7.12.16",
|
||||
"@vue/cli-plugin-babel": "~5.0.0-rc.3",
|
||||
"@vue/cli-plugin-eslint": "~5.0.0-rc.3",
|
||||
"@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/eslint-config-prettier": "^6.0.0",
|
||||
"babel-eslint": "^10.1.0",
|
||||
"eslint": "^6.7.2",
|
||||
"eslint-plugin-prettier": "^3.3.1",
|
||||
"eslint-plugin-vue": "^7.0.0",
|
||||
"prettier": "^2.2.1",
|
||||
"sass": "^1.26.5",
|
||||
"sass-loader": "^8.0.2"
|
||||
}
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"prettier": "^2.4.1",
|
||||
"sass": "^1.38.0",
|
||||
"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>
|
||||
<html lang="">
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
|
||||
42
src/App.vue
42
src/App.vue
@ -1,30 +1,22 @@
|
||||
<template>
|
||||
<div id="nav">
|
||||
<router-link to="/">Home</router-link> |
|
||||
<router-link to="/about">About</router-link>
|
||||
</div>
|
||||
<v-app>
|
||||
<v-app-bar elevation="4">
|
||||
<v-app-bar-title>Vue CNC Calculator</v-app-bar-title>
|
||||
</v-app-bar>
|
||||
<v-main>
|
||||
<v-container>
|
||||
<router-view />
|
||||
</v-container>
|
||||
</v-main>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
#app {
|
||||
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
text-align: center;
|
||||
color: #2c3e50;
|
||||
}
|
||||
<script>
|
||||
export default {
|
||||
name: "App",
|
||||
|
||||
#nav {
|
||||
padding: 30px;
|
||||
|
||||
a {
|
||||
font-weight: bold;
|
||||
color: #2c3e50;
|
||||
|
||||
&.router-link-exact-active {
|
||||
color: #42b983;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
data: () => ({
|
||||
//
|
||||
}),
|
||||
};
|
||||
</script>
|
||||
|
||||
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>
|
||||
<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
|
||||
>.
|
||||
<v-container>
|
||||
<v-row class="text-center">
|
||||
<v-col cols="12">
|
||||
<v-img :src="logo" class="my-3" contain height="200" />
|
||||
</v-col>
|
||||
|
||||
<v-col class="mb-4">
|
||||
<h1 class="display-2 font-weight-bold mb-3">
|
||||
<div>Welcome to the Vuetify 3 Alpha</div>
|
||||
</h1>
|
||||
|
||||
<p class="subheading font-weight-regular">
|
||||
For help and collaboration with other Vuetify developers,
|
||||
<br />please join our online
|
||||
<a href="https://community.vuetifyjs.com" target="_blank"
|
||||
>Discord Community</a
|
||||
>
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li>
|
||||
</v-col>
|
||||
|
||||
<v-col class="mb-5" cols="12">
|
||||
<h2 class="headline font-weight-bold mb-5">What's next?</h2>
|
||||
|
||||
<v-row justify="center">
|
||||
<a
|
||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
|
||||
v-for="(next, i) in whatsNext"
|
||||
:key="i"
|
||||
:href="next.href"
|
||||
class="subheading mx-3"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>babel</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
{{ next.text }}
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<v-col class="mb-5" cols="12">
|
||||
<h2 class="headline font-weight-bold mb-5">Important Links</h2>
|
||||
|
||||
<v-row justify="center">
|
||||
<a
|
||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa"
|
||||
v-for="(link, i) in importantLinks"
|
||||
:key="i"
|
||||
:href="link.href"
|
||||
class="subheading mx-3"
|
||||
target="_blank"
|
||||
rel="noopener"
|
||||
>pwa</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
{{ link.text }}
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<v-col class="mb-5" cols="12">
|
||||
<h2 class="headline font-weight-bold mb-5">Ecosystem</h2>
|
||||
|
||||
<v-row justify="center">
|
||||
<a
|
||||
href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
|
||||
v-for="(eco, i) in ecosystem"
|
||||
:key="i"
|
||||
:href="eco.href"
|
||||
class="subheading mx-3"
|
||||
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>
|
||||
{{ eco.text }}
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import logo from "../assets/logo.svg";
|
||||
|
||||
export default {
|
||||
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>
|
||||
|
||||
<!-- 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 App from "./App.vue";
|
||||
import "./registerServiceWorker";
|
||||
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 Home from "../views/Home.vue";
|
||||
import HomeView from "../views/HomeView.vue";
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: "/",
|
||||
name: "Home",
|
||||
component: Home,
|
||||
component: HomeView,
|
||||
},
|
||||
{
|
||||
path: "/about",
|
||||
@ -14,7 +14,7 @@ const routes = [
|
||||
// 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"),
|
||||
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