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.
This article is outdated because the vuejs-template is not longer maintained. Currently the best way to create a Vue.js project is to use vue-cli. You can find all the information here: https://cli.vuejs.org/guide/creating-a-project.html#vue-create
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.
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)
})
This will install all packages
npm install
This will run the server and open the browser http://localhost:8080/
npm run dev
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"
Comments