In this shot, we will be creating a Vue project as a follow up to ‘Getting started with Vue JS’.
So, it’s time to create our first project. To do that, run the command vue create [project name]. For example, let’s create a project named hello-world:
vue create hello-world
You will then be presented with some preset options asking you whether you want to start your project with a Vue supported library or go with the default. For now, let’s select the default – use the arrow keys to move between the options and press the enter key to select.
As long as you are connected to the internet, your installation will start immediately. A folder will be created for the project and all the default dependencies are installed; it might take a minute depending on your internet speed, but you will get a screen similar to this:
When the installation is done, you will see this:
Run the following commands to enter your project folder and run the application:
cd hello-world npm run serve
The application compiles, and when it is done, you will see something like the following. The application will be served on your local machine, in development mode, on a particular port. In my case it is served on port 8081:
Visit the address in your browser (i.e, http:localhost:8081) and you should have the official landing page of Vue Js.
Congratulations on creating your first Vue app! Now, let’s check out what makes up our app and where all the information that we have on the landing page came from.
After you open the folder in your editor, look on the left pane. You should have folder files as such:
node_modules contain the Vue core and other dependencies. When we install/add new dependencies, the files are stored in the node_modules and can be accessed from there.
public folder contains a single Html file where our app renders.
package.json, there is a JSON object that contains information about the project, the name, version, scripts used to run the project, dependencies, and other app configuration information.
.gitignore contains a list of files and folders we wish to ignore when running a version control system. The files listed in the .gitignore will not be pushed to our repo by default.
README.md is our standard read me text file to pass information about the project to other users or collaborators.
babel.config.js houses the babel configurations for the project.
package-lock.json is automatically generated for any operations where npm modifies either the node_modules tree or package.json.
This is where most of our work happens; this is where we write Vue codes, create our components, and store the project assets. It also contains one very important file named
main.js is the entry point into a Vue application. It is where the root Vue instance is declared and configured. The code in
main.js looks like this:
On line 1, above, we import Vue from the ‘vue’ npm package, which is located in our node_modules/ folder.
On line 2, we import the main Vue component named App from ./App.vue.
On line 6-8, we mount our component to #app — this is where we declare
div id="app" in our public/index.html as the rendering target of our VueJS app.
Now, let’s take a look at the main Vue component (
App.vue) which is also in the src folder. Vue uses the Single File Component (SFC) model where the markup, style, and script are contained in one single file with the .vue extension.
This is how our App.vue SFC looks like in this case:
In the script tag, we import another component, HelloWorld, from './components/HelloWorld.vue
. We then have our Vue instance defined in the export default` object. In this Vue instance, we have to register the imported component as seen here:
View all Courses