September 06, 2018 - VitoMd and the Evil Machine

How to start a Vue.js project fast and easy

I always forget how to start a new Vue.js project so I will write this tutorial as a reminder. And it also will be helpful for everyone learning this awesome javascript framework.

Using a starter template

I like to use webpack-simple template it’s easy and clean. It has everything I need for simple projects. I used this template for some of my projects like: Tactical Chess and handandbrainchess.com

Install vue-cli if you don’t have it and initialize the webpack-simple project

$ npm install -g vue-cli
$ vue init webpack-simple my-project

This will ask you some question about your project. Like name, description, author and license.

Use a css framework

I like to use Buefy for UI components, it’s based on the Bulma css framework. It’s easy to use and really nice.

cd my-project
npm install buefy -save

Modify main.js to use Buefy

import Vue from 'vue'
import App from './App.vue'

import Buefy from 'buefy'
import 'buefy/dist/buefy.css'

Vue.use(Buefy)

new Vue({
  el: '#app',
  render: h => h(App)
})

Install and run the project

This will install all packages

npm install

This will run the server and open the browser http://localhost:8080/

npm run dev

Deploy

I write a deploy.sh file that run rsync to deploy the dist folder to my server.

#!/usr/bin/env bash
rsync -vhr ./dist/ ssh-user@your-server.com:/your/server/folder/

I add a script to package.json called publish to build the code, copy some files and deploy.

"publish": "npm run build && cp ./static/. ./dist/ && cp index-static.html ./dist/index.html && ./deploy.sh"
Share this post on Twitter

Comments