VueJS is one of the 3 most used modern web development framework together with React and Angular.
Despite that the latter maintained respectively by the tech giants Facebook and Google, Vue seems highly attractive to many experienced web developers for its design, its flexibility and ease of development. That makes it very appealing for a newbie like me who doesn't know where to start, but who trusts the ones (I believe) who know what they are talking about, like any other hyper-social species would do! ;)
This tutorial is about building a web app using VueJS and understanding the different components and the build process to achieve it.
It is the first tutorial in a series that should lead to more advanced features of modern webapps, possibly involving other frameworks for front-end and backend (e.g. React, Angular, Python/Flask).
In this tutorial you will learn to do the following:
There is probably thousands of way to build a javascript-based project and it makes it overwhelming for someone like me who is not used to build modern web apps and to follow with development trend in that field.
So to get started properly without background, Vue CLI seems like a safe choice, maybe not the best, but Vue CLI seems built for that, simplifying the build of your VueJS web application.
Here is a video telling you everything you need to know and the installation's steps are the following:
npm i -g @vue/cli
Let's build the project named real-world-vue:
vue create real-world-vue
You will be prompted menus where you interact with the arrows, spacebar and Enter on your keyboard.
we will follow the tutoril and pick this setting:
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection
)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) N
You can open your new project folder and run your project:
cd real-world-vue
npm run serve will build our project and serve it as a local host.
you will be prompter the output local url: http://localhost:8080/
This seems even simpler and providing much more information using the Vue User Interface.
To open it, simply type vue ui.
Apply the same settings as previously when creating a new project in order to configure it as you wish. This is just as simple as through the command line, but more visually intuitive and bringing many more possibilities.
From the Project Dashboard you can:
This is how your final app would look like:
$ tree -L 2
.
|-- README.md
|-- babel.config.js
|-- node_modules ## with all the libraries/dependencies needed to build the project
| |-- @babel
| |-- @intervolga
| ...
| ...
| |-- yargs
| |-- yargs-parser
| `-- yorkie
|-- package.json
|-- postcss.config.js
|-- public ## put files (like images) that you don't want processed through Webpack
| |-- favicon.ico
| `-- index.html
`-- src ## where all our application-code goes (images, fonts, css, ...)
|-- App.vue ## Root component that all other components are nested within
|-- assets
|-- components ## components or building blocks of our Vue app
|-- main.js ## files that renders our app & mounts it to the DOM
|-- router.js ## configuration of our Vue Router
|-- store.js ## configuration of Vuex
`-- views ## files for the different views or "pages" of our app
You can open your project from the UI and run it from there or through the command line again:
cd real-world-vue
npm run serve
When running your app with npm run serve, you will this message:
App running at:
- Local: http://localhost:8080/
- Network: http://10.47.11.82:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
This is just an indication that the project hasn't been built, optimized and minified using Webpack.
To do it, simply use: npm run build.
npm run build
...
⠏ Building for production...
DONE Compiled successfully in 5685ms 1:00:52 PM
File Size Gzipped
dist/js/chunk-vendors.dc64aec3.js 112.84 kb 39.09 kb
dist/js/app.26301760.js 6.08 kb 2.28 kb
dist/js/about.d63ad26f.js 0.47 kb 0.33 kb
dist/css/app.7dae01f4.css 0.42 kb 0.26 kb
Images and other types of assets omitted.
DONE Build complete. The dist directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
When complete, it generates a dist/ directory ready to be deployed!