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.
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 <firstname.lastname@example.org> 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.
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.
Once done you can get into the project doing a
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:
- 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.
Let’s focus on the source or src directory now form where we will work from. It has a:
- 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
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.
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.