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.
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.
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.