If you’ve never created a Vue.js application before, this guide will walk you through the process of creating one and help you understand how it works. We’ll be building a Vue CLI default application as our example.
First Example
Let’s start with the most basic example of using Vue. You can create an HTML file like this:
<html>
<body>
<div id="example">
<p>{{ hello }}</p>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
new Vue({
el: '#example',
data: { hello: 'Hello World!' }
})
</script>
</body>
</html>
Simply open this file in your browser, and you’ll have your first Vue app! The page should display a “Hello World!” message.
The script tags are placed at the end of the body to ensure they are executed in the correct order after the DOM is loaded. In this code, we create a new Vue app and link it to the #example
element as its template. We then associate that template with a data
object which contains the dynamic content to be rendered by Vue.
You can see this example on Codepen: link
Second Example: the Vue CLI Default App
Now let’s take things up a notch and look at the Vue CLI default application. This app is already pre-built and ready for you to explore.
Use the Vue CLI Locally
To get started with the Vue CLI locally, install it on your computer and run the following command:
vue create <enter the app name>
Use CodeSandbox
If you prefer not to install anything, you can use CodeSandbox to access the Vue CLI default application. Simply visit this link to get started.
CodeSandbox is a convenient code editor that allows you to build apps in the cloud. It provides access to npm packages and integrates easily with platforms like Zeit Now and GitHub.
Whether you choose to use the Vue CLI locally or through CodeSandbox, let’s take a closer look at the Vue app’s file structure.
The Files Structure
In addition to the package.json
file, which contains the configuration, the initial project structure includes the following files:
index.html
src/App.vue
src/main.js
src/assets/logo.png
src/components/HelloWorld.vue
index.html
The index.html
file serves as the main app file. It includes a simple element <div id="app"></div>
, which the Vue application will use to attach itself to the DOM.
src/main.js
This is the main JavaScript file that powers our app. It imports the Vue library and the App
component from App.vue
. We also set productionTip
to false to prevent Vue from outputting a development mode tip in the console. Then, we create a new Vue instance and assign it to the DOM element identified by #app
in index.html
. Finally, we tell Vue to use the App
component.
src/App.vue
App.vue
is a Single File Component that contains three sections: HTML, CSS, and JavaScript. Single File Components are a great way to encapsulate all the necessary code for a component in a single file.
In the <template>
section, we define the HTML markup for the component. In the <script>
section, we import the HelloWorld
component and set up the component for use within the App
component. The <style>
section contains styling specific to the App
component, in this case, CSS that will be applied to the entire page.
src/components/HelloWorld.vue
This file contains the HelloWorld
component, which is included by the App
component. The component outputs a set of links along with a message. The component’s CSS is scoped, meaning it only applies to elements within the HelloWorld
component and won’t affect other parts of the page.
To run the app and make changes, you can take advantage of CodeSandbox’s preview functionality. This allows you to edit the source code and see the changes reflected in real-time.
That’s it! You’ve created your first app with Vue.js. Feel free to explore the provided examples and experiment with creating your own Vue.js applications.
Tags: Vue.js, Vue CLI, frontend development