Part 0: Scaffolding

Step 1: Initialize the app

  1. Install

    # Install vue-cli
    $ npm install -g vue-cli
    # Scaffold project
    $ vue init webpack vue-workshop-app
    ? Project name vue-workshop-app
    ? Project description A Vue.js project
    ? Author Maxence POUTORD <>
    ? Vue build standalone
    ? Install vue-router? Yes
    ? Use ESLint to lint your code? Yes
    ? Pick an ESLint preset Standard
    ? Set up unit tests No
    ? Setup e2e tests with Nightwatch? No
    ? Should we run `npm install` for you after the project has been created? (recommended) npm
  2. Add css framework in the index.html

    <link rel="stylesheet" href="">
  3. Test if everything works fine

    $ cd vue-workshop-app
    $ npm install
    $ npm run dev
    DONE  Compiled successfully in 2574ms
    I  Your application is running here: http://localhost:8080

Step 2: Now let's prepare everything for the first step

  1. Open src\App.vue and replace the content by the following

     <div id="app">
       <h1 class="ui center aligned header">StackOverVue</h1>
    export default {
     name: 'App'
    #app {
     font-family: 'Avenir', Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     margin-top: 60px;
  2. Create a new file src\api\stackoverflow-search-single.json with the following content:
  3. Open src\components\HelloWorld.vue and replace the content by the following

     <div class="ui container">
       <div class="ui comments">
         <div class="comment">
           <a class="avatar">
             <img src="">
           <div class="content">
             <a class="author">John Doe</a>
             <div class="metadata">
               <div>1 april 2017</div>
               <div><i class="star icon"></i>1000 Votes</div>
               <div><i class="comment icon"></i>5 answers</div>
             <div class="ui mini label">Vue.js</div>
             <div class="text">
               Hey guys, how do you bind data to the DOM?
             <div class="actions">
               <a>View answers</a>
    export default {
     name: 'HelloWorld',
     data () {
       return {
         question: {
           tags: ['javascript', 'vue.js', 'vue-resource', 'vuex'],
           owner: {
             reputation: 3410,
             user_id: 2294225,
             user_type: 'registered',
             accept_rate: 92,
             profile_image: '',
             display_name: 'Stephan-v',
             link: ''
           is_answered: true,
           view_count: 5252,
           accepted_answer_id: 38074979,
           answer_count: 1,
           score: 14,
           last_activity_date: 1467114417,
           creation_date: 1467106122,
           last_edit_date: 1467114417,
           question_id: 38072302,
           link: '',
           title: 'Structuring a Vue + Vuex project'


results matching ""

    No results matching ""