How to set up a new Vue project with Webpack and Bulma using the Vue CLI.
Vue CLI is a simple yet powerful CLI that you can use to scaffold Vue projects.
Install Vue CLI Globally:
You can now use the Vue CLI to scaffold projects. There are a number of templates available, but this article focuses on Webpack.
Scaffold a Project
To scaffold a Vue project with the Webpack template:
Move into the new project directory and install the base dependencies:
Run Dev server
Connect Up Bulma
Add a suitable SASS manifest file that you’ll use to import all your SASS modules:
Open this file and import the main Bulma Sass file:
Note that the tilde symbol refers Webpack/sass-loader to the
You then need to reference this in Webpack’s main entry point,
Bulma Sass - Additional Dependencies
Note that to compile Sass, Webpack needs the
node-sass node module and the Webpack
Add these to your project dependencies:
You can now run
yarn dev to build your development server.
Problem With Ubuntu Snap-Installed Atom (code editor) and Webpack Server
You may experience problems because
xdg-open does not run properly when launched within Atom (i.e. in platformio-ide-terminal) when Atom has been installed by means of a Ubuntu snap. This is because there is a GTK+ 2.x and GTK+ 3 conflict.
To resolve this, you can manually specify the browser to be used when the Webpack server is triggered. Amend
build/dev-server.js by passing in a preferred browser as a second parameter into the call to
comments powered by Disqus