5. Vue CLI

For large-scale applications with Vue.js, it is recommended to install using the Vue CLI. To install using CLI, we need to have CLI installed which is done using the following command. But before you need to install Node.js in your system and then you will be able to install Vue CLI.

npm install -g @vue/cli

Once done, it shows the CLI version for VueJS. It takes a few minutes for the installation.

+ vue-cli@*
  added XYZ packages in XYZs

To create a new project, run:

vue create your_project_name

Then you can select any presets. You can either choose the default preset which comes with a basic Babel + ESLint setup, or “Manually select features” to pick the features you need.

The default setup is good for quickly prototyping a new vue.js project, and manual setup provides more options that are likely needed for more production-oriented projects.

Project Structure

Let’s understand each file and folder one by one. Next, I’ll show you how to use data and method property inside the Vue instance.

node_modules: This is the folder where all the dependencies and libraries which are required to build Vue are stored.

public: In the public directory, you’ll usually put files that you don’t want to process through webpack. For example images.

src: This is the folder where the application source code of your Vue Application resides.

assets: In this folder, you’ll store all the assets of your application, which includes fonts, images, etc.

components: This folder should contain all the components or the building blocks of your application.

views: The folder where we store the file for different views or pages of our application.

App.vue: App.vue file is the root component, all other components are nested within this component.

main.js: This is the file that renders our app and mounts it to the DOM.

router/index.js: This is a configuration file for the Vue Router, which we will cover in upcoming sections.

store/index.js: This is a configuration file for VueX.

.gitignore: This is a file for git version control, and contains a list of files that needs to be ignored by Git.

babel.config.js: Config file for babel.

package.json: This file helps npm to identify this project and handle its dependencies.

Run Vue.js app for Development

npm run serve

Run Vue.js app for Production

npm run build

After building your Vue.js app, there will be a dist directory that is your final app.

Keep watching this and follow us for more tech articles or you can reach out to me for any doubt and suggestions and the next blog in the series will be published soon.

Thanks

Happy Coding!