Hello, It’s coder by gleentech. Dear readers today I will talk about my vuejs 3 frontend struggles to make a magazine website. I will teach in this first part how to create a project, add small fragments of Menu and footer components, and the build itself.
I will show it how I made it on my MBP 2011. First of all, I made already in Python flask all the backend environments. I made a small software to render HTML and markdown with flask. I can now manage all my posts. When I decided to use all these technologies was to have a web application. I hope to teach API too. This will be three-part tutorial. I will teach now how we can create and manage the main core. I have been learning vue since I started to code nativescript with typescript.
1:
→ vue
create name_of_the_project
→ choose
vuejs3
→ in
the end yarn serve
2:
→ Open
the browser and type localhost:8080
You
will see the main project
Close
it with ctrl+c
3:
You
will need vs code to code all the source files
After
opened create two files on components.
One
called Menu.vue and the other as Footer.vue
4:
inside
Menu.vue type this lines of code
<template>
<header>
</header>
</template>
<script>
import
{ defineComponent
} from
‘@vue/composition-api’
export
default
defineComponent({
setup()
{
},
})
</script>
<style
scoped>
header
{
background-color:
bluebird;
padding:
10px;
}
</style>
Inside
Footer.vue
<template>
<footer>
<p>(C)
Copyright Brand 2020</p>
</footer>
</template>
<script>
import
{ defineComponent
} from
‘@vue/composition-api’
export
default
defineComponent({
setup()
{
},
})
</script>
<style
scoped>
footer
{
background-color:
blue;
padding:
10px;
}
</style>
on the vs code type yarn serve to see what it happens. If shows a few lines to see localhost. You are ready to go. Next article I will teach how to manage components and bootstrap next which is bootstrap 5. This first part is a basic tutorial, not an in-depth tutorial that I have in mind.
I still have other projects to embrace. I am coding typescript, javascript, and c++ most of the time. I will rather be good at these languages than know a lot of them. It sounds like we are not good at all knowing a lot. I have been working on vue and nativescript since December. Also, I am working with c++ to make my own games which are my hobbies.
Thanks
for reading.
As a javascript, nodejs, and Unix/Linux developer I will teach how to hack a vuejs3 as a hacking way.
I started to code vuejs3 in December after coding ecmascript5 and 6 under the hood, besides typescript. Typescript is a superset of the ECMAscript 5 and 6. It’s a transpiling tool. With the management of babel and webpack. Which I will write an article about both.
To do this we must have part1 done. The majority of things we will hack are on the top of the vuejs3 part 1. If you didn’t do part1 we cannot understand the hacking. But I will explain again part 1 here. Under as a part 2. This part 2 will be delivered as an ebook pdf for kindle and kobo devices. This magazine coder by gleentech delivered by Gleentech Solutions and kreatyve Designs will give techniques about coding and operating systems such as MacOS, FreeBSD and Linux. We will see deployments of those OS’es under Parallels use. I will teach how to manage them with some tutorials under VMs. As a coder, I rather use Parallels Inc instead of Oracle VB and VMWare Inc. These last ones in my opinion are not so optimized for macOS or even Apple structure. So much consumption. This magazine will give some new approaching techniques to optimize your machines, trying to get rid of Kubernetes or even docker-compose. I had some issues with those applications for composing and containerizing them. It made my battery go. So I needed to switch for a new battery around 2 years ago.
→ vue
create nameofproject
→ choose
vue3 babel / eslint
→ cd
nameofproject
→ yarn
serve
I will explain later what is it babel and eslint. These two come as a bundle for yarn serve to debug our web applications.
This article will teach how to work on vuejs 3 under macOS with the vs code and terminal. Besides I am finishing writing an article about cli, the terminal of POSIX family. POSIX family is the environment for Unix and Linux. Slackware is more POSIX-like than Ubuntu or others. It’s a superuser, power user admin operating system. You need to install everything from the iso from them as a cli shell. You need to install vs code on macOS, I am teaching how to use it on my MBP 2011 but I have also a mac mini from 2015 series. Go to the page of vscode to install the file for macOS.
Eslint is a javascript tool to debug our own code, we can make npm test or run tests with yarn. Babel tool which we can use to serve our own code basis as a testing and bundler object. We can use it with webpack. For instance, we can run webpack projects with eslint and babel mixed-in.
When
we do
→ yarn
build
We build a ‘dist’ folder with all the website, and components inside to be delivered. With eslint we can test with eval commands to see what is happening with our code. I think the worst scenario is to delete the folder and copy everything into the back. Sometimes when we are learning the worst scenario is to delete all the folders and code everything back on.
→ rm
-rf foldername
→ vue
create foldername
→ cd
foldername
→ yarn
serve
Now
I am going to teach how to hack a simple vuejs3 application.
First
of all, type the before commands then follow what I am writing.
→ cd
foldername
→ rename
HelloWorld.vue to Index.vue
→ <HelloWorld
msg=”Welcome
to Your Vue.js App”/>
→ rename
it to <Home
msg=”Welcome
to Your Vue.js App”/>
→ <script>
import
Home from
‘./components/Index.vue’
//import
Footer from ‘./components/Footer.vue’
//import
Header from ‘.components/Header.vue’
export
default {
name:
‘App’,
components:
{
Home
}
}
</script>
Under
this script rename
→ import
HelloWorld
from
‘./components/HelloWorld.vue’
to
→ import
Home
from
‘./components/Index.vue’
→ yarn
serve
Now
you can see a logo and a page.
Next time we learn how to modify the main component to be seen as a spa application interface.
