Now, that we have finished the backend (.NET Core Web API part), we have to create the frontend part. In this series, we are going to use Vue.js. It is a pretty new framework but it is already attracting a lot of attention. In a comparison to other popular frameworks, Vue.js is much easier and straightforward to use, so if you are a beginner it should be easier to start with.
We are going to build our frontend as an SPA (Single Page Application). That is the type of web application that never reloads because it’s rewriting the content of a single HTML file resulting in smoother user experience and feeling like its native desktop app.
For the complete navigation of this series, you can visit Vue.js Series.
To download the source code for this part, visit Preparing Vue.js Project Source Code.
Let’s start.
This post is divided into several sections:
Installation of Vue CLI and Starting a New Project
First, we are going to install the Vue CLI (Command Line Interface) which will help us initialize a new Vue application. To install the Vue CLI we are going to type this command at the terminal:
npm install -g vue-cli
After the installation, we are going to create a new project by using the official Vue.js Webpack template. Webpack is a module bundler which will generate static assets from our modules and dependencies.
To create our first Vue.js project, let’s navigate to the folder where we want to create a project and type in terminal:
vue init webpack AccountOwnerClient
After some time, the wizard is going to ask us a couple of questions.
Project Details
The first question is Project name and we are going to type account-owner-client because node package name must not contain capital letters and best practice is to type a name in Kebab Case.
The second question is Project description and we are going to type Account Owner Client for this one.
The third question is Author and we are going to type our name and email in the format Name Surname <email@domain.tld>.
Configuring Vue.js and Linter
The fourth question is whether we want the Runtime + Compiler or just the Runtime. We want the Runtime + Compiler because we are going to write Vue.js components and for that we need Compiler.
The fifth question is whether we want vue-router and we will type Y because we are going to have several pages to navigate through.
The sixth question is whether we want ESLint. ESLint is a great package which takes care of our code style and forces us to write the code by strict rules like the code indentation, writing space before brackets on function definitions, writing a semicolon and a lot of other things. We would advise you to use ESLint, so we are going to answer with Y.
The seventh question is which ESLint preset we want to use. ESLint preset is set of rules and there are a lot of presets because people have different preferences and, for example, some people like writing semicolon at the end of the line while others don’t. Wizard is asking us if we want Standard preset, Airbnb preset or to write our own rules. You can learn more about the Standard rules here, and about the Airbnb rules here. Personally, we like writing a semicolon and the Airbnb rules force that while the Standard does not. But, we don’t like writing a comma on the last element of JSON and that’s what the Standard rules are forcing us. On the other side, the Airbnb does not, so, we are going to use our own ESLint rules. Of course, you can choose whatever suits your style and change that later in the .eslintrc.js file.
Configuring Tests and misc.
The eighth question is about unit tests and we are going to type n because we will not cover any type of tests in this series.
The ninth question is about e2e tests and we are going to type n as well.
The tenth and the last question is whether wizard should run npm install for us to install all dependencies we need. We are going to choose Yes, use NPM.
If you’ve followed everything carefully, you are going to see this as a result:
Let’s wait for the npm to install everything for us and then open the project with any code editor and analyze the project structure. Our advice is to use Visual Studio Code because it has great extensions which can help us a lot with building Vue.js applications. Also, our advice is installing the Vue.js Extension Pack as well.
Project Structure Overview
After we open the project with a code editor, we are going to notice the following folder structure:
Explanation of the most important files and folders:
- src – Our project source code:
- assets – Module assets which will be processed with Webpack
- components – This is where we keep our UI components
- router – Here we write routes and connect them to our UI components
- App.vue – This is entry point component, it’s the main UI component in which all the other components will render
- main.js – Entry point file which will mount
App.vue – our main UI component
- assets – pure assets which will not be processed with Webpack
- index.html – You may remember that SPA application always rewrites the content of one file, so, this is that file. This is the file which we are serving to our visitors. After building a project, this file will load static files which were bundled with Webpack
Let’s take a look at the index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>account-owner-client</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
The only important thing in this file is a div tag with id app, which is going to be replaced with our App.vue component. On the next line, we can notice the comment that says: “built files will be auto injected”. So, our js file, which is bundled with Webpack, is going to be injected below the div with id app.
You may remember that main.js is our entry point, right? Let’s take a look at main.js file which is the first file to be executed when the application starts:
import Vue from 'vue';
import App from './App';
import router from './router';
Vue.config.productionTip = false;
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
});In this code example, we can notice that our main.js imports the Vue module. On the next lines, we can see two additional imports. One is our App component (App.vue) and another one is the router, and for all the import statements we don’t need to specify an extension.
Furthermore, we instantiate a new Vue component which is going to mount our App.vue component inside a div with the id app attribute – you remember div with id app in index.html? Finally, we notify our Vue component to use the router.
Component Structure
Let’s take a look at the App.vue file:
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
};
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>Every Vue component may contain a template, a script, and a style section.
- The template is a visible content of the component
- The script is a logic of the component
- Style, you guessed it, is a style for a template
Template
In a template, we can use native HTML tags as well as our custom Vue components. Here we can see the <router-view/> element and that’s the place where our router is going to render a matching component for that route. We are going to analyze the router file in a few moments.
Script
In the script tag, we write logic for that component. In this component, we only have the name property because this component isn’t dynamic, it is nothing other than the wrapper around our router-view. We are going to cover writing components in the next part of this series.
Style
Here we can write a style for a template. Style can be scoped or global. The scoped style is written this way: <style scoped>. That type of style only affects the template of that component and root element of child components so there is no way for style to leak to another component. Counterwise, non-scoped style will be shared between components.
Router
Let’s take a look at the router/index.js file:
import Vue from 'vue';
import Router from 'vue-router';
import HelloWorld from '@/components/HelloWorld';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
}
]
});In this file, we import Vue again so we can notify Vue to use Router which is imported from a package named vue-router. Furthermore, we import the HelloWorld component from the components folder. The @ symbol in a path is a Webpack alias for the root of the project, so whenever we want to import something and to navigate to the root folder we can use @.
Next, we notice instantiating the Router and list of routes. We may notice the path / which means when we open our application and navigate to the root (/) it is going to serve us the HelloWorld component. The content of that component is going to be served in the App.vue component inside the <router-view/> tag, remember?
We are not going to analyze the HelloWorld.vue file because it’s pretty much the same as the App.vue file. It’s just another component with some content in a template and we are going to see how it looks like, but this time in a browser.
Starting Our Application
Now that we understand the code, it’s time to run the application and see everything on a live example.
Let’s type this command in terminal:
npm run dev
This is going to run our application in a development mode. Afer running that command, let’s open our web-browser and navigate to http://localhost:8080/. If everything is OK, we should be able to see the starting page of our application:
We may notice the Vue.js logo which is the part of the App.vue component. Under the logo, we see the content of the HelloWorld.vue file which is rendered inside the <router-view/>element of the App.vue component. The application is rendering the HelloWorld.vuecomponent because we are on the / route.
Conclusion
Excellent.
You have learned how to create and run a new Vue.js project. But this is just a beginning of this great journey! We still have a lot of work to do and to try out the great Vue.js features!
By reading this post you’ve learned:
- The way of creating a new Vue.js application
- What is SPA and why it’s a great way of writing applications
- The overview od Vue.js components
- The basics of Vue.js routing
In the next part of the series, we are going to show how to install a third-party library, create navigation and also how to use routing.
If you have enjoyed reading this article and if you would like to receive the notifications about the freshly published .NET Core content we encourage you to
subscribe to our blog.
The post Creating Vue.js Client Side – Preparing Project and Project Structure Overview appeared first on Code Maze.
Log in
