A Beginner’s Guide to Vue CLI
When building a new Vue app, the best way to get up and running quickly is to use Vue CLI. This is a command-line utility that allows you to choose from a range of build tools, which it will then install and configure for you. It will also scaffold out your project, providing you with a pre-configured starting point that you can build on, rather than starting everything from scratch.
The most recent version of Vue CLI is version 3. It provides a new experience for Vue developers and helps them start developing Vue apps without dealing with the complex configuration of tools like webpack. At the same time, it can be configured and extended with plugins for advanced use cases.
Vue CLI v3 is a complete system for rapid Vue.js development and prototyping. It’s composed of different components, such as the CLI service, CLI plugins and recently a web UI that allows developers to perform tasks via an easy-to-use interface.
Throughout this article, I’ll introduce the latest version of Vue CLI and its new features. I’ll demonstrate how to install the latest version of Vue CLI and how to create, serve and build an example project.
Vue CLI v3 Installation and Requirements
In this section, we’ll look at the requirements needed for Vue CLI v3 and how to install it.
Let’s start with the requirements. Vue CLI v3 requires Node.js 8.9+, but v8.11.0+ is recommended.
You can install the latest version of Node.js in various ways:
By downloading the binaries for your system from the official website.
By using the official package manager for your system.
Using a version manager. This is probably the easiest way, as it allows you to manage multiple versions of Node on the same machine. If you’d like to find out more about this approach, please see our quick tip Installing Multiple Versions of Node.js Using nvm.
Vue creator, Evan You, described version 3 of the CLI as a “completely different beast” from its predecessor. As such, it’s important to uninstall any previous version of the CLI (that is, 2.x.x) before preceding with this tutorial.
If the vue-cli package is installed globally on your system, you can remove it by running the following command:
npm uninstall vue-cli -g
Installing Vue CLI v3
You can now install Vue CLI v3 by simply running the following command from your terminal:
npm install -g @vue/cli
Note: if you find yourself needing to add sudo before your command in macOS or Debian-based systems, or to use an administrator CMD prompt in Windows in order to install packages globally, then you should fix your permissions. The npm site has a guide on how to do this, or just use a version manager and you avoid the problem completely.
After successfully installing the CLI, you’ll be able to access the vue executable in your terminal.
For example, you can list all the available commands by executing the vue command:
You can check the version you have installed by running:
Creating a Vue Project
After installing Vue CLI, let’s now look at how we can use it to quickly scaffold complete Vue projects with a modern front-end toolset.
Using Vue CLI, you can create or generate a new Vue app by running the following command in your terminal:
vue create example-vue-project
Tip: example-vue-project is the name of the project. You can obviously choose any valid name for your project.
Progressive Web App support
Vuex (Vue’s official state management library)
CSS Pre-processors (PostCSS, CSS modules, Sass, Less & Stylus)
Linter/ Formatter using ESLint and Prettier
Unit Testing using Mocha or Jest
E2E Testing using Cypress or Nightwatch
Whatever you choose, the CLI will download the appropriate libraries and configure the project to use them. And if you choose to manually select features, at the end of the prompts you’ll also have the option to save your selections as a preset so that you can reuse it in future projects.
Now let’s look at the other scripts for serving the project (using a webpack development server and hot module reloading) and building the project for production.
Navigate inside your project’s folder:
Next, run the following command to serve your project locally:
npm run serve
The command will allow you to run a local development server from the http://localhost:8080 address. If you use your web browser to navigate to this address, you should see the following page:
The development server supports features like hot code reloading, which means you don’t need to stop and start your server every time you make any changes to your project’s source code. It will even preserve the state of your app!
And when you’ve finished developing your project, you can use the following command to build a production bundle:
npm run build
This will output everything to a dist folder within your project. You can read more about deployment here.
What is the Vue CLI Service?
The Vue CLI Service is a run-time dependency (@vue/cli-service) that abstracts webpack and provides default configurations. It can be upgraded, configured and extended with plugins.
It provides multiple scripts for working with Vue projects, such as the serve, build and inspect scripts.
We’ve seen the serve and build scripts in action already. The inspect script allows you to inspect the webpack config in a project with vue-cli-service. Try it out:
As you can see, that produces a lot of output. Later on we’ll see how to tweak the webpack config in a Vue CLI project.
The Project Anatomy
A Vue project generated with the CLI has a predefined structure that adheres to best practices. If you choose to install any extra plugins (such as the Vue router), the CLI will also create the files necessary to use and configure these libraries.
Let’s take a look at the important files and folders in a Vue project when using the default preset.
public. This folder contains public files like index.html and favicon.ico. Any static assets placed here will simply be copied and not go through webpack.
src. This folder contains the source files for your project. Most work will be done here.
src/assets. This folder contains the project’s assets such as logo.png.
src/components. This folder contains the Vue components.
src/App.vue. This is the main Vue component of the project.
src/main.js. This is the main project file which bootstraps the Vue application.
babel.config.js. This is a configuration file for Babel.
package.json. This file contains a list of the project’s dependencies, as well as the configuration options for ESLint, PostCSS and supported browsers.
node_modules. This folder contains the installed npm packages.
This is a screenshot of the project’s anatomy:
Vue CLI Plugins
Vue CLI v3 is designed with a plugin architecture in mind. In this section, we’ll look at what plugins are and how to install them in your projects. We’ll also look at some popular plugins that can help add advanced features by automatically installing the required libraries and making various settings—all of which would otherwise have to be done manually.
What a Vue Plugin Is
CLI Plugins are just npm packages that provide additional features to your Vue project. The vue-cli-service binary automatically resolves and loads all plugins listed in the package.json file.
The base configuration for a Vue CLI 3 project is webpack and Babel. All the other features can be added via plugins.
There are official plugins provided by the Vue team and community plugins developed by the community. Official plugin names start with @vue/cli-plugin-, and community plugin names start with vue-cli-plugin-.
Official Vue CLI 3 plugins include:
Unit testing etc.
How to Add a Vue Plugin
Plugins are either automatically installed when creating the project or explicitly installed later by the developer.
You can install many built-in plugins in a project when initializing your project, and install any other additional plugins in the project using the vue add my-plugin command at any point of your project.
You can also install plugins with presets, and group your favorite plugins as reusable presets that you can use later as the base for other projects.
Some Useful Vue Plugins
There are many Vue CLI plugins that you might find useful for your next projects. For example, the Vuetify UI library is available as a plugin, as is Storybook. You can also use the Electron Builder plugin to quickly scaffold out a Vue project based on Electron.
I’ve also written a couple of plugins which you can make use of:
vue-cli-plugin-nuxt: a Vue CLI plugin for quickly creating a universal Vue application with Nuxt.js
vue-cli-plugin-bootstrap: a Vue CLI plugin for adding Bootstrap 4 to your project
If you’d like to find out more about plugins, check out this great article on Vue Mastery: 5 Vue CLI 3 plugins for your Vue project.
The post A Beginner’s Guide to Vue CLI appeared first on SitePoint.
30+ Web Tools and Services to Help You Launch Your Next Big Thing
This article was created in partnership with Mekanism. Thank you for supporting the partners who make SitePoint possible.
2019 is the best year to become successful, to launch your own online or offline business, to invent a product or service, or to grow your business into a huge corporation. Because to sketch, test, build and launch that business that will become the next Uber, Instagram, or Waze is now easier than ever before.
The difference between now and previous years, is that there are now a plethora of web tools and services to help you launch your next big thing - some of them are even free! Today anybody can build a website or logo without any specialist knowledge or previous experience. With only a few hours investment, you can get amazing results. It's a quick and affordable way to get your site or product to market.
In this article we are going to review 36 different web tools and services that are recommended by successful people. Each of them will save you time and money, or help improve your business and workflows, so you can get on with launching and scaling.
1. Creative-TIM - Premium Bootstrap Themes and Templates
Creative Tim is the perfect place where web designers and web developers can find fully coded UI tools to help you build web and mobile apps. With over 750.000 users, Creative Tim offers UI Kits, Dashboards and Design Systems.
All the development is made on top of Bootstrap 4: Vuejs, Angular, React, React Native. Using these tools will save developers and designers hours of work since the products already contain a large number of components and are packed with all the plugins that you might need on a project. Everything used to create the products can be downloaded for free under the MIT License.
For people with many upcoming projects, Creative Tim offers 6 Bundles at special prices, to encourage developers to save precious time and to trust the quality of their projects.
Last but not least, Creative Tim’s products are used not only by thousands of freelancers and developers but by top companies like NASA, Cisco, IBM, and Amazon.
Check out their website and find the product that matches your needs.
Pricing: Free to $249
2. Brizy - Innovative Site Builder
Brizy is the most user-friendly visual page builder in town! No designer or developer skills required. The only tools you'll need to master are clicks and drags.
Brizy can be used two ways. One is to download the WordPress plugin and use it as such, and the next one is the Cloud platform where you can create landing pages in minutes. From hosting to domain setups Brizy handles everything. Brizy Cloud is included with any Brizy PRO plan.
Creating a powerful, fully functional website is extremely easy with Brizy and anybody can do it without having any designer’s skills or writing a single line of code. This website builder has the most powerful features included, both for the free and paid plans. The free account will bring you premium features that you have to pay for on other website builders. At Brizy, these features are free.
Build a free website with Brizy today, the process is very fast and intuitive.
3. Tailor Brands
Tailor Brands is a revolutionary online logo and branding platform that will help you design your logo in seconds. It has over 10 million users and counting, and it was used to create over 400 million designs. Every second 1 a new design is made via it.
This AI-powered online logo maker platform does not use pre-made logo templates. Every design is uniquely crafted to match your business and brand personality perfectly. You don’t need to have any design skills or special knowledge, it is super simple to use and extremely fast.
Write down the logo name you want, make a few selections from the options provided by Tailor Brands and you will get a number of designs to choose from.
4. 48HoursLogo – Affordable Logos Done Fast
48hourslogo is a fast, easy and very affordable logo crowdsourcing website that has created over 3 million logos. With contest prizes starting at just $99, more than 40,000 small businesses and entrepreneurs have used this amazing logo design service to get gorgeous and creative designs.
After launching your logo design contest at 48hourslogo, your project will go through 3 stages before arriving at your final design. The qualifying stage: the contest is open to all registered designers and they will submit multiple logo concepts for you to choose from. The design revision stage: at the end of qualifying stage, you will be prompted to select up to 3 finalist designers to enter the “design revision stage”. And at the end, the finalizing stage: after selecting your contest winner, you will work with your winning designer on finalizing your design, (you can still request small changes and tweaks to your winning logo).
Start a logo design contest using 48hourslogo.
Codester is a huge marketplace where web designers and web developers will find tons of premium PHP scripts, app templates, themes, plugins and much more.
Always check the Flash Sales section where hugely discounted items are being sold.
Browse Codester and pick the items you need.
NameQL helps you find a great name. It considers thousands of potential names in milliseconds and shows you the best ones that are still available for purchase as [name].com. It'sa huge time saver whenever you are looking for a new website domain name.
Australia is a great destination to live and work, with developers, software engineers and user experience/user interface designer in high demand. If you're considering immigrating to Australia, you can discuss with SeekVisa, who are migration experts.
Australia's Employer Nomination Scheme (ENS) enables Australian employers to sponsor highly skilled workers to live and work permanently in Australia. This is the quickest way for IT developers to immigrate to Australia. Contact Seekvisa to determine your eligibility.
Publishers are seeing up to 90% of their traffic coming from mobile. Mobile apps give readers the experience they want and let publishers increase engagement, traffic, and revenue.
With fast loading times, your app encourages loyalty and repeat visits. With push notifications, it brings people back again and again. Your icon is a constant reminder of your brand and content.
MobiLoud is the best solution for news mobile apps built on WordPress. They will publish and maintain your custom app, with push notifications, advertising and subscriptions, all at a fraction of the time and cost of traditional app development.
The post 30+ Web Tools and Services to Help You Launch Your Next Big Thing appeared first on SitePoint.