Vue – vue-cli

vue-cli

What is best practice preparing development, staging and production mode?
There are many people to try this.
Vue prepares vue-cli to solve this problem.(Maybe).
Using vue-cli, we can avoid annoying set up build tool.(Maybe)

Ref : vue-cli

Let’s try.

Install and create simple project

npm install --global vue-cli
vue --version					# show version
vue init webpack projectname

projectname is your project name

Install dependencies

cd projectname
npm install

Run for dev mode

npm run dev

Build for production

npm run build

If build is success, dist is made under root directory.

|-index.html
|- static
    |- css
    |- js

main.js

This is root javascript to manage root element on this page.

import Vue from 'vue'
// import App from './App'
import AppComponent from './components/App/index.vue'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: '<AppComponent/>',
  components: { AppComponent }
})

Import Vue and AppComponent(Vue component) from outfile
Of course, we can change component

Single File Component

By default, this style sample is already set. Take a look and check how it works.

App.vue

If you change above import component to App, you can see App

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'app',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Separate Files for each functionality parts

I look for sample application for vue.(jackfranklin/vue2-demo-proj)

Create components/ directory and each component has following files

• index.vue
• script.js
• style.css
• template.html

To understand each code easily, but there are a lot files.

How to import those files into

index.vue

<template src="./template.html"></template>
<script src="./script.js"></script>
<style scoped src="./style.css"></style>

script.js

import GithubInput from '../GithubInput/index.vue'
import GithubOutput from '../GithubOutput/index.vue'

export default {
  name: 'App',
  components: {
    'github-input': GithubInput,
    'github-output': GithubOutput
  },
  data() {
    return {}
  }
}

style.css

tempalte.html

<div>
  <p>Hello World</p>
  <github-input></github-input>
  <github-output></github-output>
</div>