Vue Cli 3

Posted on  by admin
In this tutorial we’ll explore the Vue CLI 3, along with the sleek new Vue UI, in order to quickly scaffold a Vue app.

We’ll then take a tour of the project the CLI creates for us to get comfortable working within these files and folders later.

This post is a free lesson from Vue Mastery’s Real World Vue course, where we walk through building a production-level Vue.js application from installation to deployment.

As you probably know, CLI stands for Command Line Interface, and the Vue CLI provides a full system for rapid Vue.js development.

This means it does a lot of tedious work for us and provides us with valuable features out-of-the-box, such as:.

It allows us to select which libraries our project will be using, then it automatically plugs them into the project.

It Configures Webpack. When we build our app with Webpack, all of our JavaScript files, our CSS, and our dependencies get properly bundled together, minified and optimized.

It allows us to write our HTML, CSS & JavaScript however we like. We can use single-file .vue components, TypeScript, SCSS, Pug, the latest versions of ECMAScript, etc.

It enables Hot Module Replacement (HMR). So when you save your project, changes appear instantly in the browser. This configuration is based on webpack-dev-server.

In order to use the CLI, you’ll need to have Node.js version 8 or above installed (8.10.0+ is recommended). To install the CLI, run this command in your terminal:. Once it is installed, you’ll have access to the vue binary in your command line.

We’ll use this to create our project.
Tobias SchäferTobias Schäfer
1,211
1

We’ll then be prompted with the option to pick a default preset or to manually select features.

Using the down arrow key, we’ll highlight Manually select features, then hit enter.

We’ll then be presented with a list of feature options.

Using the down arrow key, we’ll move down and use the spacebar to select the features we need for our project: Router, Vuex and Linter / Formatter.

We’ll then choose a Linter / Formatter.

For this project, we’ll be using ESLint + Prettier.

We’ll add the additional feature of Lint on save.

And we’ll choose to have dedicated config files. We have the option to save all of these settings as a preset.

We’ll choose not to with N. If you’d like to save this as a preset, however, it will be stored in a JSON file named .vuerc in your user home directory.

If you have yarn installed, you’ll be prompted to choose a package manager.

I’ll choose npm. When we hit enter, our project will be created automatically. Once our project is done being created, we can cd into. In order to view it live in our browser, we’ll run this command: npm run serve. Above is our app, running live in the browser.

It already has two pages, the Home page and the About page, which you can navigate between because it’s using Vue Router.

To learn more about Vue Router, check out Vue Mastery’s Real World Vue Course. Now that we understand how to create a Vue project from the command line, let’s repeat this same process but with the Vue UI instead.

Since we now have access to the vue binary, we can type vue ui in our terminal, which will start up the Vue UI in our browser.

Our first step is to click the Create tab, select the location where we want to save our project, then click Create a new project here.

We’ll then give our project a name, in this case, “real-world-vue”. We have the option to select a package manager, but we’ll stick with the default. Just like from the terminal, we’ll Manually select features.

We’ll select Router, Vuex, and make sure that Babel and Linter / Formatter are also selected and choose Dedicated Config Files. On the next page, we want to make sure Lint on save is selected, and in the right-hand dropdown, select ESLint + Prettier.

We also have the option to save these settings as a preset, but we can choose not to by clicking Continue without saving.

Now our project will be created.

The UI provides the ability to alter our configurations, as well as run tasks, like the serve task that we ran earlier from the terminal.

The difference here is that we get a lot more information about what is happening with that task.

You can also add plugins to your project from the Vue UI, which makes it very simple to add a library that you may need.

If you need to import a project that you hadn’t originally created from the Vue UI, you can easily do so from the Import tab of the Project Manager.

Just locate your project, and click Import this folder.

Now that we know how to create our project from the terminal and also from the UI, let’s take a look at the project that was created for us.

The node_modules directory is where all of the libraries we need to build Vue are stored. In the public directory, you place any static assets you don’t want to be run through Webpack when we build our project.

You’ll want to put the majority of your assets, such as images and fonts, in the assets directory so they can be optimized by Webpack.

The components directory is where we store the components, or building blocks, of our Vue app.
Richard MatsenRichard Matsen
18.4k
1

# Target Browsers