Vue CLI 2 & Vue Files | IMWZ – Bespoke DevOps Work

Let’s create a Vue Project with the Vue Command Line Interface and work with Vue files in this post. We will start with the whole setup explaining a few things down the line and then continue with Vue files.

Installation Vue CLI

To install it you do need Node which you can download from their website.

We are using the older Vue CLI 2 here

If you are by now not really familiar with it, it might be a good time to leave this post be for a while and read more upon it. With Node comes the Node NPM package manager which allows you to install Vue CLI. Install it using:

npm i -g vue-cli

With the Vue CLI you can choose a template to get started with your Vue Project. Ideal for small to large projects for which you use Vue only and need to have everything available in your package.

NB npm install -g @vue/cli is for Vue CLI 3 not used here

NBB Webpack template is not compatible with new Vue CLI 3

Vue CLI Webpack Package

We will start with a webpack project. A package with installs a Vue setup with Webpack to grab source JS and Vue, export it as html, JS and assets and converting all ES5 JS to JS understood by all browsers. The command is:

vue init webpack my-project

so let’s make it

vue init webpack vue-cli-webpack-project

We then get

jasper@~/webdesign/vue-basics $ vue init webpack vue-cli-webpack-project
  A newer version of vue-cli is available.

  latest:    2.9.6
  installed: 2.9.2

 Project name vue-cli-webpack-project
 Project description Vue CLI Webpack
 Author Jasper Frumau <jasper@imagewize.com>
 Vue build (Use arrow keys)
❯ Runtime + Compiler: recommended for most users 
  Runtime-only: about 6KB lighter min+gzip, but templates

(or any Vue-specific HTML) are ONLY allowed in .vue

and some extra questions and also the option to install all packages right away.

General Updates

We also did a:

npm update -g

to deal with some warning on outdated packages. I also updated npm itself with

npm install npm@latest -g

If you are all set you do not need to do this of course.

Project Structure

Once done you can get into the project doing a

cd vue-cli-webpack-project

and it will look like this:

As you can see there now is a

scr folder where all the source files are that will be compiled by Webpack,
a build folder where the builder js files are.
static folder where images and such reside
and there are some other folders which I will now not get into.

Development and Production

If I run

npm run dev

all assets will not get compiled. You however will see http://localhost:8080 as the location to check out your app.

NB With laravel it just compiles things for you though browserify can load things at the side.

The following other things also happen under the hood:

Webpack + vue-loader for single file Vue components.
State preserving hot-reload
State preserving compilation error overlay
Lint-on-save with ESLint
Source maps

If I run

npm run build

however all assets do get compiled:

JavaScript minified with UglifyJS v3.
HTML minified with html-minifier.
CSS across all components extracted into a single file and minified with cssnano.
Static assets compiled with version hashes for efficient long-term caching, and an
auto-generated production index.html with proper URLs to these generated assets.
Use npm run build –report to build with bundle size analytics.

You will see a new folder dist where all the compiled files will be at.

SRC Folder

Let’s focus on the source or src directory now form where we will work from. It has a:

assets,
components and
router folder

Latter because I chose to work with Vue Router. The assets and components folder are pretty standard, on any project you work on really.

Now why do we have an assets folder besides a components folder? Well assets are for static stuff like images that you do use in your application.

NB Laravel has js, sass and the vendor folder in most of our projects and js then has the classes, components and mixins

Vue Files

Now as you can see Vue files are used here for the base app or file as well as all the components. As we mentioned in Vue Components 101 Vue files Vue files are very useful as they allow for all your component data to be in one single location. And with the Webpack setup you can convert the Vue files to JS, CSS and HTML that can be read by all browsers in production.

Modifying Things

Now, now we haven’t even started modifying stuff. We need to start adding our own components and take this baby for a spin. But that will be for a new blog post and one probably using Vue CLI 3 as it is another improvement built upon the same principles.

I do think do you can now start with this project using this setup. HelloWorld.vue is a nice starting point with template block, script block and CSS. And also, that is how we worked on our Vue Shop. So if you need more details on how to go on do check this out. I will finish that series with Vue CLI 2. This as I have progressed so far with it already and it works just as well.

Blog