Introducing Vue CLI
Lecture resources:
The first new tool we'll be getting acquainted with in this course is Vue CLI which is a development tool for creating sophisticated Vue.js apps.
In this lesson, we're going to begin with some background on Vue CLI before we learn how to install it and start using it.
Background
If you did my introductory Vue course, you'll know that we wrote all of our code in a regular JavaScript file that we loaded from our index.html file.
This worked fine because we were creating a relatively simple app and we weren't worried about scaling it, or optimizing its performance and compatibility.
But in order to build a more sophisticated and higher-quality app like we'll be doing in this course, we'll want to utilize some JavaScript development tools.
Why do we need JavaScript development tools?
For most web apps, you'll want to ensure they load as fast as possible. An obvious way to do this is to make the code compact and terse.
You'll also want to ensure your app is compatible with as many browsers as possible. To do this, you'll need to use the most broadly-supported version of JavaScript and the most broadly-support web APIs.
But therein lies a contradiction. Because, as the developer of the app, you'd rather make the opposite choices!
Firstly, you want your code to be easy to write and comfortable to read. Such code will almost assuredly not be compact and terse.
You'll also want to use as many modern JavaScript features and web APIs as you can as these make the language more powerful and easier to work with.
Resolving this contradiction is the job of JavaScript development tools.
Babel
Let's take a brief look at one of the most important JavaScript development tools, which is Babel.
Babel's job is to transform modern JavaScript code into older JavaScript code to ensure it's broadly compatible across browsers.
It does this by leveraging the fact that new JavaScript syntax can often be expressed as old JavaScript syntax, albeit less elegantly.
For example, the let variable type was only added to the language recently, as was the "fat arrow" syntax for functions.
While many browsers support these now, you still might not be able to use these features directly in a production app as older browsers would see these as invalid syntax and simply crash.
Babel allows you to use this syntax in your source code and will "transpile" it into broadly-compatible code for your production bundle.
In this example, the let has been changed to var and the fat arrow function has been changed into a regular JavaScript function, giving you much more assurance that your code will run without error.
// Source code
let val = 1;
() => {
val += 1;
};
// Production code
var val = 1;
(function () {
val += 1;
});
Babel is just one of several important JavaScript development environment tools.
Some of the others include ESLint which ensures your code style is consistent, TypeScript which allows you to write type-safe JavaScript code, and Vue Loader which allows you to use the famous single-file component format which we'll be covering later in the course.
Webpack
This brings us now to Webpack. Webpack is one of the most important JavaScript development tools, but is conceptually different to the others we've discussed so far.
One of the difficulties of Webpack is that it appears to be several unrelated tools rolled into one.
It's simultaneously a:
- Module bundling
- A build pipeline
- And a development server
Once you get the hang of Webpack you'll see why it actually makes sense that it should have this Swiss-army-knife architecture.
To avoid getting too offtrack, I'm going to skip an explanation of the module bundling feature of Webpack, even though it's the probably most important and most misunderstood aspect of Webpack.
If you want to dive down that rabbit hole, I'll refer you to an article of mine called Jargon-Free Webpack Intro For VueJS Users which is linked in the course notes.
Build pipeline
Let's discuss the build pipeline aspect of Webpack. Webpack can take your source code and put it through a variety of transformations and transpilations provided by development tools like Babel, ESLint, and Vue Loader, saving you having to set these up separately.
The primary way of using Webpack is providing a configuration file where you will specify these various development tools you want included in your pipeline.
Development server
Which brings us to the development server aspect of Webpack. You can have Webpack run the pipeline on the fly as you write your code.
The output can be accessed in your browser on a local port.
And with an additional feature called hot module reloading, Webpack can even update your development app without even requiring a browser refresh.
As useful as Webpack is, it's notoriously tricky to set up. If you decide to use Webpack for a Vue project, you might find yourself spending the first half an hour or more just wrangling your Webpack config.
Vue CLI
Which brings us all the way back to Vue CLI.
You see, it turns out that most of the time developers want the same things in their development environment - Babel, ESLint, hot module reloading.
And if you're developing a Vue project, you'll usually want Vue, Vue Loader, and maybe even plugins like Vue Router and Vuex.
So wha Vue CLI is, is a fully-functioning wrapper around Webpack which allows you to setup Vue project with best-practice development tools and a development server.
So long as you are happy with the default options, Vue CLI can set up such a project without any configuration required.
Vue CLI requirements
With the background of Vue CLI now understood, let's see how to use it!
First, you'll need to install it on your development computer. To do that, you'll need a Node version of at least 8.9.
To discover what version you have, go to your terminal and type:
node --version
If you don't have the required version you should pause this video and upgrade it.
Installing Vue CLI
To install Vue CLI, we're now going to type npm install, then we'll use the g switch to make this a global installation, and then we'll specify the NPM package which is @vue/cli.
npm install -g @vue/cli
After that's finished installing, you can confirm it's working by typing:
$ vue --version
And you should see the version outputted in the console.
In the next video, we'll be setting up a Vue CLI project.
Click to load comments...