Building Simple CRM with Vue: Getting Started with Project Setup

Check this post in my web notes!

Short plan for today's article:

1. Start with Vue Project Setup.

2. Consider the Vue Project Structure.

3. Install Firebase.

Unlocking the secrets of Frontend development with Vue goes beyond theory – it's about hands-on practice. You've probably encountered this advice multiple times, and for a good reason—it holds. While aspiring to secure your dream job in the tech industry, possessing knowledge alone won't suffice. Practical expertise is the key to success. In today's article, we embark on a journey to reinforce your skills by diving into the creation of a simple CRM system using Vue.js. Follow along as we unravel the fundamentals of Vue development and apply them to a real-world project.

1. Install New Vue Project.

First, you need to be sure that you have installed Node.js and the Node Package Manager. You can find all versions on the Node.js website here.

We will create a Vue Application by using official documentation recommendations. Let's create a new folder and call it "vue-CRM" and then open this folder with a code editor, in my case I will use VS Code.

In the terminal, we will add a command: npm create vue@latest.

Then we will have to answer on few questions like: "Project name" - I will set "." so that my project name will be the same as the folder name; "Package name" - "Sherman", you can write anything you want; on the next questions, I'll choose only "Vue Router" and "Pinia" to be installed.

Press Enter and console command: npm install.

Done, all necessary dependencies and files were installed and we can run just created app on development mode by using the command: npm run dev.

2. Consider the Vue Project Structure.

Okay, we have a few different folders and files which all are important and store some functionality for our future project. Let's look at those folders:

• "package.json" is a configuration file in JavaScript projects that includes metadata about the project, dependencies, and various settings.

• "package-lock.json" is a file generated by npm that provides a detailed, version-specific dependency tree for a JavaScript project, ensuring consistent installations across different environments.

• "readme.md" is a documentation to provide information about the project, its usage, installation instructions, and other relevant details for developers and users.

• "vite.config.js" is a configuration file used in Vite.js projects to define custom build and development settings, enabling developers to tailor the build process and development server behavior for their specific requirements.

• "jsconfig.json" specifies the project's settings, such as the base directory, compiler options, and file inclusion/exclusion rules, facilitating better tooling support and improved developer experience.

• "index.html" is the main HTML file that serves as the entry point for the application. It typically includes the root element where the Vue.js app is mounted and may contain links to external stylesheets, scripts, and other essential elements for the web application.

• "public" folder is a directory where static assets like images, fonts, and other files can be placed. The contents of the "public" folder are directly served by the web server and are accessible using absolute paths.

• "src" folder, is the most interesting for us because it is a place where the application source code is typically stored, we will work with this folder in the future and consider its files more detailed. But shortly: "assets" folder contains our global style files, images and icons; the "components" folder as it sounds and will store our app components; "router" and "store" folders were created for "Vue Router" and "Pinia" modules; "views" folder will contain our pages components.

3. Install Firebase.

Okay, if we will be building a simple CRM, we still need some backend part, where our data (some users, products) will be stored. And for that - we will use Firebase. Simple, fast, and perfect solution for development, especially if you want to concentrate on the frontend side.

In this part of the article, we will install and configure the Firebase database for our project by using official documentation.

Let's visit the Firebase website, and "Get Started". If you already logged in to Google services then you will be redirected to the Firebase console, if not please log in.

In the Firebase console press "Add project", then enter "Project name" and choose "Create project". Google Analytics is not important for now, so we will not add this module to our app.

After the project is created you will have access to its console to configure it.

First of all, we need to install Firebase, so please choose the web version for installation, then add your project name to register. Let's use instructions from Firebase SDK and terminal: npm install firebase.

Then inside the "src" folder of our project create a firebase folder, and a firebase.js file. Copy all settings from the firebase console into our Firebase file. For now, that is enough.

Great, we create and prepare our Vue.js project for building a simple CRM app.

In this article, we've taken the first steps in building a powerful Vue.js CRM system. Starting with the Vue project setup, we navigated through the essential aspects of the project structure, ensuring a solid foundation for our development journey. Integrating Firebase as our backend solution adds a robust layer to our application, enabling seamless data management.

As we continue this series, stay tuned for in-depth explorations into Vue.js components, state management with Pinia, and the dynamic capabilities brought by Firebase integration. Remember, mastering Frontend development with Vue is not just about theory—it's about hands-on practice. Follow along, apply these concepts to your project, and elevate your Vue.js skills for real-world success.

On my next articles we will Implement Vuetify and start with Authentication! Thanks for reading!