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.