Scribd
Upload
168 views

Develop Game in Vue

vue

Uploaded by

Kê L Ly
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
168 views

Develop Game in Vue

vue

Uploaded by

Kê L Ly
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 10

Module: Develop Simple Game in Vue

(Vue.js Framework)
Learning outcome 1 of 4 : Setup Environment

Key Concepts

01. Framework

Vue.js is a JavaScript framework for building user interfaces (UIs) and single-page applications (SPAs).

02. CLI

A command-line interface (CLI) is a text-based user interface (UI) used to run programs, manage
computer files and interact with the computer. Command-line interfaces are also called command-line
user interfaces, console user interfaces and character user interfaces.

03. IDE

An integrated development environment (IDE) is a software suite that consolidates basic tools required
to write and test software. Developers use numerous tools throughout software code creation, building
and testing. Development tools often include text editors, code libraries, compilers and test platforms.

04. Front End

The front end of a website is everything the user either sees or interacts with when they visit the
website. It is responsible for the total look and feel of an online experience.

05. Back end

The backend (or “server-side”) is the portion of the website you don’t see. It’s responsible for storing
and organizing data, and ensuring everything on the client-side actually works. The backend
communicates with the frontend, sending and receiving information to be displayed as a web page.

06. Single Page Application

A single page application is a website or web application that dynamically rewrites a current web page
with new data from the web server, instead of the default method of a web browser loading entire new
pages

07. Nodejs and NPM (Node Package Manager)

Node.js is an open source server environment that allows you to run JavaScript on the server.

NPM is a package manager for Node.js packages, or modules.

08. Dependences
In package. json file, there is an object called dependencies and it consists of all the packages that are
used in the project with its version number.

09. Environments

Js (Node) is an open source, cross-platform runtime environment for executing JavaScript code. Node is
used extensively for server-side programming, making it possible for developers to use JavaScript for
client-side and server-side code without needing to learn an additional language.It icludes both
Development, production and testing environments.

10. Introduction to Vue js Framework

VueJS is an open source progressive JavaScript framework used to develop interactive web interfaces. It
is one of the famous frameworks used to simplify web development. VueJS focusses on the view layer. It
can be easily integrated into big projects for front-end development without any issues. For a student to
Learn Vue js he should have a basic understanding of HTML, CSS, and JavaScript.

10.1. How to Install Vue js

Method 1: Using the <script> tag directly in HTML file

Go to the home site https://vuejs.org/v2/guide/installation.html of VueJS and download the vue.js as


per need. Import the file in the script tags as shown in the example below.

<html>

<head>

<script type = "text/javascript" src = "vue.min.js"></script>

</head>

<body></body>

</html>

Method 2: Using CDN

We can also start using VueJS file from the CDN library. The link https://unpkg.com/vue will give the
latest version of VueJS. VueJS is also available on jsDelivr (https://cdn.jsdelivr.net/npm/vue/dist/vue.js)
and cdnjs (https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js).

Method 3: Using NPM

For large scale applications with VueJS, it is recommended to install using the npm package. It comes
with Browserify and Webpack along with other necessary tools, which help with the development.
Following is the command to install using npm.
> npm install vue

Method 4: Using CLI Command Line

VueJS also provides CLI to install the vue and get started with the server activation. To install using CLI,
we need to have CLI installed which is done using the following command.

> npm install --global vue-cli

*Following is the command to create the project using Webpack.

> vue init webpack myprojec

*To get started, use the following command.

cd myproject

npm install

npm run dev

Source: https://www.tutorialspoint.com/vuejs/vuejs_environment_setup.htm

11. Install Nodejs

Method 1: Try it Option Online

You really do not need to set up your own environment to start learning Node.js. Reason is very simple,
we already have set up Node.js environment online, so that you can execute all the available examples
online and learn through practice. Feel free to modify any example and check the results with different
options.Try the following example:

/* Hello World! program in Node.js */

console.log("Hello World!");

Method 2: Local Environment Setup

If you are still willing to set up your environment for Node.js, you need the following two softwares
available on your computer, (a) Text Editor and (b) The Node.js binary installables.

> Installation on Windows

Use the MSI file and follow the prompts to install the Node.js. By default, the installer uses the Node.js
distribution in C:\Program Files\nodejs. The installer should set the C:\Program Files\nodejs\bin
directory in window's PATH environment variable. Restart any open command prompts for the change
to take effect.

Verify installation: Executing a File


Create a js file named main.js on your machine (Windows or Linux) having the following code.

/* Hello, World! program in node.js */

console.log("Hello, World!")

Now execute main.js file using Node.js interpreter to see the result −

$ node main.js

If everything is fine with your installation, this should produce the following result −

>Hello, World!

Note: You can get nodejs on https://nodejs.org/en/

12. Testing Javascript files using Nodejs

Step 1 - Import Required Module

We use the require directive to load the http module and store the returned HTTP instance into an http
variable as follows −

var http = require("http");

Step 2 - Create Server

We use the created http instance and call http.createServer() method to create a server instance and
then we bind it at port 8081 using the listen method associated with the server instance. Pass it a
function with parameters request and response. Write the sample implementation to always return
"Hello World".

http.createServer(function (request, response) {

// Send the HTTP header

// HTTP Status: 200 : OK

// Content Type: text/plain

response.writeHead(200, {'Content-Type': 'text/plain'});

// Send the response body as "Hello World"

response.end('Hello World\n');

}).listen(8081);
// Console will print the message

console.log('Server running at http://127.0.0.1:8081/');

The above code is enough to create an HTTP server which listens, i.e., waits for a request over 8081 port
on the local machine.

Step 3 - Testing Request & Response

Let's put step 1 and 2 together in a file called main.js and start our HTTP server as shown below

var http = require("http");

http.createServer(function (request, response) {

// Send the HTTP header

// HTTP Status: 200 : OK

// Content Type: text/plain


<div id="app">
response.writeHead(200, {'Content-Type': 'text/plain'});
<h1>{{ message }}</h1>
// Send the response body as "Hello World"
</div>

<script>
response.end('Hello World\n');
var myObject = new Vue({
}).listen(8081);
el: '#app',

// Console will print


data: {message: 'Hellothe message
Vue!'}

})
console.log('Server running at http://127.0.0.1:8081/');
</script>
Now execute the main.js to start the server as follows −

$ node main.js

Verify the Output. Server has started.

Server running at http://127.0.0.1:8081/

Make a Request to the Node.js Server

Open http://127.0.0.1:8081/ in any browser and observe the following result.

> Hello Word!

13. Install Vue CLI with NPM


For large scale applications with VueJS, it is recommended to install using the npm package. It comes
with Browserify and Webpack along with other necessary tools, which help with the development.
Following is the command to install using npm.
<!DOCTYPE html>
> npm install vue
<html>
14. Run a vue Project
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
Vue.js Directives
<body>
Vue.js uses double braces {{ }} as place-holders for data. Vue.js directives are HTML attributes with the
<h2>Vue.js</h2>
prefix v. In the example below, a new Vue object is created with new Vue(). The property el: binds the
<div
newid="app">
Vue object to the HTML element with id="app".
{{ message }}

</div>

<p>

<button onclick="myFunction()">Click Me!</button>

</p>

<script>

var myObject = new Vue({

el: '#app',
Vuejs
data: Binding
{message: 'Hello Vue!'}

})When a Vue object is bound to an HTML element, the HTML element will change when the Vue object
changes:
function myFunction() {

myObject.message = "John Doe";

</script>

</body>

</html>
<!DOCTYPE html>

<html>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<body>

<h2>Vue.js</h2>

<div id="app">

<p>{{ message }}</p>

<p><input v-model="message"></p>

</div>

<script>

myObject = new Vue({

el: '#app',

data: {message: 'Hello Vue.js!'}

})

</script>

</body>

</html>

Vue.js Two-Way Binding

The v-model directive binds the value of HTML elements to application data. This is called two-way
binding:
<!DOCTYPE html>

<html>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<body>

<h2>Vue.js</h2>

<div id="app">

<ul>

<li v-for="x in todos">

{{ x.text }}

</li>

</ul>

</div>

<script>

myObject = new Vue({

el: '#app',

data: {

todos: [

{ text: 'Learn JavaScript' },

{ text: 'Learn Vue.js' },

{ text: 'Build Something Awesome' }

})

</script>
Vue.js Loop Binding

Using the v-for directive to bind an array of Vue objects to an "array" of HTML element:
</body>

</html>
15. Description of a view Project Folders and files

The newly created Vue project has the following folders and files:
 src: the sources of your project
 public: all the content that will be directly put at the root of the web server, without going
through Webpack
 package.json: the NPM package information of the project (version, dependencies, scripts etc.)
 vue.config.js: the configuration file for Vite on this project

Other configuration files for the build tools can also be found here.

In the src folder, you have:

 assets: static resources (images, files) that will be imported by Webpack within your Vue
components
 components: your Vue components (distributed by folder by "module" of your application)
 App.vue: Your root Vue component, which contains the entire application
 main.js: the entry point of the entire application's JavaScript code

Note: Later, you may need to create additional folders in src as needed. For example, a services folder is
commonly found which contains business logic bricks with functions used in several components. Or a
utils folder to store various utility functions in JavaScript instead of repeating them in multiple places.

For more Information Vist

www.tutorialspoint.com

www.w3schools.com

Learning outcome 2 will be ready next week

You might also like