/vue-setup

How I like to set up Vue projects for prototyping

Primary LanguageCSS

Vue setup checklist

Prototyping setup for new Vue projects.

Vue plugins

  • Use Vue Router
  • Use Vuex

Project setup

Styling and assets

  • Add Basscss (see below), or try Tachyons
  • Put fonts, images, sass into a single assets folder
  • Set up colours in variables.scss
  • Import your own toolkit additions as a single CSS file
  • Create a single CSS file for project-specific toolkit styles
  • Override h0-h6 in the file above with project-specific type
  • Import the CSS files in main.js
  • Import and set up fonts

Other plugins

  • Add Element UI (see below)

CSS additions

$ yarn add basscss

// in main.js
import 'basscss/css/basscss.css'
import '../assets/sass/global'
import '../assets/sass/basil-toolkit'

Adding Element UI

Check the documentation for latest install instructions.

$ npm i element-ui@next -S

// in main.js
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)