My latest project uses Vue.js as a framework, it has a complicated data model so I’m using Vuex, and it needs to be styled using Material Design.
This post details how I created the project.
I am a believer in vue-cli as a starting point to create any Vue project. It saves a lot of configuration time and in a few minutes I can have a working, deployable blank app. There are a number of templates that take care of different types of apps. I’ve used a few of them. I found a vue.js library that implements material design called Vuetify. It has a template that I’ll be using for this example.
One time setup
# to get vue-cli installed:
$ npm i -g vue-cli
For each new project
# Type the following and answer each of the questions below.
$ vue init vuetifyjs/webpack-advanced myproject
? Project name myproject
? Project description My Awesome Project
? Author J. Programmer <abc@example.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset none
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
vue-cli ยท Generated "myproject".
Store this in source control now!
Npm Packages
Now, open the package.json
file and move all the items from dependencies
to devDependencies
, then install the following (you may not need all of these libraries, but most of the apps I work on eventually need them):
$ cd myproject
$ npm install
# for ajax calls
$ npm install --save-dev axios
# for date/time manipulation and formatting
$ npm install --save-dev moment
# for the model layer
$ npm install --save-dev vuex
# for Font Awesome
$ npm install --save-dev vue-awesome
Basic configuration
In /config/index.js
, set autoOpenBrowser: false
. This will keep a new browser session from automatically starting every time you start the dev server. I keep my app open in a browser tab the entire time it is under development, so this would just create duplicates.
Remove .editorconfig
, so that it doesn’t cause errors when it doesn’t like your formatting.
In /build/webpack.dev.conf.js
, change devtool: '#inline-source-map'
. I was having trouble seeing the correct source code in Chrome without this. I haven’t tried to figure out why.
Favicon
Go to this site: https://realfavicongenerator.net/ and generate the favicon files. This will result in around a dozen files being generated. Put those files in static/images
.
In index.html
, add the code recommended by the favicon generator’s output.
Run
$ npm run dev
Navigate to localhost:8080 to see your app.