Mostly set up
This commit is contained in:
The Jared Wilcurt committed
1 parent
2cf9a5b16f
commit
620b4f3ddb
30 files changed
+17386
-57
No files matched your search
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<h3 data-test="versions">
|
||||
You are using
|
||||
Vue.js (v{{ vueVersion }}),
|
||||
NW.js (v{{ versions.nw }}-{{ versions['nw-flavor'] }}),
|
||||
Node.js (v{{ versions.node }}),
|
||||
and
|
||||
Chromium (v{{ versions.chromium }}).
|
||||
</h3>
|
||||
|
||||
<button v-if="devMode" @click="toggleDevTools">
|
||||
<template v-if="showDevTools">
|
||||
Show
|
||||
</template>
|
||||
<template v-else>
|
||||
Hide
|
||||
</template>
|
||||
Developer Tools
|
||||
</button>
|
||||
|
||||
<p>You can use the resources below to find more information around building your Vue App.</p>
|
||||
<LinkList :links="welcomeLinks" />
|
||||
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<LinkList :links="pluginLinks" />
|
||||
|
||||
<h3>Essential Links</h3>
|
||||
<LinkList :links="essentialLinks" />
|
||||
|
||||
<h3>Ecosystem</h3>
|
||||
<LinkList :links="ecosystemLinks" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Vue from 'vue';
|
||||
|
||||
import LinkList from '@/components/LinkList.vue';
|
||||
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
components: {
|
||||
LinkList
|
||||
},
|
||||
props: {
|
||||
msg: {
|
||||
type: String,
|
||||
default: 'Welcome to your Vue Desktop App in NW.js!'
|
||||
}
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
showDevTools: true,
|
||||
welcomeLinks: [
|
||||
{
|
||||
name: 'nw-vue-cli-example',
|
||||
url: 'https://github.com/nwutils/nw-vue-cli-example'
|
||||
},
|
||||
{
|
||||
name: 'NW.js',
|
||||
url: 'https://nwjs.io'
|
||||
},
|
||||
{
|
||||
name: 'nw-vue-devtools',
|
||||
url: 'https://github.com/nwutils/nw-vue-devtools'
|
||||
},
|
||||
{
|
||||
name: 'nwjs-builder-phoenix',
|
||||
url: 'https://github.com/evshiron/nwjs-builder-phoenix'
|
||||
},
|
||||
{
|
||||
name: 'vue-cli',
|
||||
url: 'https://cli.vuejs.org'
|
||||
}
|
||||
],
|
||||
pluginLinks: [
|
||||
{
|
||||
name: 'babel',
|
||||
url: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel'
|
||||
},
|
||||
{
|
||||
name: 'eslint',
|
||||
url: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint'
|
||||
},
|
||||
{
|
||||
name: 'unit-jest',
|
||||
url: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-unit-jest'
|
||||
},
|
||||
{
|
||||
name: 'e2e-cypress',
|
||||
url: 'https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-e2e-cypress'
|
||||
}
|
||||
],
|
||||
essentialLinks: [
|
||||
{
|
||||
name: 'Core Docs',
|
||||
url: 'https://vuejs.org'
|
||||
},
|
||||
{
|
||||
name: 'Forum',
|
||||
url: 'https://forum.vuejs.org'
|
||||
},
|
||||
{
|
||||
name: 'Community Chat',
|
||||
url: 'https://chat.vuejs.org'
|
||||
},
|
||||
{
|
||||
name: 'Twitter',
|
||||
url: 'https://twitter.com/vuejs'
|
||||
},
|
||||
{
|
||||
name: 'News',
|
||||
url: 'https://news.vuejs.org'
|
||||
}
|
||||
],
|
||||
ecosystemLinks: [
|
||||
{
|
||||
name: 'vue-router',
|
||||
url: 'https://router.vuejs.org'
|
||||
},
|
||||
{
|
||||
name: 'vuex',
|
||||
url: 'https://vuex.vuejs.org'
|
||||
},
|
||||
{
|
||||
name: 'vue-devtools',
|
||||
url: 'https://github.com/vuejs/vue-devtools#vue-devtools'
|
||||
},
|
||||
{
|
||||
name: 'vue-loader',
|
||||
url: 'https://vue-loader.vuejs.org'
|
||||
},
|
||||
{
|
||||
name: 'awesome-vue',
|
||||
url: 'https://github.com/vuejs/awesome-vue'
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleDevTools: function () {
|
||||
if (this.showDevTools) {
|
||||
nw.Window.get().showDevTools();
|
||||
} else {
|
||||
nw.Window.get().closeDevTools();
|
||||
}
|
||||
this.showDevTools = !this.showDevTools;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
devMode: function () {
|
||||
return process.env.NODE_ENV === 'development';
|
||||
},
|
||||
versions: function () {
|
||||
return window.process.versions;
|
||||
},
|
||||
vueVersion: function () {
|
||||
return Vue.version;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0px 0px;
|
||||
}
|
||||
button {
|
||||
background: linear-gradient(0deg, #2EB277, #65E6AC);
|
||||
border-width: 3.4px;
|
||||
border-color: #35495E;
|
||||
border-radius: 8px;
|
||||
margin: 22px 0px 6px 0px;
|
||||
padding: 11px 17px;
|
||||
color: #050709;
|
||||
font-family: 'Trebuchet MS', Verdana, sans-serif;
|
||||
font-size: 19px;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<ul v-if="links">
|
||||
<li
|
||||
v-for="(link, linkIndex) in links"
|
||||
:title="link.url.replace('https://', '')"
|
||||
:key="'eco' + linkIndex"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
@click.prevent="open(link.url)"
|
||||
>
|
||||
{{ link.name }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'LinkList',
|
||||
props: {
|
||||
links: {
|
||||
type: Array,
|
||||
required: false,
|
||||
default: null,
|
||||
validator: function (links) {
|
||||
let valid = true;
|
||||
links.forEach(function (link) {
|
||||
if (
|
||||
!link.name ||
|
||||
!link.url ||
|
||||
!link.name.length ||
|
||||
!link.url.length ||
|
||||
typeof(link.name) !== 'string' ||
|
||||
typeof(link.url) !== 'string'
|
||||
) {
|
||||
valid = false;
|
||||
}
|
||||
});
|
||||
return valid;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
open: function (url) {
|
||||
nw.Shell.openExternal(url);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
ul {
|
||||
padding: 0px;
|
||||
list-style-type: none;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0px 10px;
|
||||
}
|
||||
a {
|
||||
color: #42B983;
|
||||
}
|
||||
</style>
|
||||
Reference in new issue
Block a user