Hello friends! Today, I will talk about one of the most important first steps when stepping into the sweet world of Vue.js: Setup! It’s like when you buy a new instrument and wonder, ‘Should I get a guitar or a saz?’ Vue has a similar situation. We have two main paths: CDN and Vue CLI. Which one is right for you, which one is more practical? Let’s take a look.
Like you, I was in the same situation when I first started. I jumped into the environment, read countless articles, watched many videos… Everyone explaining something, but the question in my head was always: ‘What do I do now?’ Setting up Vue was exactly like that. It felt like a riddle, and the more I tried to solve it, the more complicated it seemed.
Let’s start with CDN. As the name suggests, Content Delivery Network. This is a system that distributes Vue.js’s JavaScript files to servers around the world. You call Vue in your own HTML file with a simple script tag. That’s it!
So what does this mean? It means you don’t need to install anything on your computer. All you need is an internet connection and to add this simple script tag to your HTML’s <head> or <body>. For example:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Isn’t this so simple? 🙂 When I first started, I always did it this way. Perfect for quick experiments and small examples. Before you know it, you’ve tried many things, and then you realize your project has grown. That’s probably where CDN’s limitations come in.
Why? Because projects made with CDN are usually just a single HTML file with embedded JavaScript code. It’s like a ‘single file application.’ But as the project grows, managing the code, dividing into modules, even handling CSS in separate files becomes difficult. Once I used CDN for a small demo and saw my code get messy, I thought, ‘Yikes!’ That’s when I really understood how life-saving Vue CLI can be.
Now, let’s talk about Vue CLI. It’s a more professional tool. It’s like creating a ready-made project template for you. Imagine you’re building a house—you can either lay bricks and mix mortar from scratch or build on a ready foundation. Vue CLI is that ready foundation. It allows you to create components in separate files, add a router, and even incorporate state management tools like Vuex or Pinia easily.
To install Vue CLI, first ensure that Node.js and npm are installed on your computer. Most developers already have these. Then, open your terminal and run a simple command to create a new Vue project:
npm install -g @vue/cliNext, create a new project by:
vue create my-first-vue-projectIt will then ask you which features you’d like to include. Here, you can select your preferred options. Do you want a router? Vuex? TypeScript? All of these are available!
Recently, my spouse and I took a city tour in Bursa, visiting historic sites. The weather was perfect—cool but not oppressive. My mind kept thinking about coding, though. I wondered, ‘What is the purpose of this life?’ 🙂 Anyway, this Vue CLI thing is just like that. Although the initial setup seems a bit daunting, the time and organization it offers are invaluable in the long run.
My advice? If you just want to try Vue.js, write a few lines of code, and see what it does, CDN is a great starting point. No setup hassle. Just like a trial version. But if you’re serious about developing a project, managing your code efficiently, and building a scalable app, then I highly recommend installing Vue CLI right away. I believe starting with Vue CLI is more productive in the long term and keeps your code cleaner.
In summary, both have their advantages. CDN offers speed and simplicity; Vue CLI offers structure, scalability, and a more professional development experience. When choosing, think about your goals. Sometimes, opening with a quick CDN test and later transferring your project to Vue CLI can be a good approach. Exploring both options will give you a better jumpstart.
Recently, Vue 3’s CDN files have become much more convenient. We used to load separate modules, but now a single file gives access to the global API. This simplifies things even with CDN. Still, for large projects, the automation and tools provided by Vue CLI are on a whole different level, so don’t forget that.
In the end, I am confident you’ll make great things with Vue.js. Good luck on your journey! 🙂