Skip to content

Setup notes

Jump to bottom
scramatte edited this page May 6, 2020 · 12 revisions

If you already have a running project you can skip this part and go to "Install eom-form" step

Installing Vue Cli

npm install -g @vue/cli

Creating our Vue project

We copy the following setup steps from Vue CLI 3 tutorial tutorial.

vue create my-vue-app

This command will download our project-related files in my-vue-app folder.

Once you run this command you will prompt with different questions.

Select the manually select features option by using your down arrow keys and hit enter.

Vue CLI v3.0.0
? Please pick a preset:
  default (babel, eslint)
❯ Manually select features

Now it will prompt with various add-ons to add in our project Use spacebar to select CSS Pre-processors then hit enter.

? Please pick a preset: Manually select features
? Check the features needed for your project:
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◯ Vuex
❯◉ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing

Now it will ask for choose your CSS pre-processor by using arrow keys to select your favorite preprocessor.

We will go with SCSS/SASS.

? Pick a CSS pre-processor (PostCSS, Autoprefixer
 and CSS Modules are supported by default): (Use arrow keys)
❯ SCSS/SASS
  LESS
  Stylus

We will then choose ESLint+Prettier option for our project.

? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
❯ ESLint + Prettier

Now It will prompt with additional lint features option choose Lint on save option and hit enter.

? Pick additional lint features
> to invert selection)
❯◉ Lint on save
 ◯ Lint and fix on commit

Now choose dedicated config files option.

? Where do you prefer placing config for Babel,
PostCSS, ESLint, etc.?
❯ In dedicated config files
  In package.json

We will ask for Save this as a preset for future projects enter N for this project.

Save this as a preset for future projects? (y/N): N

Install eom-form

   npm install eom-form --save

Edit src/main.js

   import { BootstrapVue } from 'bootstrap-vue'
   import EomForm from 'eom-form'
   
   import 'bootstrap/dist/css/bootstrap.css'
   import 'bootstrap-vue/dist/bootstrap-vue.css'

   Vue.use(BootstrapVue)
   Vue.use(EomForm)

   Vue.config.productionTip = false

   new Vue({
     router,
     render: h => h(App)
   }).$mount('#app')

Load icon fonts

from you linux shell into root of your vue app project, copy whole vendor folder to public

cp -r ../node_modules/eom-form/public/vendor ./public

finally edit index.html to load icon fonts

<head>
    ...
    <!-- Icons. Uncomment required icon fonts -->
    <link rel="stylesheet" href="<%= BASE_URL %>vendor/fonts/fontawesome.css">
    <link rel="stylesheet" href="<%= BASE_URL %>vendor/fonts/ionicons.css">
    ...
</head>

### create/copy schema json file

cp -r ../node_modules/eom-form/src/data/schema.json src/

{
  "firstName": {
    "component": "EomInput",
    "label": "firstname",
    "icon": "ion ion-ios-person",
    "help" : "introduce tu nombre",
    "validations": {
      "required": {
      },
      "minLength": {
        "min": 3
      }
    }
  }
}

Create a form

Edit any component such views/about.vue and replace content with following code

<template>
  <div id="app">
   <b-container class="p-5">
      <b-alert :variant="status.variant" dismissible v-model="status.invalid" v-if="status.message">
        {{ status.message }}
      </b-alert>

      <form class="mb-3" @submit.prevent="handleSubmit" novalidate>
        <EomForm
          :schema="schema"
          v-model="model"
          ref="eomForm"
        />
        <b-btn variant="success" type="submit">submit</b-btn>
      </form>
    </b-container>
  </div>
</template>

<script>
import schema from './schema.json'

export default {
  name: 'App',
  components: {
  },
  data () {
    return {
      status: {
        message: '',
        variant: 'success',
        invalid: false
      },
      schema,
      model: {},
    }
  },
  methods: {
    handleSubmit () {
      this.status.message = ''
      let valid = this.$refs.eomForm.validate()

      if (!valid) {
        console.warn('invalid form')
        this.status = {
          message:  'invalid_datas',
          variant:  'danger',
          invalid: true
        }
        return
      }
    }
  }
}
</script>

Running our Development server

Create vue.config.js file into my-vue-app root folder

module.exports = {
  devServer: {
	  disableHostCheck: true,
          public: '0.0.0.0:8080',
  }
}
npm run serve

Clone this wiki locally