Let’s buid a vue app

Ok, so i have some stories and now it is time to sum them the * up! Let’s buid an app, an easy app wich explains some more of this vue people are talking about.

Mail app, seems simple. I’m gonna name this thin kazoo, and i am starting on a webpack vue template:

vue init webpack kazoo

It gave me some hard questions….

• Project name kazoo
• Project description A Vue.js project
• Author disjfa <my-email>
• Vue build runtime
• Install vue-router? Yes
• Use ESLint to lint your code? Yes
• Pick an ESLint preset Airbnb
• Setup unit tests with Karma + Mocha? Yes
• Setup e2e tests with Nightwatch? Yes

Let’s check. Project name is simple, thas a name. Project descriptions left default, will get there sometime. I am the author, thanks. Vue build….

Build can be “runtime” of “runtime + Compiler”. The latter is easy for use in existing project, you can use some html in some vue templates which vue renders. But since i will make all my own items i can just use runtime. And hey, 6kb code less so that’s faster.

Eslint, I like my linters and eslint is one of the best there is. You can set the linter to Standard or Airbnb. Standard is ok but i like my semicolons; This will lint my code, linting is checking if what i code somewhat is what it should be and add some extra rules like single quotes and like i said semicolons on the end. If you want to know all the possible configs you can check the rules on the eslint page, or the Airbnb rules on their github.

Karma, mocha and end to end test i don’t quite know, but i like testing my apps so we will get there along the way. You can just add tests to check if your code does what it should, and if you change stuff around it should still work. That’s always helpful.

So finally, we just set up the app basics and haven’t even started coding.Let’s install and start.

cd kazoo
npm install
npm run dev

That’s what the installer said on the end, i guess we will do just that! And now we have a page… with vue documentation links. You can check them out and just read them and get lost in all the information. But i want it gone!

I want sass, because i like sass. And probably gonna use bootstrap. And the vue template does not have sass compiling.

npm install node-sass sass-loader bootstrap@4.0.0-alpha.6 --save

We have sass, now to set it up in the webpack.base.conf.js file in the build folder just created. We have to add them as rules.

{
  test: /\.scss$/,
  use: [{
    loader: "style-loader" // creates style nodes from JS strings
  }, {
    loader: "css-loader" // translates CSS into CommonJS
  }, {
    loader: "sass-loader" // compiles Sass to CSS
  }]
},

Let’s test this, find the App.vue in the src folder. Remove all that css and add bootstrap just to check.

<style lang="scss">
    @import '../node_modules/bootstrap/scss/bootstrap.scss';
</style>

I did have to add a lang of scss to the style so it will be rendered. Have not found a way to get rid of the ‘../node_modules’. But hey, we will get there. Now when we run npm run dev again we will get the nice bootstrap fonts and sizes. So cool, we can use that.

Cool, now we have a simple start. Next time we will have to add some things;

• Mail module, and more.
• Routes and child routes.
• Vuex for a store.

You can also just check my status on https://disjfa.github.io/kazoo/ and check the source code on https://github.com/disjfa/kazoo. I will probably code first and conclude here later. Coding is way easier than writing.

But for now, just enjoy!

Next up, Let’s route a vue app.